/* Poppins self-hospedada (mesmos arquivos de modulos/propostas/assets/site, faixa Latin-1 —
   cobre acento do português: ã ç é í ó ô õ à â ê). Sem Google Fonts, sem CDN. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fontes/poppins-400.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fontes/poppins-500.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fontes/poppins-600.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fontes/poppins-700.woff2) format('woff2')}

/* Greenn Carreiras — sistema visual do portal (tokens e componentes).
   Escopo: tudo dentro de .portal. As telas são fragmentos HTML que só usam estas classes
   e classes próprias prefixadas pelo id da tela (ex.: .home-hero). Responsivo por
   container query: o .frame que envolve a tela define o tamanho (1440 ou 390). */

body{
  --papel:#fbfbf9;--papel2:#f2f6f4;--linha:#e3ebe7;--linha2:#cfdad4;
  --tinta:#14201c;--tinta2:#3a4741;--apagado:#5c6b64;--apagado2:#7f8c86;
  --teal:#19a36f;--teal2:#008d96;--teal-fundo:#e6f5ee;--teal-tinta:#0f6b4a;
  --lime:#aee637;--lime2:#7ecb53;--lime-tinta:#2f5a0c;
  --escuro:#03100f;--escuro2:#041a17;--painel:#0b1a16;--claro-no-escuro:#F2F6F3;--apoio-no-escuro:#B7C7BC;--linha-no-escuro:rgba(255,255,255,.12);
  --erro:#b42318;--erro-fundo:#fdecea;--erro-borda:#e4a39c;
  --grad:linear-gradient(120deg,#aee637,#7ecb53);
  --r-card:22px;--r-btn:14px;--r-campo:14px;--r-chip:999px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --sombra:0 1px 2px rgba(20,32,28,.05),0 14px 32px -16px rgba(20,32,28,.22);
  --foco:0 0 0 3px #fbfbf9,0 0 0 6px var(--teal);
  --f:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --t-rotulo:600 13px/1.3 var(--f);--t-apoio:400 15px/1.55 var(--f);--t-corpo:400 17px/1.6 var(--f);
  --t-sub:600 20px/1.35 var(--f);--t-card:700 26px/1.2 var(--f);--t-h2:700 34px/1.15 var(--f);--t-h1:700 52px/1.06 var(--f);--t-num:700 44px/1 var(--f);
  font:var(--t-corpo);color:var(--tinta);background:var(--papel);
  -webkit-font-smoothing:antialiased;container-type:inline-size;container-name:portal;
  min-height:100%;position:relative;
}
body *{box-sizing:border-box;margin:0;padding:0}
body a{color:var(--teal-tinta);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
body a:hover{color:var(--teal)}
body :is(a,button,input,select,textarea,summary):focus-visible{outline:none;box-shadow:var(--foco);border-radius:8px}
body img,body svg{display:block;max-width:100%}
body .pular{position:absolute;left:16px;top:-100px;z-index:50;background:var(--tinta);color:#fff;padding:12px 16px;border-radius:var(--r-btn);font:600 15px/1 var(--f);text-decoration:none}
body .pular:focus-visible{top:12px}
/* achado 10 (continuação): heading visualmente oculto antes do rodapé, pra nenhuma página pular
   nível quando o próprio conteúdo não chega a um h2 (ex.: banco-de-talentos, só h1) — o h2 do
   rodapé garante h1/h2->h2->h3 sempre válido, sem mudar nada visível. */
body .oculto-visual{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body h1,body h2,body h3{letter-spacing:-.022em;text-wrap:balance}
body h1{font:var(--t-h1);letter-spacing:-.025em}
body h2{font:var(--t-h2)}
body h3{font:var(--t-card)}
body .sub{font:var(--t-sub)}
body .apoio{font:var(--t-apoio);color:var(--apagado)}
body .rotulo{font:var(--t-rotulo);letter-spacing:.08em;text-transform:uppercase;color:var(--apagado)}
body .num{font:var(--t-num);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
body .tab{font-variant-numeric:tabular-nums}
body .lead{font:400 21px/1.5 var(--f);color:var(--tinta2);max-width:36em}
body p{max-width:44em}

/* grade */
body .wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--s5)}
body .wrap-n{width:100%;max-width:760px;margin:0 auto;padding:0 var(--s5)}
body .secao{padding:var(--s9) 0}
body .secao-m{padding:var(--s8) 0}
body .grid{display:grid;gap:var(--s5)}
body .g2{grid-template-columns:repeat(2,minmax(0,1fr))}
body .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
body .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
body .linha{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap}
body .coluna{display:flex;flex-direction:column;gap:var(--s4)}
body .entre{justify-content:space-between}
body .pilha-8>*+*{margin-top:var(--s2)}
body .pilha-16>*+*{margin-top:var(--s4)}
body .pilha-24>*+*{margin-top:var(--s5)}
body .pilha-32>*+*{margin-top:var(--s6)}

/* faixas escuras */
body .escuro{background:var(--escuro);color:var(--claro-no-escuro)}
body .escuro .apoio,body .escuro .rotulo,body .escuro .lead{color:var(--apoio-no-escuro)}
/* mesma família dos achados 1/3/9: .escuro a (classe+elemento) tinha mais especificidade que um
   .btn-p/.btn-t soltos (uma classe só) e vencia, pintando o CTA lime/teal com a cor de link claro
   do fundo escuro (contraste 1,15:1 — achado pelo Lighthouse em "Ver as 6 vagas" na home). Excluir
   os botões da regra genérica de link. */
body .escuro a:not(.btn){color:#cfe9dc}
body .escuro .card{background:var(--painel);border-color:var(--linha-no-escuro);box-shadow:none}
body .escuro .linha-h{border-color:var(--linha-no-escuro)}

/* cabeçalho e rodapé do portal */
body .topo{position:sticky;top:0;z-index:5;background:var(--escuro);color:var(--claro-no-escuro);border-bottom:1px solid var(--linha-no-escuro)}
body .topo .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:var(--s5)}
body .topo .marca svg{height:28px;width:auto}
body .topo nav{display:flex;gap:var(--s5);align-items:center}
body .topo nav a{color:var(--apoio-no-escuro);text-decoration:none;font:500 15px/1 var(--f);padding:10px 2px;border-radius:8px}
body .topo nav a:hover,body .topo nav a[aria-current]{color:#fff}
body .topo nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--lime)}
body .topo .hamb{display:none;width:44px;height:44px;border:1px solid var(--linha-no-escuro);border-radius:12px;background:transparent;color:#fff;align-items:center;justify-content:center}
body .rodape{background:var(--escuro);color:var(--apoio-no-escuro);padding:var(--s8) 0 var(--s6);font:var(--t-apoio)}
body .rodape .marca svg{height:26px;width:auto}
body .rodape a{color:#cfe9dc}
body .rodape .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s6)}
/* achado 10: colunas do rodapé eram h4 sem h3 antes delas em nenhuma página (h1/h2 -> h4). */
body .rodape .cols h3{font:600 13px/1.3 var(--f);letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:var(--s3)}
body .rodape ul{list-style:none;display:flex;flex-direction:column;gap:var(--s2)}
body .rodape .fim{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--linha-no-escuro);display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;font-size:13px}

/* botões: um primário por tela (lime pílula), secundário contornado, terciário link */
body .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:52px;padding:0 26px;border-radius:var(--r-chip);font:600 16px/1 var(--f);text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:background .15s,color .15s,border-color .15s,transform .15s;white-space:nowrap}
body .btn-p{background:var(--lime);color:var(--lime-tinta);box-shadow:0 8px 20px -10px rgba(126,203,83,.9)}
body .btn-p:hover{background:var(--lime2);color:#0f2a05}
body .btn-s{background:transparent;color:var(--tinta);border-color:var(--linha2);border-radius:var(--r-btn)}
body .btn-s:hover{border-color:var(--tinta);}
body .escuro .btn-s{color:#fff;border-color:rgba(255,255,255,.25)}
body .escuro .btn-s:hover{border-color:#fff}
body .btn-t{background:transparent;color:var(--teal-tinta);min-height:44px;padding:0 6px;text-decoration:underline;text-underline-offset:4px;border-radius:8px}
body .btn[disabled],body .btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;box-shadow:none}
body .btn.sm{min-height:44px;padding:0 18px;font-size:15px}
body .btn.md{min-height:48px}

/* chips e badges */
/* achado 8: min-height:36px ficava abaixo do alvo de toque de 44px (regra 6). */
body .chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:var(--r-chip);border:1.5px solid var(--linha2);background:#fff;color:var(--tinta2);font:500 14px/1 var(--f);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
body .chip:hover{border-color:var(--tinta)}
/* achado 6: os chips de filtro viraram <a aria-current="true">, não mais aria-pressed num link
   (combinação ARIA inválida). aria-pressed continua aceito aqui por segurança (chip-opcao usa
   :has(input:checked) em telas.css, não este atributo, mas mantém compatibilidade). */
body .chip[aria-pressed="true"],body .chip[aria-current="true"],body .chip.on{background:var(--tinta);border-color:var(--tinta);color:#fff}
body .badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--r-chip);font:600 12.5px/1 var(--f);letter-spacing:.02em;background:var(--papel2);color:var(--tinta2)}
body .badge.teal{background:var(--teal-fundo);color:var(--teal-tinta)}
body .badge.escuro{background:var(--painel);color:#cfe9dc}
body .badge i{width:7px;height:7px;border-radius:50%;background:var(--teal)}

/* cards */
body .card{background:#fff;border:1px solid var(--linha);border-radius:var(--r-card);padding:var(--s5);box-shadow:var(--sombra);transition:transform .2s,box-shadow .2s}
body a.card{text-decoration:none;color:inherit;display:block}
body a.card:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(20,32,28,.06),0 22px 40px -18px rgba(20,32,28,.3)}
body .card.plano{box-shadow:none;background:var(--papel2);border-color:transparent}
body .linha-h{border:0;border-top:1px solid var(--linha)}

/* a ficha de fato: número com data e fonte */
body .fato{display:flex;flex-direction:column;gap:6px;padding:var(--s5) 0;border-top:1px solid var(--linha)}
body .fato .num{color:var(--tinta)}
body .fato .desde{font:500 13px/1.3 var(--f);color:var(--apagado)}
body .escuro .fato{border-color:var(--linha-no-escuro)}
body .escuro .fato .num{color:#fff}
/* achado 9: .desde ficava com --apagado (#5c6b64) sobre --escuro (#03100f), 3,45:1. Mesmo padrão
   já usado para .apoio/.rotulo/.lead dentro de .escuro (linha 63). */
body .escuro .fato .desde{color:var(--apoio-no-escuro)}

/* faixa salarial */
body .faixa{display:flex;flex-direction:column;gap:var(--s2)}
body .faixa .valor{font:700 28px/1.1 var(--f);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
body .faixa .barra{height:8px;border-radius:4px;background:var(--papel2);position:relative;overflow:hidden}
body .faixa .barra i{position:absolute;top:0;bottom:0;left:22%;right:22%;background:var(--grad);border-radius:4px}

/* degraus: a linha do processo */
body .degraus{list-style:none;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:var(--s3);counter-reset:d}
body .degraus li{position:relative;padding-top:var(--s5);counter-increment:d}
body .degraus li::before{content:"";position:absolute;left:0;right:0;top:6px;height:4px;background:var(--linha);border-radius:2px}
body .degraus li::after{content:"";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:#fff;border:4px solid var(--teal)}
body .degraus li.feito::before{background:var(--teal)}
body .degraus li.feito::after{background:var(--teal)}
body .degraus li.atual::after{box-shadow:0 0 0 4px var(--teal-fundo)}
body .degraus b{display:block;font:600 16px/1.3 var(--f)}
body .degraus b::before{content:counter(d) ". ";color:var(--teal-tinta)}
body .degraus span{display:block;font:var(--t-apoio);color:var(--apagado);margin-top:4px}
body .degraus .prazo{display:inline-block;margin-top:6px;font:600 13px/1 var(--f);color:var(--teal-tinta);background:var(--teal-fundo);padding:6px 10px;border-radius:var(--r-chip)}
body .escuro .degraus li::before{background:var(--linha-no-escuro)}
body .escuro .degraus li::after{background:var(--painel)}
body .escuro .degraus span{color:var(--apoio-no-escuro)}
/* achado 1: .escuro .degraus span (2 classes + elemento) vencia .degraus .prazo (2 classes) e
   trocava só a cor do texto sem tocar o background da pílula — 1,57:1 de contraste. Exceção
   explícita pra .prazo não ser pega pela regra genérica de span dentro de .escuro. */
body .escuro .degraus .prazo{color:var(--teal-tinta)}

/* formulário */
body .campo{display:flex;flex-direction:column;gap:6px}
body .campo label{font:600 15px/1.3 var(--f);color:var(--tinta)}
body .campo .dica{font:400 13.5px/1.4 var(--f);color:var(--apagado)}
body .campo :is(input,select,textarea){width:100%;min-height:52px;padding:12px 16px;border:1.5px solid var(--linha2);border-radius:var(--r-campo);background:#fff;font:400 16px/1.4 var(--f);color:var(--tinta);transition:border-color .15s}
body .campo textarea{min-height:120px;resize:vertical}
body .campo :is(input,select,textarea):hover{border-color:var(--apagado)}
body .campo :is(input,select,textarea):focus{border-color:var(--teal);box-shadow:var(--foco);outline:none}
body .campo :is(input,select,textarea)[disabled]{background:var(--papel2);color:var(--apagado);cursor:not-allowed}
body .campo.erro :is(input,select,textarea){border-color:var(--erro);background:#fff}
body .campo .msg-erro{display:flex;gap:6px;align-items:flex-start;font:500 14px/1.4 var(--f);color:var(--erro)}
body .campo .msg-erro::before{content:"";flex:0 0 auto;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--erro);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23000'/%3E%3Cpath d='M8 4v5M8 11.2v.6' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23000'/%3E%3Cpath d='M8 4v5M8 11.2v.6' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
body .marca-opc{display:flex;gap:12px;align-items:flex-start;font:400 15px/1.5 var(--f);color:var(--tinta2)}
body .marca-opc input{width:22px;height:22px;min-height:0;padding:0;margin-top:2px;flex:0 0 auto;accent-color:var(--teal);border-radius:6px}
body .opcoes{display:flex;gap:var(--s2);flex-wrap:wrap}
body .upload{border:1.5px dashed var(--linha2);border-radius:var(--r-campo);padding:var(--s5);display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;color:var(--apagado);font:var(--t-apoio);background:#fff}
body .upload b{color:var(--teal-tinta);font-weight:600}
body .alerta{display:flex;gap:var(--s3);padding:var(--s4) var(--s5);border-radius:var(--r-btn);font:400 15px/1.5 var(--f)}
body .alerta.erro{background:var(--erro-fundo);color:#7a1a12;border:1px solid var(--erro-borda)}
body .alerta.ok{background:var(--teal-fundo);color:var(--teal-tinta);border:1px solid #b7dfcb}
body .alerta.info{background:var(--papel2);color:var(--tinta2);border:1px solid var(--linha)}
body .alerta b{font-weight:600}

/* foto (placeholder com direção escrita) */
body .foto{position:relative;border-radius:var(--r-card);overflow:hidden;background:linear-gradient(135deg,#0f2b24,#1a4a3a 55%,#245a3f);min-height:220px;display:flex;align-items:flex-end;color:#dcefe5}
body .foto::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.035) 0 10px,transparent 10px 20px)}
body .foto .dir{position:relative;padding:var(--s4);font:500 13px/1.45 var(--f);background:linear-gradient(to top,rgba(3,16,15,.85),transparent);width:100%}
body .foto .dir b{display:block;font:600 11px/1.3 var(--f);letter-spacing:.1em;text-transform:uppercase;color:#aee637;margin-bottom:4px}
body .foto.real{background:var(--foto) center/cover no-repeat,#0f2b24}
body .foto.real::before{background:none}
body .foto.real .dir{padding:var(--s3) var(--s4);font:500 12.5px/1.4 var(--f);color:#e6f0ea}
body .foto.quad{aspect-ratio:1}
/* achado 2: .foto.larga é item de .grid.g2. min-width:0 sozinho não bastou: com aspect-ratio e o
   min-height:220px herdado de .foto, o Chrome resolve a largura A PARTIR da altura (220 × 16/9 =
   391px) em vez de esticar a largura pro track e derivar a altura — 391px estourava os 342px do
   track em 390px de viewport (era isso o "scrollWidth 415" mesmo com min-width:0). width:100%
   fixa a largura no track primeiro; a altura (via aspect-ratio, com o piso de min-height) deixa
   de interferir na largura. */
body .foto.larga{aspect-ratio:16/9;min-width:0;width:100%}
body .foto.alta{aspect-ratio:4/5}
body .avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#1a4a3a,#245a3f);flex:0 0 auto}

/* vaga (card de lista) */
body .vaga{display:grid;grid-template-columns:1fr auto;gap:var(--s4) var(--s5);align-items:center}
/* achado 11: o título do card de /vagas virou h2 (.vaga h3 era o próximo heading depois do h1 da
   página, sem h2 no meio); _card_vaga_parecida.html continua h3 (sempre depois de um h2 de
   seção), por isso o seletor cobre os dois. */
body .vaga :is(h2,h3){font:600 22px/1.25 var(--f);letter-spacing:-.015em}
body .vaga .meta{display:flex;gap:var(--s3);flex-wrap:wrap;font:var(--t-apoio);color:var(--apagado)}
body .vaga .meta span+span::before{content:"·";margin-right:var(--s3);color:var(--linha2)}
body .vaga .sal{font:700 18px/1.2 var(--f);font-variant-numeric:tabular-nums;color:var(--tinta);text-align:right}
body .vaga .sal small{display:block;font:500 12.5px/1.3 var(--f);color:var(--apagado);margin-top:2px}

/* skeleton */
body .sk{background:linear-gradient(90deg,var(--papel2) 25%,#e9eeeb 50%,var(--papel2) 75%);background-size:200% 100%;border-radius:8px;animation:sk 1.4s ease infinite;min-height:16px}
@keyframes sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){body .sk{animation:none}body .card,body .btn,body .chip{transition:none}body a.card:hover{transform:none}}

/* barra fixa de CTA (página da vaga, celular) */
body .cta-fixo{position:sticky;bottom:0;background:rgba(251,251,249,.94);backdrop-filter:blur(8px);border-top:1px solid var(--linha);padding:var(--s3) 0}
body .cta-fixo .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}

/* FAQ */
body details{border-top:1px solid var(--linha);padding:var(--s4) 0}
body details:last-of-type{border-bottom:1px solid var(--linha)}
body summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--s4);font:600 18px/1.35 var(--f)}
body summary::-webkit-details-marker{display:none}
body summary::after{content:"+";font:400 26px/1 var(--f);color:var(--teal);flex:0 0 auto;transition:transform .26s}
body details[open] summary::after{transform:rotate(45deg)}
body details p{margin-top:var(--s3);color:var(--tinta2);max-width:46em}

/* celular: container query no .frame de 390 */
@media (max-width:760px){
  body{--t-h1:700 36px/1.08 var(--f);--t-h2:700 28px/1.15 var(--f);--t-card:700 22px/1.2 var(--f);--t-num:700 36px/1 var(--f);--t-corpo:400 16px/1.6 var(--f)}
  body .wrap,body .wrap-n{padding:0 var(--s4)}
  body .secao{padding:var(--s7) 0}
  body .secao-m{padding:var(--s6) 0}
  body .g2,body .g3,body .g4{grid-template-columns:minmax(0,1fr)}
  body .lead{font-size:18px}
  body .topo nav{display:none}
  body .topo .hamb{display:inline-flex}
  body .rodape .cols{grid-template-columns:1fr;gap:var(--s5)}
  body .degraus{grid-template-columns:1fr;gap:0}
  body .degraus li{padding:0 0 var(--s5) 32px}
  body .degraus li::before{left:6px;right:auto;top:16px;bottom:-4px;width:4px;height:auto}
  body .degraus li:last-child::before{display:none}
  body .vaga{grid-template-columns:1fr}
  body .vaga .sal{text-align:left}
  body .btn{width:100%}
  body .btn.auto{width:auto}
}

/* Greenn Carreiras — estilos próprios de cada tela (os <style> do topo de cada fragmento em
   telas/*.html), convertidos: .portal -> body, @container portal (max-width:760px) -> @media.
   home-sem-vaga.html e home-com-vagas.html viraram um template só (home.html); a citação
   ".hsv-citacao"/".hcv-citacao" virou ".home-citacao". */

/* home.html (telas/home-sem-vaga.html + home-com-vagas.html) */
body .home-citacao{border-left:3px solid var(--linha-no-escuro);padding-left:var(--s5)}
@media (max-width:760px){
  body .home-citacao{padding-left:var(--s4)}
}

/* foto real (hero): <img> com srcset ocupa o .foto como cover, legenda continua por cima */
body .foto.real{padding:0}
body .foto.real img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* vagas.html */
body .vg-filtro{border:0;display:flex;flex-direction:column;gap:var(--s2)}
body .vg-busca{max-width:420px}

/* vaga.html */
body .vaga-cab{padding:var(--s6) 0 var(--s5)}
body .vaga-cab .linha-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s6)}
body .vaga-cab .tit{flex:1;min-width:0}
body .vaga-cab .meta{margin-top:var(--s3)}
body .vaga-faixa{flex:0 0 auto;width:340px;background:var(--papel2);border-radius:var(--r-card);padding:var(--s5);text-align:right}
body .vaga-faixa .rotulo{margin-bottom:var(--s2)}
body .vaga-faixa p{margin-top:var(--s2)}
body .vaga-frase{margin-top:var(--s5);color:var(--tinta2)}
body .vaga-acoes{margin-top:var(--s6);justify-content:space-between}
body .vaga-compartilhar{gap:var(--s4)}
body .vaga-lista{list-style:none;display:flex;flex-direction:column}
body .vaga-lista li{padding:var(--s3) 0;border-top:1px solid var(--linha)}
body .vaga-lista li:first-child{border-top:0}
body .vaga-parecidas{display:flex;flex-direction:column;gap:var(--s4)}
body .vaga-fechada-aviso{padding:var(--s5);background:var(--papel2);border-radius:var(--r-card)}
/* achado 13: "Copiar link" com fallback sem JS = campo com a URL. O botão nasce hidden; um
   pequeno script inline em vaga.html troca pro botão quando há clipboard; sem JS, fica o campo. */
body .vaga-copiar-campo{display:inline-flex;align-items:center;gap:6px}
body .vaga-copiar-campo label{font:var(--t-apoio);color:var(--apagado)}
body .vaga-copiar-campo input{min-height:44px;padding:0 12px;border:1.5px solid var(--linha2);border-radius:var(--r-btn);background:#fff;font:400 14px/1 var(--f);color:var(--tinta);width:220px;max-width:60vw}
@media (max-width:760px){
  body .vaga-cab .linha-topo{flex-direction:column}
  body .vaga-faixa{width:100%;text-align:left}
  body .vaga-acoes{flex-direction:column;align-items:flex-start}
  body .cta-fixo .wrap{flex-direction:column;align-items:stretch;gap:var(--s3)}
  body .vaga-copiar-campo input{width:100%;max-width:none}
}

/* area.html */
/* achado 19: referência aprovada (area.png) mostra os chips de stack em caixa alta com
   letter-spacing ("VUE", "MLX E CLAUDE"); só o componente de stack, não os chips de filtro. */
body .ar-stack .chip{cursor:default;text-transform:uppercase;letter-spacing:.04em;font-size:13px}
body .ar-citacao{border-left:3px solid var(--linha);padding-left:var(--s5)}
@media (max-width:760px){
  body .ar-citacao{padding-left:var(--s4)}
}

/* vagas.html + area.html + status.html: cartão de vaga fora da grade de listagem (parecidas) */
body .vaga-parecidas .card.vaga,body .status-parecidas .card.vaga{display:block}
body .escuro .status-parecidas .vaga .meta{color:var(--apoio-no-escuro)}
body .escuro .status-parecidas .vaga .sal{color:#fff}
body .escuro .status-parecidas .vaga .sal small{color:var(--apoio-no-escuro)}
/* achado 3: vaga.html reaproveita .vaga-parecidas (não .status-parecidas) pra "Vagas parecidas"
   tanto na vaga aberta quanto na fechada; só a fechada ativa .escuro na seção, e faltava o mesmo
   par de regras acima pro card ficar legível (--tinta sobre --painel ~1:1 sem isso). */
body .escuro .vaga-parecidas .vaga .meta{color:var(--apoio-no-escuro)}
body .escuro .vaga-parecidas .vaga .sal{color:#fff}
body .escuro .vaga-parecidas .vaga .sal small{color:var(--apoio-no-escuro)}

/* banco.html (formulário GET; /dados/<token> reaproveita .banco-bloco) */
body .banco-form{margin-top:var(--s6)}
body .banco-campo{border:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
body .banco-campo legend{font:600 15px/1.3 var(--f);color:var(--tinta);padding:0}
body .banco-bloco{margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--linha)}
body .banco-bloco .rotulo{margin-bottom:var(--s3)}
body .banco-bloco p{margin-bottom:0}

/* status.html (/candidatura/<protocolo>) */
body .status-protocolo{font:600 15px/1.3 var(--f);color:var(--tinta)}
body .status-acoes{margin-top:var(--s3)}
body .status-parecidas{display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s5)}
body .status-fim{margin-top:var(--s6)}

/* barra fixa de CTA na página da vaga (position:sticky, sem JS) */
body .cta-fixo{position:sticky;bottom:0;background:rgba(251,251,249,.94);backdrop-filter:blur(8px);border-top:1px solid var(--linha);padding:var(--s3) 0}
body .cta-fixo .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
body .cta-fixo b{font:600 16px/1.2 var(--f)}
body .cta-fixo .linha{gap:var(--s3)}

/* banco.html + candidatura (Frente B): chip-checkbox sem JS, upload clicável sem JS */
body .chip-opcao{position:relative;overflow:hidden}
body .chip-opcao input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
body .chip-opcao:has(input:checked){background:var(--tinta);border-color:var(--tinta);color:#fff}
body .chip-opcao:has(input:focus-visible){outline:none;box-shadow:var(--foco)}
body .upload{position:relative}
body .upload input[type="file"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}

/* 404 próprio */
body .erro-404{padding:var(--s9) 0;text-align:center}
body .erro-404 .num{display:block;font:var(--t-h1);color:var(--apagado2)}