/* ============================================================
   CFC ACADEMY · RADAR DE EDITAIS
   Design System — camada 3: componentes da plataforma
   ============================================================ */

/* ============================================================
   TOPBAR — barra de status do robô de captura.
   Conceito: a plataforma se anuncia como MÁQUINA LIGADA.
   ============================================================ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:90;
  height:var(--topbar-h);
  /* Cor FIXA em rgba(10,15,10,.82) era resquício do tema escuro:
     ela não seguia os tokens, então a barra continuou preta
     enquanto o resto clareou — e o texto escuro por cima dela
     ficou com 1,09:1 de contraste, praticamente invisível.
     Medido no navegador, não deduzido. */
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--linha);
}

/* Ao rolar, a barra ganha sombra em vez de mudar de cor: sinaliza
   que está sobreposta ao conteúdo sem piscar na tela. */
.topbar.rolou{
  background:rgba(255,255,255,.97);
  box-shadow:var(--sombra-1);
}
.topbar-inner{
  height:100%;width:min(100% - 40px,var(--max));margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
}

.marca{display:inline-flex;align-items:center;gap:var(--s-3)}

.marca-logo{
  height:34px; width:auto; display:block; flex-shrink:0;
}

/* O nome do produto acompanha o logo institucional, separado por
   um filete: o logo é da CFC Academy, o Radar é um produto dela. */
.marca-sub{
  font-family:var(--body);
  font-size:var(--t-micro);
  font-weight:600;
  line-height:1.25;
  color:var(--cinza);
  letter-spacing:.02em;
  padding-left:var(--s-3);
  border-left:1px solid var(--linha-neutra);
}

@media (max-width:560px){
  .marca-logo{ height:28px }
  .marca-sub{ display:none }   /* no celular só o logo cabe */
}

.nav{display:flex;align-items:center;gap:var(--s-5)}
.nav a{
  font-size:var(--t-sm);font-weight:600;color:var(--branco);
  padding:6px 0;position:relative;transition:color var(--dur-1);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--lima);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-2) var(--ease);
}
.nav a:hover{color:var(--branco)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--lima);font-weight:600}

/* pulso de captura ao vivo */
.pulso{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--t-micro);font-weight:600;color:var(--cinza);
  letter-spacing:.04em;padding:6px 13px;
  border:1px solid var(--linha);border-radius:var(--r-pill);
  background:var(--lima-wash-2);
}
.pulso i{
  width:7px;height:7px;border-radius:50%;background:var(--lima);animation:blink 1.5s infinite;
}
.pulso b{color:var(--lima);font-variant-numeric:tabular-nums}

.menu-btn{display:none;width:40px;height:40px;place-items:center;border-radius:var(--r-sm);border:1px solid var(--linha)}
.menu-btn svg{width:20px;height:20px;stroke:var(--branco)}
/* --branco agora É o azul-marinho do texto; o nome do token
   ficou herdado do tema escuro, mas o papel é o certo. */

/* ============================================================
   FAIXA DE DEMONSTRAÇÃO
   Enquanto os editais forem exemplos, isto precisa estar visível.
   Alguém pode planejar meses de estudo com base numa data — dado
   inventado com aparência de oficial engana de verdade.
   Remover quando o conteúdo for 100% real e revisado.
   ============================================================ */
.faixa-demo{
  position:fixed;top:var(--topbar-h);left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:center;gap:10px;
  flex-wrap:wrap;text-align:center;
  padding:10px 20px;
  background:var(--warn);color:#1a1400;
  font-size:var(--t-xs);font-weight:600;
  border-bottom:1px solid rgba(0,0,0,.2);
}
.faixa-demo b{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.06em}

/* Empurra o conteúdo para a faixa não cobrir nada. */
body.tem-demo .hero{padding-top:calc(var(--topbar-h) + var(--faixa-demo-h,42px) + var(--s-8))}
/* O hero compacto tem padding próprio e mais específico; sem repetir a
   regra aqui, a faixa de demonstração cobria o título no celular. */
body.tem-demo .hero-compacto{
  padding-top:calc(var(--topbar-h) + var(--faixa-demo-h,42px) + var(--s-6));
}
/* Âncoras (#explorar, #amostra…) precisam descontar topbar + faixa. */
body.tem-demo :where([id]){
  scroll-margin-top:calc(var(--topbar-h) + var(--faixa-demo-h,42px) + 12px);
}
body.tem-demo #painel{scroll-margin-top:calc(var(--topbar-h) + var(--faixa-demo-h,42px) + var(--busca-h,146px))}
body.tem-demo .boas-vindas{padding-top:calc(var(--topbar-h) + var(--faixa-demo-h,42px) + var(--s-6))}

/* ============================================================
   HERO — radar
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  padding:calc(var(--topbar-h) + var(--s-9)) 0 var(--s-9);
  background:radial-gradient(900px 520px at 78% -8%,var(--lima-wash-2),transparent 62%),var(--preto);
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:var(--mesh);background-size:var(--mesh-size);
  mask-image:radial-gradient(720px 520px at 70% 18%,#000,transparent 76%);
  -webkit-mask-image:radial-gradient(720px 520px at 70% 18%,#000,transparent 76%);
  opacity:.55;pointer-events:none;
}
.hero .container{position:relative;z-index:1}
.hero h1{font-size:var(--t-hero);margin:var(--s-5) 0}
.hero h1 .g{color:var(--lima)}
.hero .lead{font-size:1.14rem;color:var(--cinza);max-width:540px;margin-bottom:var(--s-6)}
.hero .lead b{color:var(--branco);font-weight:600}
.hero .acoes{display:flex;gap:var(--s-3);flex-wrap:wrap}
.hero .micro{
  margin-top:var(--s-5);font-size:var(--t-sm);color:var(--cinza-esc);
  display:flex;align-items:center;gap:8px;
}
.hero .micro::before{content:"✓";color:var(--lima);font-weight:800}

/* ---------- painel de varredura (mock do robô) ---------- */
.scanner{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--carvao),var(--carvao-2));
  border:1px solid var(--linha);border-radius:22px;
  padding:var(--s-5);box-shadow:var(--sombra-3);
}
.scanner::before{
  content:"";position:absolute;top:-40%;right:-20%;
  width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,var(--lima-wash),transparent 68%);
  opacity:.5;pointer-events:none;
}
/* linha de varredura que atravessa o painel */
.scanner::after{
  content:"";position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--lima),transparent);
  animation:varrer 3.8s var(--ease) infinite;pointer-events:none;
}
@keyframes varrer{
  0%{top:0;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{top:100%;opacity:0}
}
.scanner-top{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  padding-bottom:var(--s-4);margin-bottom:var(--s-4);
  border-bottom:1px solid var(--linha);
}
.scanner-top .rot{
  font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.14em;
  color:var(--cinza);font-weight:700;
}
.scanner-feed{position:relative;display:grid;gap:2px}
.feed-item{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s-3);
  padding:11px 0;border-top:1px solid rgba(255,255,255,.05);
  font-size:var(--t-sm);
  animation:entra .5s var(--ease) both;
}
.feed-item:first-child{border-top:0}
@keyframes entra{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.feed-item .dot{width:7px;height:7px;border-radius:50%;background:var(--lima)}
.feed-item .org{color:var(--branco);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed-item .org span{display:block;font-size:var(--t-micro);color:var(--cinza-esc);font-weight:400}
.feed-item .hora{font-family:var(--mono);font-size:var(--t-micro);color:var(--cinza-esc)}

.scanner-rodape{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:var(--s-4);padding-top:var(--s-4);
  border-top:1px solid var(--linha);
  font-size:var(--t-micro);color:var(--cinza-esc);
}
.scanner-rodape b{color:var(--lima);font-variant-numeric:tabular-nums}

/* ============================================================
   FAIXA DE NÚMEROS
   ============================================================ */
.strip{border-block:1px solid var(--linha);background:var(--preto-2)}
.strip .container{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5);
  padding:var(--s-6) 0;text-align:center;
}
.strip .n{
  font-family:var(--display);font-weight:900;font-size:1.9rem;
  color:var(--lima);line-height:1;font-variant-numeric:tabular-nums;
}
.strip .l{font-size:var(--t-xs);color:var(--cinza);margin-top:6px}

/* ============================================================
   SEÇÕES
   ============================================================ */
.blk{padding:var(--s-9) 0;position:relative}
.blk-head{max-width:var(--max-txt);margin-bottom:var(--s-7)}
.blk-head h2{margin:var(--s-3) 0 var(--s-4)}
.blk-head p{color:var(--cinza);font-size:1.05rem}

/* ============================================================
   BARRA DE BUSCA + FILTROS
   ============================================================ */
/* Âncoras precisam descontar a topbar fixa. #painel tem regra própria
   (mais abaixo) porque a barra de busca sticky também o cobre. */
:where([id]){scroll-margin-top:calc(var(--topbar-h) + 12px)}

.busca-wrap{
  /* NÃO é mais fixa (decisão do Patrick, ago/2026): o mapa já
     acompanha a rolagem e carrega os filtros por estado. Duas
     barras grudadas comiam 146px de altura útil o tempo todo.

     A cor também era resquício do tema escuro — rgba(10,15,10,.9)
     fixo, que deixava uma faixa preta atravessando a página clara.
     Mesmo defeito que a barra do topo tinha. */
  position:relative;
  background:var(--preto-2);
  border-bottom:1px solid var(--linha);
  padding:var(--s-4) 0;
}
.busca-linha{display:grid;grid-template-columns:1fr auto auto;gap:var(--s-3);align-items:center}
.busca-campo{position:relative}
.busca-campo svg{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;stroke:var(--cinza-esc);pointer-events:none;
}
.busca-campo .campo{padding-left:44px}

.filtros{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--s-3);margin-top:var(--s-3);
}
.filtros.oculto{display:none}
.filtro-grupo label{
  display:block;font-size:var(--t-micro);text-transform:uppercase;
  letter-spacing:.12em;color:var(--cinza-esc);font-weight:700;margin-bottom:6px;
}
.chips-ativos{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
.chips-ativos:empty{display:none}

/* abas de status */
.abas{display:flex;gap:var(--s-1);overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.abas::-webkit-scrollbar{display:none}
.aba{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:var(--display);font-weight:700;font-size:var(--t-xs);
  text-transform:uppercase;letter-spacing:.06em;
  padding:10px 16px;border-radius:var(--r-pill);
  color:var(--cinza);border:1px solid transparent;
  transition:color var(--dur-1),background var(--dur-1),border-color var(--dur-1);
}
.aba:hover{color:var(--branco);background:rgba(243,247,240,.04)}
.aba[aria-selected="true"]{
  color:var(--lima);background:var(--lima-wash);border-color:rgba(159,227,26,.28);
}
.aba .cont{
  font-size:var(--t-micro);padding:2px 7px;border-radius:var(--r-pill);
  background:rgba(243,247,240,.08);font-variant-numeric:tabular-nums;
}
.aba[aria-selected="true"] .cont{background:rgba(159,227,26,.22)}

/* ============================================================
   CARD DE EDITAL — o componente central do produto
   ============================================================ */
/* No fluxo normal a seção já nasce abaixo da barra — o que falta é só respiro.
   O espaço extra sob a barra sticky é resolvido no #painel via scroll-margin
   (abaixo), que só age quando se chega aqui por âncora. */
.blk-resultados{padding-top:var(--s-6)}

/* Ao pular para #painel, descontar topbar + barra de busca (altura medida em
   --busca-h pelo JS, porque ela cresce quando os filtros abrem). */
#painel{scroll-margin-top:calc(var(--topbar-h) + var(--busca-h,146px))}

.lista{display:grid;gap:var(--s-4)}

.edital{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr auto;gap:var(--s-5);
  padding:var(--s-5);
  background:linear-gradient(165deg,var(--carvao),var(--carvao-2));
  border:1px solid var(--linha);border-radius:var(--r-lg);
  transition:border-color var(--dur-2),transform var(--dur-2) var(--ease),box-shadow var(--dur-2);
}
/* trilho de status na borda esquerda — leitura periférica rápida */
.edital::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--cinza-esc);transition:box-shadow var(--dur-2);
}
.edital[data-status="aberto"]::before{background:var(--ok)}
.edital[data-status="encerrando"]::before{background:var(--warn);box-shadow:0 0 16px rgba(227,179,65,.5)}
.edital[data-status="previsto"]::before{background:var(--info)}
.edital[data-status="encerrado"]::before{background:var(--crit)}
.edital:hover{
  border-color:rgba(159,227,26,.34);
  transform:translateY(-3px);
  box-shadow:var(--sombra-2),0 0 0 1px var(--linha-fraca);
}

.edital-main{min-width:0}
.edital-topo{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-3)}
.edital h3{
  font-size:1.22rem;margin-bottom:6px;
  display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap;
}
.edital h3 a{transition:color var(--dur-1)}
.edital:hover h3 a{color:var(--lima)}
.edital .orgao{color:var(--cinza);font-size:var(--t-sm);margin-bottom:var(--s-4)}

.edital-meta{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);
  font-size:var(--t-xs);color:var(--cinza);
}
.edital-meta .item{display:inline-flex;align-items:center;gap:7px}
.edital-meta .item svg{width:14px;height:14px;stroke:var(--cinza-esc);flex-shrink:0}
.edital-meta .item b{color:var(--branco);font-weight:600}

/* coluna direita — salário e prazo, os dois dados que decidem clique */
.edital-lado{
  display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;
  gap:var(--s-4);text-align:right;flex-shrink:0;
}
.salario{font-family:var(--display);font-weight:900;font-size:1.5rem;color:var(--lima);line-height:1;font-variant-numeric:tabular-nums}
.salario small{display:block;font-family:var(--body);font-weight:500;font-size:var(--t-micro);color:var(--cinza-esc);letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px}
/* Salário ainda não extraído: não fingir número que não temos. */
.salario .pendente{font-family:var(--body);font-weight:500;font-size:.86rem;color:var(--cinza-esc);letter-spacing:0}
.prazo{font-size:var(--t-xs);color:var(--cinza)}
.prazo b{display:block;font-family:var(--display);font-weight:800;font-size:1rem;color:var(--branco);font-variant-numeric:tabular-nums}
.prazo.urgente b{color:var(--warn)}

.edital-acoes{display:flex;gap:var(--s-2);align-items:center}
.icone-btn{
  width:38px;height:38px;display:grid;place-items:center;
  border-radius:var(--r-sm);border:1px solid var(--linha);
  transition:border-color var(--dur-1),background var(--dur-1),color var(--dur-1);
  color:var(--cinza);
}
.icone-btn svg{width:17px;height:17px;stroke:currentColor;fill:none}
.icone-btn:hover{border-color:var(--lima);color:var(--lima);background:var(--lima-wash-2)}
.icone-btn[aria-pressed="true"]{color:var(--lima);border-color:var(--lima);background:var(--lima-wash)}
.icone-btn[aria-pressed="true"] svg{fill:var(--lima)}

/* ============================================================
   PAYWALL — editais bloqueados na landing
   O visitante vê que existe mais coisa, mas não lê o conteúdo.
   ============================================================ */
.trancado{position:relative}
.trancado .edital{
  filter:blur(5px);
  opacity:.5;
  pointer-events:none;
  user-select:none;
}
/* degradê que funde os cards borrados no fundo da página */
.trancado::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent,var(--preto) 88%);
  pointer-events:none;
}

.paywall{
  position:absolute;left:50%;bottom:var(--s-7);transform:translateX(-50%);
  z-index:2;width:min(100% - 32px,520px);text-align:center;
  padding:var(--s-6) var(--s-5);
  background:linear-gradient(150deg,var(--lima-wash),var(--carvao) 60%);
  border:1px solid rgba(159,227,26,.34);border-radius:var(--r-lg);
  box-shadow:var(--sombra-3);
}
.paywall .cadeado{
  width:52px;height:52px;margin:0 auto var(--s-4);
  display:grid;place-items:center;border-radius:50%;
  background:var(--lima);color:var(--tinta-sobre-acento);
}
.paywall .cadeado svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2.2}
.paywall h3{font-size:1.35rem;margin-bottom:var(--s-3)}
.paywall p{color:var(--cinza);font-size:var(--t-sm);margin-bottom:var(--s-5)}
.paywall .btn{width:100%}
.paywall .micro{
  margin-top:var(--s-3);font-size:var(--t-micro);color:var(--cinza-esc);
}

/* O paywall abaixo do exemplo único precisa de FLUXO normal, não
   posicionamento absoluto (`.paywall` original vive dentro de
   `.trancado`, que tem altura fixa dos cards borrados por trás — aqui
   não há isso, a tabela raspada tem a altura do seu próprio conteúdo). */
.paywall-cheio{
  position:static;transform:none;margin:var(--s-6) auto 0;
}

/* ============================================================
   POP-UP DE CADASTRO — primeira tentativa de filtrar sem conta
   (01/09/2026). Chamada mais forte que só rolar até o card: a
   pessoa clicou esperando um resultado e recebeu um modal, não
   silêncio. z-index acima da topbar (90) e da faixa de aviso (80).
   ============================================================ */
.modal-cadastro-fundo{
  position:fixed;inset:0;z-index:200;
  background:rgba(10,16,10,.62);
  display:grid;place-items:center;padding:var(--s-4);
  animation:modalFundo .18s ease-out;
}
@keyframes modalFundo{from{opacity:0}to{opacity:1}}

.modal-cadastro{
  width:min(100%,440px);text-align:center;
  padding:var(--s-6) var(--s-5);
  background:linear-gradient(150deg,var(--lima-wash),var(--carvao) 55%);
  border:1px solid rgba(159,227,26,.34);border-radius:var(--r-lg);
  box-shadow:var(--sombra-3);
  animation:modalEntra .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes modalEntra{
  from{opacity:0;transform:translateY(10px) scale(.97)}
  to{opacity:1;transform:none}
}
.modal-cadastro .cadeado{
  width:52px;height:52px;margin:0 auto var(--s-4);
  display:grid;place-items:center;border-radius:50%;
  background:var(--lima);color:var(--tinta-sobre-acento);
}
.modal-cadastro .cadeado svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2.2}
.modal-cadastro h3{font-size:1.35rem;margin-bottom:var(--s-3)}
.modal-cadastro p{color:var(--cinza);font-size:var(--t-sm);margin-bottom:var(--s-5)}
.modal-cadastro .btn{width:100%}
.modal-cadastro .micro{
  margin-top:var(--s-3);font-size:var(--t-micro);color:var(--cinza-esc);
}
.modal-cadastro-fechar{
  position:absolute;top:var(--s-3);right:var(--s-3);
  width:32px;height:32px;display:grid;place-items:center;
  border-radius:50%;border:1px solid var(--linha);background:var(--carvao);
  color:var(--cinza-esc);cursor:pointer;
}
.modal-cadastro-fechar:hover{color:var(--branco);border-color:var(--cinza-esc)}
.modal-cadastro-fechar svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2}
.modal-cadastro{position:relative}

/* comparativo visitante × cadastrado — colapsa em uma coluna no mobile */
.planos-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--s-4);align-items:start;
}

/* lista de vantagens do cadastro */
.vantagens{
  display:grid;gap:var(--s-2);text-align:left;
  margin:0 auto var(--s-5);max-width:300px;
}
.vantagens li{
  display:flex;align-items:flex-start;gap:9px;
  font-size:var(--t-sm);color:var(--branco);
}
.vantagens li::before{
  content:"✓";color:var(--lima);font-weight:800;flex-shrink:0;line-height:1.5;
}

/* ============================================================
   AUTENTICAÇÃO — cadastro e login
   ============================================================ */
.auth{
  min-height:100vh;display:grid;grid-template-columns:1fr 1fr;
}
.auth-lado{
  position:relative;overflow:hidden;padding:var(--s-9) var(--s-7);
  display:flex;flex-direction:column;justify-content:center;
  background:radial-gradient(700px 500px at 30% 10%,var(--lima-wash-2),transparent 62%),var(--preto-2);
  border-right:1px solid var(--linha);
}
.auth-lado::before{
  content:"";position:absolute;inset:0;
  background-image:var(--mesh);background-size:var(--mesh-size);
  mask-image:radial-gradient(600px 500px at 40% 30%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(600px 500px at 40% 30%,#000,transparent 78%);
  opacity:.5;pointer-events:none;
}
.auth-lado > *{position:relative}
.auth-lado h2{font-size:clamp(1.8rem,3vw,2.6rem);margin:var(--s-4) 0}
.auth-lado .sub{color:var(--cinza);max-width:40ch;margin-bottom:var(--s-6)}

.auth-form{
  padding:var(--s-9) var(--s-7);
  display:flex;flex-direction:column;justify-content:center;
}
.auth-form .caixa{width:min(100%,420px);margin-inline:auto}
.auth-form h1{font-size:1.9rem;margin-bottom:var(--s-2)}
.auth-form .apoio{color:var(--cinza);font-size:var(--t-sm);margin-bottom:var(--s-6)}

.campo-grupo{margin-bottom:var(--s-4)}
.campo-grupo label{
  display:block;font-size:var(--t-xs);font-weight:600;
  color:var(--branco);margin-bottom:7px;
}
.campo-grupo .dica{font-size:var(--t-micro);color:var(--cinza-esc);margin-top:6px}
.campo-grupo .erro{
  display:none;font-size:var(--t-micro);color:var(--crit);margin-top:6px;
}
.campo-grupo.invalido .campo{border-color:var(--crit)}
.campo-grupo.invalido .erro{display:block}

.dupla{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}

.aviso{
  display:flex;gap:11px;align-items:flex-start;
  padding:13px 15px;border-radius:var(--r-sm);
  background:var(--warn-wash);border:1px solid rgba(227,179,65,.3);
  font-size:var(--t-xs);color:var(--branco);margin-bottom:var(--s-5);
}
.aviso.erro-geral{background:var(--crit-wash);border-color:rgba(239,106,106,.35)}
.aviso b{display:block;margin-bottom:2px}

/* "(opcional)" ao lado do rótulo: precisa ser visível o bastante
   para a pessoa perceber que pode pular o campo — é o que evita
   abandono no formulário. */
.opcional{
  font-weight:400;
  color:var(--cinza-esc);
  font-size:.85em;
}

/* Nota de consentimento no formulário de e-mail. Discreta de
   propósito: precisa ser legível e honesta, sem competir com o
   botão nem parecer letra miúda escondendo alguma coisa. */
.lgpd{
  margin-top:var(--s-4);
  font-size:.78rem;
  line-height:1.5;
  color:var(--cinza-esc);
  text-align:center;
}

.troca{
  text-align:center;margin-top:var(--s-5);
  font-size:var(--t-sm);color:var(--cinza);
}
.troca a{color:var(--lima);font-weight:600}
.troca a:hover{text-decoration:underline}

.voltar{
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--t-sm);color:var(--cinza);margin-bottom:var(--s-6);
  transition:color var(--dur-1);
}
.voltar:hover{color:var(--lima)}
.voltar svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

/* ============================================================
   MENU DE CONTA (topbar da plataforma)
   ============================================================ */
.conta{position:relative}
.conta-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:6px 12px 6px 6px;border-radius:var(--r-pill);
  border:1px solid var(--linha);transition:border-color var(--dur-1);
}
.conta-btn:hover{border-color:var(--lima)}
.avatar{
  width:29px;height:29px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  background:var(--lima);color:var(--tinta-sobre-acento);
  font-family:var(--display);font-weight:900;font-size:var(--t-xs);
}
.conta-btn .nome{font-size:var(--t-xs);font-weight:600;color:var(--branco)}

.conta-menu{
  position:absolute;right:0;top:calc(100% + 10px);min-width:210px;
  background:var(--carvao);border:1px solid var(--linha);
  border-radius:var(--r);box-shadow:var(--sombra-3);
  padding:var(--s-2);z-index:100;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--dur-1),transform var(--dur-1),visibility var(--dur-1);
}
.conta-menu.aberto{opacity:1;visibility:visible;transform:none}
.conta-menu .cabeca{
  padding:10px 12px;border-bottom:1px solid var(--linha);margin-bottom:var(--s-2);
}
.conta-menu .cabeca b{display:block;font-size:var(--t-sm)}
.conta-menu .cabeca span{font-size:var(--t-micro);color:var(--cinza-esc)}
.conta-menu button,.conta-menu a{
  display:flex;width:100%;align-items:center;gap:10px;
  padding:10px 12px;border-radius:var(--r-sm);
  font-size:var(--t-sm);color:var(--cinza);text-align:left;
  transition:background var(--dur-1),color var(--dur-1);
}
.conta-menu button:hover,.conta-menu a:hover{background:var(--carvao-2);color:var(--branco)}
.conta-menu .sair-item:hover{color:var(--crit)}

@media (max-width:860px){
  .auth{grid-template-columns:1fr}
  .auth-lado{display:none}
  .auth-form{padding:var(--s-7) var(--s-5);min-height:100vh}
}
@media (max-width:760px){
  .conta-btn .nome{display:none}
  .paywall{bottom:var(--s-5);padding:var(--s-5) var(--s-4)}
  .dupla{grid-template-columns:1fr}
}

/* ============================================================
   PÁGINA DE DETALHE DO EDITAL
   O candidato encontra tudo aqui, sem sair da plataforma.
   ============================================================ */
.detalhe-grid{
  display:grid;grid-template-columns:1.6fr 1fr;
  gap:var(--s-5);align-items:start;
}

.ficha-linha{
  display:grid;grid-template-columns:minmax(120px,150px) 1fr;
  gap:var(--s-4);padding:12px 0;
  border-top:1px solid var(--linha-fraca);
  font-size:var(--t-sm);
}
.ficha-linha:first-of-type{border-top:0}
.ficha-rot{color:var(--cinza-esc);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.ficha-val{color:var(--branco);font-weight:500}
.ficha-val b{color:var(--branco);font-family:var(--display);font-weight:800}

.destaque-salario{
  padding:var(--s-6) var(--s-5);text-align:center;
  background:linear-gradient(160deg,var(--carvao),var(--carvao-2));
  border-color:rgba(159,227,26,.28);
}
.destaque-salario .rot{
  display:block;font-size:var(--t-micro);text-transform:uppercase;
  letter-spacing:.14em;color:var(--cinza-esc);font-weight:700;margin-bottom:var(--s-2);
}
.destaque-salario .valor{
  font-family:var(--display);font-weight:900;
  font-size:clamp(1.9rem,3.4vw,2.5rem);color:var(--lima);
  line-height:1;font-variant-numeric:tabular-nums;
}
.destaque-salario .obs{
  font-size:var(--t-micro);color:var(--cinza-esc);
  margin-top:var(--s-3);line-height:1.5;
}

.micro-fonte{
  margin-top:var(--s-3);text-align:center;
  font-family:var(--mono);font-size:var(--t-micro);color:var(--cinza-esc);
}

.aviso-legal{
  margin-top:var(--s-7);padding:var(--s-4) var(--s-5);
  border-left:2px solid var(--linha);
  font-size:var(--t-xs);color:var(--cinza-esc);line-height:1.6;
}

@media (max-width:860px){
  .detalhe-grid{grid-template-columns:1fr}
}
@media (max-width:460px){
  .ficha-linha{grid-template-columns:1fr;gap:3px}
}

/* ============================================================
   ESTADO VAZIO
   ============================================================ */
.vazio{
  text-align:center;padding:var(--s-9) var(--s-5);
  border:1px dashed var(--linha);border-radius:var(--r-lg);
  background:var(--lima-wash-2);
}
.vazio .ico{
  width:56px;height:56px;margin:0 auto var(--s-4);
  display:grid;place-items:center;border-radius:50%;
  background:var(--lima-wash);color:var(--lima);
}
.vazio .ico svg{width:26px;height:26px;stroke:currentColor;fill:none}
.vazio h3{margin-bottom:var(--s-2)}
.vazio p{color:var(--cinza);font-size:var(--t-sm);max-width:420px;margin:0 auto var(--s-5)}

/* ============================================================
   CTA — ponte para o curso (ângulo comercial da CFC)
   ============================================================ */
.cta{
  position:relative;overflow:hidden;
  padding:var(--s-8) var(--s-6);border-radius:var(--r-lg);
  background:linear-gradient(150deg,rgba(159,227,26,.15),var(--carvao) 55%);
  border:1px solid rgba(159,227,26,.3);text-align:center;
}
.cta::before{
  content:"";position:absolute;inset:0;
  background-image:var(--mesh);background-size:var(--mesh-size);
  opacity:.4;pointer-events:none;
}
.cta > *{position:relative}
.cta h2{margin:var(--s-3) auto var(--s-4);max-width:16ch}
.cta p{color:var(--cinza);max-width:52ch;margin:0 auto var(--s-6)}

/* ============================================================
   RODAPÉ
   ============================================================ */
.rodape{border-top:1px solid var(--linha);background:var(--preto-2);padding:var(--s-8) 0 var(--s-6)}
.rodape-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s-7);margin-bottom:var(--s-7)}
.rodape h4{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--cinza-esc);margin-bottom:var(--s-4)}
.rodape ul{display:grid;gap:var(--s-3)}
.rodape ul a{font-size:var(--t-sm);color:var(--cinza);transition:color var(--dur-1)}
.rodape ul a:hover{color:var(--lima)}
.rodape .sobre{font-size:var(--t-sm);color:var(--cinza);max-width:38ch;margin-top:var(--s-4)}
.rodape-base{
  border-top:1px solid var(--linha);padding-top:var(--s-5);
  display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;
  font-size:var(--t-micro);color:var(--cinza-esc);
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:960px){
  .hero .lead{max-width:none}
  .rodape-grid{grid-template-columns:1fr 1fr;gap:var(--s-6)}
  .strip .container{grid-template-columns:repeat(2,1fr);gap:var(--s-6)}
}

@media (max-width:760px){
  .nav{
    position:fixed;inset:var(--topbar-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--preto-2);border-bottom:1px solid var(--linha);
    padding:var(--s-3) 20px var(--s-5);
    transform:translateY(-120%);transition:transform var(--dur-2) var(--ease);
  }
  .nav.aberto{transform:none}
  .nav a{padding:13px 0;border-bottom:1px solid var(--linha-fraca)}
  .nav a::after{display:none}
  .menu-btn{display:grid}
  .pulso{display:none}

  /* O menu tem UM item desde que a landing foi enxugada. Sanfona
     para esconder um link só é ritual sem função: dois toques para
     chegar onde um bastava. O link fica visível na própria barra e
     o botão de menu some. */
  .nav{
    position:static;
    transform:none;
    display:flex;
    background:transparent;
    border:0;
    padding:0;
    flex-direction:row;
  }
  .nav a{
    padding:6px 0;
    border:0;
    font-size:var(--t-xs);
    white-space:nowrap;
  }
  .menu-btn{display:none}

  /* A barra fica mais baixa: 56px comem 7% de uma tela de 844px, e
     ela acompanha a rolagem o tempo todo. */
  .topbar{ height:52px }
  .topbar-inner{ width:min(100% - 24px, var(--max)); gap:var(--s-3) }

  /* "VER TODOS OS EDITAIS" quebrava em duas linhas e engolia meia
     barra. No celular o texto encurta — o destino é o mesmo, e o
     espaço economizado sobra para o logo respirar. */
  .topbar .btn-lima{
    font-size:var(--t-micro);
    padding:8px 12px;
    white-space:nowrap;
  }
  .topbar .btn-lima .longo{ display:none }
  /* O token controla o espaço reservado no topo das seções; sem
     atualizá-lo, sobraria uma faixa vazia de 4px sob a barra. */
  :root{ --topbar-h:52px }

  .busca-linha{grid-template-columns:1fr}
  .edital{grid-template-columns:1fr;gap:var(--s-4)}
  .edital-lado{
    flex-direction:row;align-items:center;text-align:left;
    padding-top:var(--s-4);border-top:1px solid var(--linha-fraca);
  }
  .salario{font-size:1.3rem}
  .salario small{margin-bottom:2px}
  .prazo b{font-size:.92rem}
  .blk{padding:var(--s-8) 0}
  .hero{padding-top:calc(var(--topbar-h) + var(--s-7))}
}

@media (max-width:460px){
  .strip .container{grid-template-columns:1fr;gap:var(--s-5)}
  .rodape-grid{grid-template-columns:1fr}
  .edital-lado{flex-direction:column;align-items:flex-start;gap:var(--s-3)}
}

/* ============================================================
   IMPRESSÃO — um edital salvo em PDF ainda precisa ser legível
   ============================================================ */
@media print{
  .topbar,.busca-wrap,.edital-acoes,.cta,.scanner{display:none !important}
  body{background:#fff;color:#000}
  .edital{border:1px solid #ccc;background:none;break-inside:avoid}
  .salario{color:#000}
}

/* ============================================================
   MAPA INTERATIVO DO BRASIL
   SVG estático: sem biblioteca externa, sem token, funciona offline.
   Clicar num estado filtra a tabela abaixo.
   ============================================================ */
/* 50/50 (pedido do Patrick, ago/2026): o mapa é o filtro principal
   da página, e a 30% ele ficava pequeno demais para clicar num
   estado do Sudeste sem errar o vizinho. */
.mapa-bloco{
  display:grid;
  /* `minmax(0,1fr)` e não `1fr`: coluna de grid tem largura mínima
     automática, então a tabela de editais — que é larga — empurrava
     a coluna do mapa para 286px mesmo com 1fr declarado. Medido no
     navegador: 286px / 922px em vez do 50/50 pedido. */
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s-6);align-items:start;
}

/* O mapa acompanha a rolagem da lista: sem isto, quem desce para
   ver o 20º edital perde de vista o filtro que o trouxe até ali. */
.mapa-coluna{
  position:sticky;
  top:calc(var(--topbar-h, 64px) + var(--s-4));
}
.mapa-bloco.sem-mapa{grid-template-columns:1fr}
.mapa-bloco.sem-mapa .mapa-coluna{display:none}

/* overflow visible deixava o glow do hover aparecer, mas fazia o SVG
   transbordar a coluna no mobile. O drop-shadow funciona sem ele. */
#mapa-svg{max-width:100%;overflow:hidden}
#mapa-svg svg{width:100%;height:auto;display:block}

/* Estados: a cor comunica densidade de editais. Faixas fixas em vez de
   gradiente contínuo — com poucos editais por estado, uma escala
   contínua faria 1 e 2 parecerem a mesma cor. */
#mapa-svg path,#mapa-svg polygon{
  fill:#EAEFE6;
  stroke:var(--traco);
  stroke-width:.8;
  transition:fill var(--dur-1),filter var(--dur-1);
}
/* Escala de verdes OPACOS, não o acento com transparência.
   Sobre fundo escuro, 22% de opacidade já se via; sobre claro o
   estado com 1 edital ficava idêntico ao estado sem nenhum.
   Cada degrau abaixo é visivelmente distinto do anterior. */
#mapa-svg [data-faixa="0"]{fill:#EAEFE6}
#mapa-svg [data-faixa="1"]{fill:#C2DE8E}
#mapa-svg [data-faixa="2"]{fill:#93C43F}
#mapa-svg [data-faixa="3"]{fill:#5F9410}
#mapa-svg [data-faixa="4"]{fill:#3D5E05}

#mapa-svg [data-uf]:not(.vazio){cursor:pointer}
#mapa-svg [data-uf]:not(.vazio):hover{
  fill:var(--lima-claro);
}
#mapa-svg [data-uf].ativo{
  fill:var(--lima);
  stroke:var(--branco);stroke-width:1.6;
}
#mapa-svg [data-uf]:focus-visible{outline:2px solid var(--lima);outline-offset:2px}

.mapa-legenda{
  display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  margin-top:var(--s-4);font-size:var(--t-micro);color:var(--cinza-esc);
}
.mapa-legenda .escala{display:flex;align-items:center;gap:4px}
.mapa-legenda i{
  width:16px;height:10px;border-radius:2px;display:block;
  border:1px solid var(--linha);
}
/* Exatamente as mesmas cores das faixas do mapa. Se divergirem, a
   legenda passa a mentir sobre o que o mapa mostra. */
.mapa-legenda i.f0{background:#EAEFE6}
.mapa-legenda i.f1{background:#C2DE8E}
.mapa-legenda i.f2{background:#93C43F}
.mapa-legenda i.f3{background:#5F9410}
.mapa-legenda i.f4{background:#3D5E05}

.mapa-cabeca{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-4);
}
.mapa-cabeca h3{font-size:1.15rem}
.mapa-vazio{
  padding:var(--s-6);text-align:center;color:var(--cinza);
  border:1px dashed var(--linha);border-radius:var(--r);
  font-size:var(--t-sm);
}

/* ============================================================
   TABELA DE EDITAIS
   ============================================================ */
.tabela-wrap{
  overflow-x:auto;
  /* Sem min-width:0 o wrapper herda a largura mínima da tabela
     (min-width:640px) e estoura o grid em vez de rolar dentro de si. */
  min-width:0;max-width:100%;
  border:1px solid var(--linha);border-radius:var(--r);
  background:var(--carvao);
}
.tabela-editais{
  width:100%;border-collapse:collapse;
  font-size:var(--t-sm);min-width:640px;
}
.tabela-editais th{
  text-align:left;padding:12px 14px;
  font-family:var(--display);font-size:var(--t-micro);
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--cinza-esc);background:var(--preto-2);
  border-bottom:1px solid var(--linha);white-space:nowrap;
}
.tabela-editais td{
  padding:13px 14px;border-bottom:1px solid var(--linha-fraca);
  vertical-align:top;
}
.tabela-editais tr:last-child td{border-bottom:0}
.tabela-editais tbody tr{transition:background var(--dur-1)}
.tabela-editais tbody tr:hover{background:var(--carvao-2)}

.tabela-editais .num{text-align:right;font-variant-numeric:tabular-nums}
.tabela-editais .cargo{
  display:block;font-weight:600;color:var(--branco);
  transition:color var(--dur-1);
}
.tabela-editais tr:hover .cargo{color:var(--lima)}
.tabela-editais .orgao{
  display:block;font-size:var(--t-xs);color:var(--cinza-esc);margin-top:2px;
}
.tabela-editais .esfera{
  display:block;font-size:var(--t-micro);color:var(--cinza-esc);
  text-transform:capitalize;margin-top:2px;
}
.tabela-editais .salario{color:var(--lima);font-weight:600}
.tabela-editais .urgente{color:var(--warn)}
.tabela-editais .restam{
  display:block;font-size:var(--t-micro);color:var(--cinza-esc);margin-top:2px;
}

@media (max-width:920px){
  .mapa-bloco{grid-template-columns:1fr}

  /* DESLIGA o sticky. Em coluna única o mapa grudaria no topo e
     comeria metade da tela enquanto a lista rola por baixo — o
     contrário do que o sticky resolve no desktop, onde mapa e
     lista estão lado a lado. */
  .mapa-coluna{position:static}
  /* min-width:0 é obrigatório: item de grid tem min-width auto por
     padrão e não encolhe abaixo do conteúdo, o que empurrava a coluna
     para fora da tela em viewport menor que o max-width. */
  .mapa-coluna{max-width:min(420px,100%);margin-inline:auto;min-width:0}
  .mapa-bloco > *{min-width:0}
}

/* ============================================================
   HERO COMPACTO + BLOCO DE EXPLORAÇÃO
   O hero antigo (título gigante + painel de capturas) empurrava o
   conteúdo útil para baixo da dobra no celular. Agora ele apresenta
   a marca em duas linhas e cede o topo ao mapa e aos filtros.
   ============================================================ */
.hero-compacto{
  padding:calc(var(--topbar-h) + var(--s-7)) 0 var(--s-6);
}
.hero-compacto h1{
  font-size:clamp(1.9rem,4.6vw,3.2rem);
  margin:var(--s-3) 0 var(--s-4);max-width:20ch;
}
.hero-compacto .lead{font-size:1.02rem;max-width:60ch;margin:0}

.blk-topo{padding-top:var(--s-7)}

/* ---------- chips de estado ---------- */
.filtros-rapidos{margin-bottom:var(--s-4)}
.chips-ufs{
  display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-2);
}
.filtros-rapidos{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:flex-start}

.chip-uf{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--display);font-weight:700;font-size:var(--t-xs);
  letter-spacing:.04em;
  padding:9px 14px;border-radius:var(--r-pill);
  color:var(--cinza);background:var(--carvao);
  border:1px solid var(--linha);white-space:nowrap;
  transition:color var(--dur-1),background var(--dur-1),border-color var(--dur-1);
  /* Alvo de toque confortável no celular. */
  min-height:38px;
}
.chip-uf:hover{color:var(--branco);border-color:var(--linha-neutra)}
.chip-uf.ativo{
  color:var(--tinta-sobre-acento);background:var(--lima);border-color:var(--lima);
}
.chip-uf .cont{
  font-size:var(--t-micro);font-variant-numeric:tabular-nums;
  padding:1px 6px;border-radius:var(--r-pill);
  background:rgba(243,247,240,.1);
}
.chip-uf.ativo .cont{background:rgba(10,15,10,.22)}

/* ---------- linha de filtros ---------- */
.filtros-linha{
  display:grid;grid-template-columns:1fr auto auto;
  gap:var(--s-3);margin-bottom:var(--s-6);
}

/* ============================================================
   MOBILE — otimizações pedidas
   ============================================================ */
@media (max-width:760px){
  .hero-compacto{padding:calc(var(--topbar-h) + var(--s-5)) 0 var(--s-4)}
  body.tem-demo .hero-compacto{
    padding-top:calc(var(--topbar-h) + var(--faixa-demo-h,42px) + var(--s-5));
  }
  .hero-compacto h1{font-size:1.75rem;margin:var(--s-2) 0 var(--s-3)}
  .hero-compacto .lead{font-size:.95rem}

  .blk-topo{padding-top:var(--s-5)}
  .blk-topo .blk-head{margin-bottom:var(--s-4)}
  .blk-topo .blk-head h2{font-size:1.45rem}
  .blk-topo .blk-head p{font-size:var(--t-sm)}

  /* Chips em faixa rolável: 27 estados quebrariam em 6 linhas e
     empurrariam o mapa para fora da tela. */
  .filtros-rapidos{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-inline:-20px;padding-inline:20px;
    scroll-snap-type:x proximity;
  }
  .filtros-rapidos::-webkit-scrollbar{display:none}
  .chips-ufs{flex-wrap:nowrap;margin-top:0}
  .chip-uf{scroll-snap-align:start}

  .filtros-linha{grid-template-columns:1fr;gap:var(--s-2)}

  /* Tabela vira lista de cartões: tabela de 6 colunas em 390px
     obriga rolagem horizontal, que some com as colunas da direita
     (salário e prazo) — justamente as que decidem o clique. */
  .tabela-editais{min-width:0}
  .tabela-editais thead{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);
  }
  .tabela-editais,
  .tabela-editais tbody,
  .tabela-editais tr,
  .tabela-editais td{display:block;width:100%}
  .tabela-editais tr{
    padding:var(--s-4);border-bottom:1px solid var(--linha);
    position:relative;
  }
  .tabela-editais td{
    padding:3px 0;border:0;
    display:flex;justify-content:space-between;gap:var(--s-3);
    align-items:baseline;
  }
  .tabela-editais td:first-child{
    display:block;margin-bottom:var(--s-3);padding-right:70px;
  }
  /* Rótulo da coluna vira prefixo da linha. */
  .tabela-editais td:not(:first-child)::before{
    content:attr(data-rot);
    font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.08em;
    color:var(--cinza-esc);font-weight:700;flex-shrink:0;
  }
  .tabela-editais td:last-child{
    position:absolute;top:var(--s-4);right:var(--s-4);
    width:auto;padding:0;
  }
  .tabela-editais td:last-child::before{content:none}
  .tabela-editais .num{text-align:right}
  .tabela-wrap{overflow-x:visible}

  /* Mapa acima da lista, com altura contida para caber na dobra. */
  .mapa-bloco{gap:var(--s-5)}
  .mapa-coluna{max-width:min(340px,100%)}
  .mapa-legenda{justify-content:center;font-size:9px;gap:var(--s-2)}
}

@media (max-width:400px){
  .mapa-coluna{max-width:100%}
  .tabela-editais td:first-child{padding-right:62px}
}

/* ============================================================
   PÁGINA DO EDITAL — resumo e detalhes
   ============================================================ */
.edital-resumo{
  font-size:1.02rem;color:var(--branco);line-height:1.65;
  max-width:70ch;margin-bottom:var(--s-6);
  padding-left:var(--s-4);border-left:3px solid var(--lima);
}

.det-item{padding:var(--s-4) 0;border-top:1px solid var(--linha-fraca)}
.det-item:first-of-type{border-top:0;padding-top:0}
.det-rot{
  display:block;font-size:var(--t-micro);text-transform:uppercase;
  letter-spacing:.1em;color:var(--cinza-esc);font-weight:700;
  margin-bottom:var(--s-2);
}
.det-item p{color:var(--cinza);font-size:var(--t-sm);line-height:1.6}

.det-etapas{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.det-etapas li{
  font-size:var(--t-xs);padding:5px 11px;border-radius:var(--r-pill);
  background:var(--lima-wash);color:var(--lima);
  border:1px solid rgba(159,227,26,.26);
}

.nota-pdf{
  margin-top:var(--s-3);font-size:var(--t-micro);
  color:var(--cinza-esc);line-height:1.5;text-align:center;
}

/* Cópia local do edital: alternativa discreta, nunca concorre com o
   link oficial da banca — o oficial é o botão, este é texto. */
.link-copia{
  display:block;margin-top:var(--s-3);font-size:var(--t-micro);
  color:var(--cinza-esc);line-height:1.5;text-align:center;
  text-decoration:underline;text-underline-offset:2px;
}
.link-copia:hover{color:var(--carvao)}

@media (max-width:760px){
  .edital-resumo{font-size:.95rem;padding-left:var(--s-3);margin-bottom:var(--s-5)}
}

/* ============================================================
   ORGANIZADORA (banca)
   ============================================================ */
.link-banca{color:var(--lima);border-bottom:1px solid rgba(159,227,26,.3)}
.link-banca:hover{border-bottom-color:var(--lima)}
.banca-cel{font-size:var(--t-xs);color:var(--cinza)}

/* ============================================================
   EDITORIAL DO EDITAL
   Texto de apoio: o candidato lê aqui em vez de garimpar o PDF.
   ============================================================ */
.editorial p{
  color:var(--cinza);font-size:var(--t-sm);line-height:1.75;
  margin-bottom:var(--s-4);
}
.editorial p:last-of-type{margin-bottom:0}
.editorial b{color:var(--branco);font-weight:600}
.editorial-nota{
  margin-top:var(--s-5);padding-top:var(--s-4);
  border-top:1px solid var(--linha-fraca);
  font-size:var(--t-micro) !important;color:var(--cinza-esc) !important;
  line-height:1.5 !important;
}

/* ============================================================
   PRIMEIRA DOBRA — texto + foto
   ============================================================ */

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:var(--s-7);
  align-items:center;
}

.hero-apoio{
  color:var(--cinza);
  font-size:var(--t-sm);
  line-height:1.65;
  max-width:52ch;
  margin-top:var(--s-4);
}

.hero-foto{
  margin:0;
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sombra-2);
  /* O acento entra como moldura: amarra a foto à marca sem
     precisar tratar o fundo azul do estúdio. */
  border:3px solid var(--lima-vivo);
}

.hero-foto img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:center 18%;   /* enquadra o rosto, não o microfone */
}

.hero-foto figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:var(--s-5) var(--s-4) var(--s-3);
  display:flex; flex-direction:column; gap:2px;
  /* Gradiente em vez de barra sólida: a foto continua respirando
     e o texto ganha contraste onde precisa. */
  background:linear-gradient(to top, rgba(20,30,42,.92), rgba(20,30,42,0));
  color:#fff;
}
.hero-foto figcaption strong{ font-size:var(--t-body); font-weight:700 }
.hero-foto figcaption span{
  font-size:var(--t-xs); opacity:.85;
  letter-spacing:.06em; text-transform:uppercase;
}

@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; gap:0 }

  /* CELULAR: foto em formato story, com o texto SOBRE ela.
     ------------------------------------------------------------
     Três tentativas até chegar aqui, e vale registrar por quê:

     · retrato de 330x438 tomava a tela inteira e o título ficava
       fora da primeira vista;
     · 16:9 espremia uma foto vertical (1365x2048) numa faixa
       larga, e a legenda cobria o queixo do Felipe.

     A foto é vertical — brigar com isso corta o rosto. Em 9:16 ela
     cabe inteira, e o texto ocupa o terço inferior, onde só há
     mesa e microfone. O rosto fica livre no terço superior. */
  .hero{ padding:0 }
  /* O container tem padding lateral global e max-width; sem zerar
     os dois aqui, a foto ficava com 330px numa tela de 390 e
     sobrava uma borda branca de cada lado. */
  .hero .container{
    padding-inline:0;
    max-width:100%;
    width:100%;
  }

  .hero-grid{ position:relative }

  .hero-foto{
    order:-1;
    max-width:100%;
    margin:0;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  .hero-foto img{
    aspect-ratio:9/16;
    max-height:78vh;          /* deixa o próximo bloco espiar */
    object-position:50% 18%;  /* rosto no terço superior */
  }

  /* A assinatura sai: o nome dele aparece no texto sobreposto. */
  .hero-foto figcaption{ display:none }

  /* O texto ocupa a faixa de baixo, sobre o gradiente. */
  .hero-texto{
    position:absolute;
    left:0;right:0;bottom:0;
    padding:var(--s-7) var(--s-5) var(--s-6);
    background:linear-gradient(to top,
      rgba(18,28,40,.97) 0%,
      rgba(18,28,40,.92) 46%,
      rgba(18,28,40,.55) 76%,
      rgba(18,28,40,0) 100%);
  }

  .hero-texto .eyebrow{ color:var(--lima-vivo) }
  .hero-texto h1{
    color:#fff;
    font-size:clamp(1.9rem,7.4vw,2.5rem);
    margin:var(--s-3) 0 var(--s-4);
  }
  .hero-texto .lead{
    color:rgba(255,255,255,.9);
    font-size:1rem;
    margin-bottom:0;
  }

  /* O parágrafo de apoio some no celular: sobre a foto ele
     empurraria o gradiente até o rosto. O essencial já está no
     título e no subtítulo. */
  .hero-apoio{ display:none }
}

/* ============================================================
   RÓTULO DE CONTAGEM SOBRE O ESTADO
   ============================================================ */

.camada-rotulos{ pointer-events:none }

.rotulo-disco{
  fill:var(--marinho);
  opacity:.92;
  stroke:rgba(255,255,255,.75);
  stroke-width:1;
}

.rotulo-n{
  fill:#fff;
  font-family:var(--display);
  font-size:9px;
  font-weight:800;
  text-anchor:middle;
  dominant-baseline:central;
}

/* Estado selecionado: o disco vira acento para casar com o
   destaque do próprio estado. */
#mapa-svg [data-uf].ativo ~ .camada-rotulos .rotulo-uf[data-uf]{ opacity:1 }

@media (max-width:640px){
  .rotulo-n{ font-size:11px }
}

/* ============================================================
   ANÚNCIO DO CURSO — lateral da página do edital
   ------------------------------------------------------------
   O cartão inteiro é o link, não só o botão: quem chega até aqui
   já leu o edital e está decidindo estudar — a área de clique
   grande respeita essa intenção.

   A imagem some sozinha se o arquivo não existir (onerror), então
   o bloco funciona antes e depois de a arte ficar pronta.
   ============================================================ */

.anuncio-curso{
  display:block;
  margin-top:var(--s-4);
  padding:0;
  overflow:hidden;
  text-decoration:none;
  border-color:var(--lima-wash);
  background:linear-gradient(150deg, var(--lima-wash-2), var(--carvao) 62%);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.anuncio-curso:hover{
  transform:translateY(-2px);
  box-shadow:var(--sombra-2);
  border-color:var(--lima);
}

.anuncio-curso img{
  display:block;
  width:100%;
  height:auto;
}

.anuncio-texto{ padding:var(--s-5) }

.anuncio-texto h2{
  font-size:var(--t-h3);
  margin:var(--s-3) 0;
  color:var(--branco);
}

.anuncio-texto p{
  color:var(--cinza);
  font-size:var(--t-sm);
  margin-bottom:var(--s-4);
}

/* É um <span> com cara de botão: o link já é o cartão, e botão
   dentro de link seria alvo de clique aninhado. */
.anuncio-curso .btn{ pointer-events:none }

/* ============================================================
   MOBILE — ajustes do tema claro
   ============================================================ */

@media (max-width:640px){
  /* A foto do hero não pode ocupar meia tela: o título e a
     promessa precisam aparecer sem rolagem. */

  /* O rótulo sobre o estado cresce junto com o SVG reduzido —
     senão o número vira um borrão de 4px. */
  .rotulo-n{ font-size:13px }
  .rotulo-disco{ r:9 }

  /* Logo menor, sem o nome do produto ao lado. */
  .marca-logo{ height:26px }

  /* O anúncio do curso vem depois do botão de inscrição: no
     celular a ordem da lateral vira ordem de leitura, e a
     inscrição é o que a pessoa veio fazer. */
  .anuncio-curso{ margin-top:var(--s-5) }
}

/* Telas muito estreitas: o mapa ainda precisa ser clicável. Um
   estado do Sudeste com 30px é alvo pequeno demais para o dedo. */
@media (max-width:400px){
  .mapa-coluna{ max-width:100% }
  .rotulo-n{ font-size:15px }
}

/* ============================================================
   LISTA EM CARTÕES QUANDO A COLUNA É ESTREITA
   ------------------------------------------------------------
   O mapa passou a ocupar metade da largura, e a lista herdou a
   outra metade — 604px numa tela de 1440. A tabela pede 640px
   mínimos, então ela transbordava: a coluna de salário ficava
   cortada fora da tela, e o texto quebrava palavra por palavra
   ("Auxiliar De / Contabilidade").

   A solução não é encolher a fonte: é trocar de formato. Tabela
   é boa quando há largura para as colunas; nesta faixa, cartão
   lê melhor.

   Usamos CONTAINER QUERY em vez de media query porque o que
   importa é a largura da COLUNA, não da tela: a mesma lista
   aparece em contextos de larguras diferentes.
   ============================================================ */

.mapa-lado{ container-type:inline-size; container-name:listamapa }

@container listamapa (max-width: 700px){
  .tabela-editais{ min-width:0 }

  .tabela-editais thead{
    position:absolute;width:1px;height:1px;
    overflow:hidden;clip:rect(0,0,0,0);
  }

  .tabela-editais,
  .tabela-editais tbody,
  .tabela-editais tr,
  .tabela-editais td{ display:block;width:100% }

  .tabela-editais tr{
    padding:var(--s-4);
    border-bottom:1px solid var(--linha);
    position:relative;
  }
  .tabela-editais tr:hover{ background:var(--carvao-2) }

  .tabela-editais td{
    padding:3px 0;border:0;
    display:flex;justify-content:space-between;gap:var(--s-3);
    align-items:baseline;
  }

  /* Cargo e órgão ocupam a linha inteira, com folga à direita
     para o salário que fica absoluto no canto. */
  .tabela-editais td:first-child{
    display:block;margin-bottom:var(--s-3);padding-right:96px;
  }

  .tabela-editais td:not(:first-child)::before{
    content:attr(data-rot);
    font-size:var(--t-micro);text-transform:uppercase;
    letter-spacing:.08em;color:var(--cinza-esc);
    font-weight:700;flex-shrink:0;
  }

  .tabela-editais td:last-child{
    position:absolute;top:var(--s-4);right:var(--s-4);
    width:auto;padding:0;text-align:right;
  }
  .tabela-editais td:last-child::before{ content:none }

  .tabela-wrap{ overflow-x:visible }
}

.ver-mais{
  margin-top:var(--s-4);
  font-size:var(--t-sm);
}

/* ============================================================
   AJUSTES DE DENSIDADE — medidos no navegador
   ============================================================ */

/* A foto ocupava 447x594 e empurrava a promessa para fora da
   primeira tela. O rosto continua reconhecível bem menor.

   DENTRO da media query: sem isso a regra vinha depois do bloco de
   mobile e vencia por ordem, prendendo a foto do celular em 330px
   quando ela deve sangrar até a borda. */
@media (min-width:861px){
  .hero-foto{ max-width:330px; margin-left:auto }
}

/* O cartão da lista tinha 5 linhas de rótulo em caixa alta, o
   que fazia cada edital ocupar ~240px de altura. Compactando
   os rótulos, cabe mais edital na mesma rolagem. */
@container listamapa (max-width: 700px){
  .tabela-editais tr{ padding:var(--s-3) var(--s-4) }
  .tabela-editais td{ padding:1px 0;font-size:var(--t-sm) }
  .tabela-editais td:first-child{ margin-bottom:var(--s-2);padding-right:88px }
  .tabela-editais td:not(:first-child)::before{ font-size:10px }

  /* Local e organizadora numa linha só, separados por ponto:
     duas linhas para dois dados curtos é desperdício de altura. */
  .tabela-editais td[data-rot="Salário até"]{
    font-size:var(--t-body);font-weight:700;
  }
}

/* O título da lista e o botão de limpar ficam grudados no topo
   da coluna, acompanhando a rolagem junto com o mapa. */
.mapa-cabeca{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-3);margin-bottom:var(--s-3);flex-wrap:wrap;
}

/* ============================================================
   NOVIDADES DESDE A ÚLTIMA VISITA
   ------------------------------------------------------------
   O radar traz dezenas de editais por varredura. Sem sinalizar o
   que mudou, quem acompanha precisa reler a lista inteira — e
   desiste. O selo responde "isto é novo para VOCÊ", não "isto é
   recente no site".
   ============================================================ */

.novidades-aviso{
  display:flex;align-items:center;gap:var(--s-3);
  margin:0 0 var(--s-4);
  padding:var(--s-3) var(--s-4);
  background:var(--lima-wash);
  border:1px solid var(--lima);
  border-radius:var(--r-sm);
  color:var(--branco);
  font-size:var(--t-sm);
}
.novidades-aviso[hidden]{ display:none }

.novidades-n{
  font-family:var(--display);
  font-size:1.35rem;font-weight:800;
  color:var(--lima);line-height:1;
}
.novidades-txt b{ color:var(--cinza);font-weight:500 }

/* Selo no card e na lista */
.badge-novo{
  background:var(--lima);
  color:var(--tinta-sobre-acento);
  font-weight:800;letter-spacing:.06em;
}

.selo-novo{
  display:inline-block;
  margin-left:var(--s-2);
  padding:1px 7px;
  border-radius:var(--r-pill);
  background:var(--lima);
  color:var(--tinta-sobre-acento);
  font-size:9px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;
  vertical-align:middle;
}

/* Faixa lateral na linha nova: dá para varrer a lista com o olho
   sem ler selo por selo. */
.tabela-editais tr[data-novo="true"]{
  box-shadow:inset 3px 0 0 var(--lima);
}

/* ============================================================
   ANÚNCIO DO CURSO — lateral e rodapé
   ============================================================ */

/* ============================================================
   BANNER DO CURSO — dentro da coluna do mapa
   ------------------------------------------------------------
   Terceira posição tentada. As duas anteriores falharam porque
   não há espaço LATERAL neste layout (margem de 100px numa tela
   de 1440), e a faixa atravessando a página roubava o rodapé.

   Aqui o banner é horizontal e mora DENTRO da coluna, abaixo da
   legenda. Como a coluna é sticky, ele acompanha a rolagem junto
   com o mapa — fixo, sem flutuar por cima de nada.

   O ENCAIXE É MEDIDO: mapa (582) + legenda (18) + banner (110) +
   folgas (48) = 758px, que cabe até numa janela de 768. Em telas
   mais baixas o MAPA encolhe (min() abaixo), não o banner some —
   um mapa 8% menor continua clicável; um anúncio ausente não
   anuncia.
   ============================================================ */

/* O mapa cede altura quando a janela é baixa, para o banner
   sempre caber. 320px é o piso: abaixo disso os estados do
   Sudeste ficam pequenos demais para acertar com o mouse. */
#mapa-svg svg{
  max-height:min(582px, calc(100vh - 210px));
  width:100%;
  height:auto;
}

.anuncio-faixa{
  display:flex; align-items:center; gap:var(--s-3);
  margin-top:var(--s-4);
  padding:var(--s-3) var(--s-4);
  border-radius:var(--r);
  background:linear-gradient(100deg, #22344A, #2C4159 62%);
  border:1px solid rgba(159,227,26,.34);
  box-shadow:var(--sombra-1);
  position:relative;
  /* Entra suave quando o JS o adiciona, sem pular o layout. */
  opacity:0; transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
}
.anuncio-faixa.visivel{ opacity:1; transform:none }

.anuncio-faixa-link{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:var(--s-3);
  text-decoration:none;
}

.anuncio-selo{
  flex-shrink:0;
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(159,227,26,.16);
  color:var(--lima-vivo);
}
.anuncio-selo svg{ width:17px; height:17px }

.anuncio-faixa-txt{ flex:1; min-width:0 }
.anuncio-faixa-txt strong{
  display:block;
  font-family:var(--display);
  font-size:.96rem; color:#fff; line-height:1.25;
}
.anuncio-faixa-txt span{
  display:block;
  font-size:var(--t-xs); color:rgba(255,255,255,.7);
  line-height:1.4; margin-top:2px;
}

.anuncio-faixa .btn{ flex-shrink:0 }

.anuncio-faixa .anuncio-fechar{
  position:absolute; top:4px; right:6px;
  width:22px; height:22px;
  background:transparent; color:rgba(255,255,255,.5);
  border:0; border-radius:50%;
  cursor:pointer; font-size:12px; line-height:1;
}
.anuncio-faixa .anuncio-fechar:hover{
  background:rgba(255,255,255,.12); color:#fff;
}

/* Coluna estreita: o texto de apoio sai e o botão encolhe, para o
   banner não quebrar em duas linhas. */
@container listamapa (max-width: 520px){
  .anuncio-faixa-txt span{ display:none }
}

/* No celular quem assume é o cartão de rodapé. */
@media (max-width:920px){
  .anuncio-faixa{ display:none }
}

.anuncio-rodape{
  position:fixed;
  left:var(--s-3); right:var(--s-3); bottom:var(--s-3);
  z-index:70;
  display:flex;align-items:center;gap:var(--s-2);
  background:var(--carvao);
  border:1px solid var(--lima);
  border-radius:var(--r);
  box-shadow:var(--sombra-3);
  padding:var(--s-3);
  transform:translateY(140%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.anuncio-rodape.visivel{ transform:translateY(0) }

.anuncio-rodape-link{
  flex:1;display:flex;align-items:center;gap:var(--s-3);
  justify-content:space-between;text-decoration:none;
}
.anuncio-rodape strong{
  display:block;font-size:var(--t-sm);color:var(--branco);
}
.anuncio-rodape span:not(.btn){
  display:block;font-size:var(--t-micro);color:var(--cinza);
  line-height:1.4;
}

.anuncio-fechar{
  flex-shrink:0;
  width:28px;height:28px;
  border:0;border-radius:50%;
  background:var(--carvao-3);color:var(--cinza);
  cursor:pointer;font-size:14px;line-height:1;
}
.anuncio-fechar:hover{ background:var(--carvao-2);color:var(--branco) }

@media (min-width:1101px){
  .anuncio-rodape{ display:none }
}

/* ============================================================
   PLATAFORMA — mapa fixo, lista rolando ao lado
   ------------------------------------------------------------
   Antes eram duas áreas empilhadas: a lista inteira no topo e o
   mapa lá embaixo, como navegação paralela. Quem abria a
   plataforma caía numa lista de 127 editais sem filtro nenhum.

   Agora é a mesma leitura da landing: o mapa é o filtro e fica à
   vista enquanto a lista corre ao lado.
   ============================================================ */

.painel-duplo{
  display:grid;
  /* `minmax(0,...)` nos dois lados: coluna de grid tem largura
     mínima automática, e sem isso a lista empurraria o mapa.

     O mapa cresceu de 440 para 560px: ele é o filtro principal, e a
     440 os estados do Sudeste ficavam pequenos demais para clicar
     sem errar o vizinho. A lista continua confortável — os cards
     dela já viram formato compacto abaixo de 700px. */
  grid-template-columns:minmax(0,560px) minmax(0,1fr);
  gap:var(--s-6);
  align-items:start;
}

.painel-mapa{
  position:sticky;
  top:var(--s-4);

  /* Elemento sticky MAIS ALTO que a janela não gruda: ele rola até
     o fim antes de prender. Medido: a coluna tinha 1137px numa
     janela de 900, então o mapa mal chegava a fixar — e o anúncio,
     que rolava junto, parecia passar por cima da legenda.

     Limitando a altura, o conjunto cabe e gruda de verdade. O
     `overflow:auto` é a saída de emergência para janela muito
     baixa: melhor rolar dentro da coluna que cortar o anúncio. */
  max-height:calc(100vh - var(--s-6));
  overflow-y:auto;
  overflow-x:hidden;
  /* Sem isto a barra de rolagem interna aparece o tempo todo no
     Windows e serrilha a borda do mapa. */
  scrollbar-width:thin;
}

.painel-lista #resumo{
  font-size:var(--t-sm);
  color:var(--cinza);
  margin-bottom:var(--s-4);
}

/* No celular vira coluna única e o mapa NÃO gruda: ali ele comeria
   metade da tela enquanto a lista passa por baixo — o oposto do
   que resolve no desktop. */
@media (max-width:920px){
  .painel-duplo{ grid-template-columns:1fr; gap:var(--s-5) }
  .painel-mapa{ position:static }
  .painel-mapa .mapa-coluna{ max-width:min(420px,100%); margin-inline:auto }
}

/* ============================================================
   BARRA DO TOPO — fixa só no celular
   ------------------------------------------------------------
   Decisão do Patrick (ago/2026): no computador ela não precisa
   acompanhar a rolagem. Ali o mapa já é a âncora fixa, e duas
   coisas grudadas ao mesmo tempo comem altura útil.

   No celular ela continua fixa: é o único caminho de volta ao
   topo e para a chamada principal.
   ============================================================ */

@media (min-width:921px){
  .topbar{ position:absolute }
  /* Sem barra fixa, o conteúdo não precisa mais do espaço
     reservado no topo. */
  .hero{ padding-top:calc(var(--topbar-h) + var(--s-6)) }
}