/* Portal de vagas da Usina do Pastel Cristóvão — visual do esboço v2 aprovado em 21/10/2026.
   Archivo (Omnibus-Type, SIL Open Font License 1.1), subconjunto latino, a mesma do DRE da Shana. */
@font-face { font-family:"Archivo"; font-weight:400 800; font-stretch:62% 125%; font-display:swap; src:url(archivo.woff2) format("woff2"); }
:root { --k:#121212; --y:#ffcc00; --y2:#fff4c7; --tx:#141414; --mu:#6f6a5f; --ln:#e3ded2; --bg:#f6f4ee; --ok:#22703f; --bad:#b0262b; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; background:var(--bg); color:var(--tx); font:16px/1.45 "Archivo", Arial, sans-serif; }
body { min-height:100dvh; display:flex; justify-content:center; }
#app { width:100%; max-width:480px; min-height:100dvh; display:flex; flex-direction:column; background:var(--bg); }
button { font:inherit; color:inherit; }
.isca { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* cabeçalho das etapas */
.topo { background:var(--k); color:#fff; padding:12px 16px; position:sticky; top:0; z-index:5; }
/* 3 colunas iguais nas pontas: o logo fica no centro qualquer que seja o tamanho do "‹" e do "2 vagas" (22/10) */
.topo .l1 { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; min-height:40px; }
.topo .l1 .volta { justify-self:start; } .topo .l1 img { justify-self:center; } .topo .l1 .vg { justify-self:end; }
.topo .volta { background:none; border:0; color:#fff; font-size:30px; line-height:1; width:40px; height:40px; text-align:left; padding:0; cursor:pointer; }
.topo img { height:40px; }
.topo .vg { font:600 12px "Archivo"; color:#cfcfcf; text-align:right; line-height:1.25; }
.seg { display:flex; gap:4px; margin-top:12px; } .seg i { flex:1; height:5px; border-radius:3px; background:#3a3a3a; } .seg i.f { background:var(--y); }
.passo { font:600 11.5px "Archivo"; color:#bdbdbd; margin-top:7px; letter-spacing:.04em; text-transform:uppercase; }

.corpo { padding:18px 18px 8px; flex:1; }
.q { font:800 26px/1.12 "Archivo"; font-stretch:88%; margin:0 0 6px; }
.dica { color:var(--mu); font-size:14.5px; margin:0 0 18px; }
.marca { background:var(--y); padding:0 4px; }
/* teste de perfil: na 2ª escolha do grupo (MENOS) a marca e a opção tocada ficam vermelhas (Khenedy 22/10) */
.marca.menos { background:var(--bad); color:#fff; }
.fase-menos .opc.sel { border-color:var(--bad); background:#fbe9e9; box-shadow:0 0 0 2px var(--bad) inset; }
.fase-menos .opc.sel .ck { background:var(--bad); border-color:var(--bad); }
.fase-menos .opc.sel .ck::after { content:"✕"; color:#fff; }

/* opções grandes */
.opc { width:100%; display:flex; align-items:center; gap:13px; background:#fff; border:2px solid var(--ln); border-radius:14px; padding:14px 15px; margin:0 0 11px; font:700 17px "Archivo"; min-height:64px; text-align:left; cursor:pointer; }
.opc .ic { width:38px; height:38px; border-radius:50%; background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:20px; flex:none; }
.opc .tx small { display:block; font:400 13px "Archivo"; color:var(--mu); margin-top:1px; }
.opc .ck { margin-left:auto; width:26px; height:26px; border-radius:50%; border:2px solid #cfc9bb; flex:none; position:relative; }
.opc.sel { border-color:var(--k); background:var(--y2); box-shadow:0 0 0 2px var(--y) inset; }
.opc.sel .ck { background:var(--k); border-color:var(--k); }
.opc.sel .ck::after { content:"✓"; color:var(--y); font-size:15px; font-weight:800; position:absolute; left:6px; top:1px; }
.opc.mais { border-color:var(--ok); background:#e3f0e6; cursor:default; }
.opc .tag { margin-left:auto; font:800 11px "Archivo"; text-transform:uppercase; letter-spacing:.06em; padding:3px 8px; border-radius:20px; background:var(--ok); color:#fff; }
.opc:focus-visible, .bt:focus-visible, .lnk:focus-visible { outline:3px solid var(--k); outline-offset:2px; }

/* campos */
.cp { margin-bottom:16px; }
.cp label { display:block; font:700 14px "Archivo"; margin-bottom:6px; }
.cp input { width:100%; background:#fff; border:2px solid var(--ln); border-radius:12px; padding:13px 14px; font:600 18px "Archivo"; color:var(--tx); }
.cp input::placeholder { color:#aaa39a; font-weight:400; }
.cp input:focus { outline:none; border-color:var(--k); box-shadow:0 0 0 3px var(--y); }
.cp .ok { color:var(--ok); font-size:13px; font-weight:700; margin-top:5px; min-height:18px; }
.cp .er { color:var(--bad); font-size:13px; font-weight:700; margin-top:5px; min-height:18px; }
.cp .aj { color:var(--mu); font-size:12.5px; margin-top:5px; }

/* rodapé */
.pe { padding:12px 18px 16px; position:sticky; bottom:0; background:linear-gradient(transparent, var(--bg) 24%); }
.bt { display:block; width:100%; text-align:center; background:var(--y); color:var(--k); font:800 18px "Archivo"; padding:16px; border-radius:14px; border:0; box-shadow:0 3px 0 #c9a100; cursor:pointer; }
.bt:disabled { opacity:.45; cursor:default; }
.auto { text-align:center; color:var(--mu); font-size:13px; }
.lnk { background:none; border:0; padding:0; color:var(--tx); text-decoration:underline; cursor:pointer; font:inherit; }
.erro-envio { color:var(--bad); font-weight:700; font-size:14px; text-align:center; margin:0 0 10px; }

/* capa */
.foto { height:210px; background:var(--k) center/cover no-repeat; position:relative; }
.foto.sem { background:repeating-linear-gradient(135deg, #2a2a2a 0 14px, #333 14px 28px); }
/* fachada da loja do Cristóvão (foto do Khenedy, 22/10/2026): sem logo por cima, a foto já mostra a marca */
/* a altura acompanha a tela e o título sobe para cima da foto: com a barra do Safari (~664 px úteis) a lista e a capa
   cabem sem rolagem (22/10) */
.foto.fachada { height:clamp(160px, 30dvh, 300px); background-image:url(fachada.webp); background-position:center 58%; }
.foto.fachada .grad { height:140px; background:linear-gradient(transparent, rgba(18,18,18,.88) 62%, var(--k)); }
.foto.fachada + .capa-c { position:relative; z-index:1; margin-top:-92px; background:linear-gradient(transparent, var(--k) 92px); }
.foto img { position:absolute; left:16px; top:14px; height:64px; }
.foto .grad { position:absolute; inset:auto 0 0 0; height:90px; background:linear-gradient(transparent, var(--k)); }
.capa-c { background:var(--k); color:#fff; padding:0 18px 20px; margin-top:-1px; }
.chip { display:inline-block; background:var(--y); color:var(--k); font:800 11.5px "Archivo"; text-transform:uppercase; letter-spacing:.06em; padding:4px 9px; border-radius:20px; }
.capa-c h1 { font:800 34px/1.02 "Archivo"; font-stretch:80%; text-transform:uppercase; margin:10px 0 6px; }
.capa-c .hor { color:#d8d8d8; font-size:14.5px; }
.ofe { padding:18px 18px 0; }
.ofe h2 { font:800 12.5px "Archivo"; text-transform:uppercase; letter-spacing:.07em; color:var(--mu); margin:0 0 10px; }
.ofe .it { font:600 15.5px "Archivo"; margin-bottom:9px; }
.ofe h3 { font:700 13px "Archivo"; color:var(--mu); margin:14px 0 6px; }
.como { margin:12px 18px 0; background:#fff; border:1px solid var(--ln); border-radius:12px; padding:11px 13px; font-size:14px; color:#333; }

/* lista de vagas */
.vaga { width:100%; text-align:left; background:#fff; border:2px solid var(--ln); border-radius:14px; padding:14px 15px; margin-bottom:11px; cursor:pointer; }
.vaga b { display:block; font:800 19px "Archivo"; } .vaga span { color:var(--mu); font-size:14px; }

/* currículo */
.up { width:100%; border:2.5px dashed #bdb6a6; border-radius:16px; background:#fff; padding:20px 14px; text-align:center; margin-bottom:12px; cursor:pointer; }
.up .ico { font-size:34px; display:block; } .up b { display:block; font:800 18px "Archivo"; margin:4px 0 2px; } .up small { color:var(--mu); font-size:13px; }
.up2 { display:flex; gap:10px; } .up2 button { flex:1; background:#fff; border:2px solid var(--ln); border-radius:12px; padding:13px 8px; font:700 14.5px "Archivo"; cursor:pointer; }
.up2 button.sel { border-color:var(--k); background:var(--y2); }
.anexo { background:#e3f0e6; border:2px solid var(--ok); border-radius:12px; padding:12px; font-weight:700; margin-bottom:12px; display:flex; justify-content:space-between; gap:10px; align-items:center; }
.lgpd { display:flex; gap:11px; align-items:flex-start; background:#fff; border:2px solid var(--ln); border-radius:12px; padding:13px; font-size:13.5px; color:#333; margin-top:16px; cursor:pointer; }
.lgpd.on { border-color:var(--k); }
.lgpd input { width:24px; height:24px; flex:none; margin:0; accent-color:var(--k); }

/* experiências (sem currículo) */
.exps { margin-top:20px; }
.exps h2 { font:800 20px/1.15 "Archivo"; font-stretch:90%; margin:0 0 4px; }
.exps .dica { margin-bottom:12px; }
.exps .lgpd { margin:0 0 14px; font-size:14.5px; font-weight:600; }
.exp { border:2px solid var(--ln); border-radius:14px; background:#fff; padding:6px 13px 8px; margin:0 0 12px; min-width:0; }
.exp legend { font:800 12px "Archivo"; text-transform:uppercase; letter-spacing:.06em; color:var(--mu); padding:0 6px; }
.exp .cp { margin-bottom:12px; }
.cp input:disabled { background:#eeebe3; }
.datas { display:flex; gap:10px; } .datas .cp { flex:1; min-width:0; }
.atual { display:flex; gap:9px; align-items:center; font:600 14.5px "Archivo"; margin:-2px 0 8px; cursor:pointer; }
.atual input { width:22px; height:22px; margin:0; flex:none; accent-color:var(--k); }
.exp .aj { color:var(--mu); font-size:12.5px; } .exp .er { color:var(--bad); font-size:13px; font-weight:700; }
.exp .tira { text-align:right; margin-top:6px; font-size:13.5px; }
.mais-exp { width:100%; background:none; border:2px dashed #bdb6a6; border-radius:12px; padding:12px; font:700 15px "Archivo"; cursor:pointer; }
.falta { color:var(--mu); font-size:13px; text-align:center; margin:0 0 8px; }
.falta:empty { display:none; }

/* fim */
.fim { background:var(--y); flex:1; padding:40px 22px 28px; text-align:center; }
.fim .big { width:82px; height:82px; border-radius:50%; background:var(--k); color:var(--y); font-size:42px; line-height:82px; margin:0 auto 16px; font-weight:800; }
.fim h1 { font:800 32px/1.04 "Archivo"; font-stretch:82%; text-transform:uppercase; margin:0 0 10px; }
.fim p { margin:0 0 18px; font-size:15.5px; }
.prox { background:#fff; border-radius:16px; padding:15px 15px 5px; text-align:left; }
.prox h2 { font:800 12.5px "Archivo"; text-transform:uppercase; letter-spacing:.07em; color:var(--mu); margin:0 0 11px; }
.prox .p { display:flex; gap:11px; margin-bottom:12px; font-size:14.5px; }
.prox .p b { flex:none; width:26px; height:26px; border-radius:50%; background:var(--k); color:var(--y); text-align:center; line-height:26px; font-size:13.5px; }

/* janela "como meus dados são usados" */
dialog { border:0; border-radius:16px; padding:22px 20px; max-width:440px; width:calc(100% - 32px); }
dialog::backdrop { background:rgba(0,0,0,.55); }
dialog h2 { font:800 20px "Archivo"; margin:0 0 10px; } dialog p, dialog li { font-size:14.5px; }
.vazio { padding:60px 24px; text-align:center; color:var(--mu); }
.faixa-teste { background:var(--bad); color:#fff; font:700 12px "Archivo"; text-align:center; padding:5px; letter-spacing:.05em; }
.lnk.claro { color:#fff; margin-bottom:10px; } .cresce { flex:1; } .cp.mt { margin-top:6px; }
.vazio img { height:90px; background:var(--k); padding:10px; border-radius:12px; }