/* =============================================================================
   portal.css: componentes do PORTAL DO CANDIDATO (<body data-area="portal">).

   Só usa var(--token) de tokens.css. Mobile primeiro: o layout base é o do
   celular (390px) e o @container no fim abre colunas a partir de 768px. É
   container query (largura do <body data-area="portal">), não @media.

   Direção visual aprovada em 07/10/2026: "Jornada guiada" (mockup B) + fluxograma
   do processo e números grandes do hero (mockup C).
   Mockup: design-system/mockups/aprovados/mockup_portal_proposta_B.html. Os componentes
   da proposta viraram .pt-*; do C só vieram o fluxograma (.pt-fluxo) e os números (.pt-numeros).
   ============================================================================= */

[data-area="portal"] {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--fonte);
  font-size: var(--pt-md);
  line-height: var(--lh-texto);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  container: portal / inline-size;
}
[data-area="portal"] *, [data-area="portal"] *::before, [data-area="portal"] *::after { box-sizing: border-box; }
[data-area="portal"] a { color: var(--accent-text); }
/* :where() = especificidade zero: qualquer classe .pt-* ganha destes padrões */
:where([data-area="portal"]) :is(h1, h2, h3) {
  margin: 0; font-family: var(--fonte-titulo); line-height: var(--lh-titulo); letter-spacing: -0.01em; text-wrap: balance; }
:where([data-area="portal"]) p { margin: 0; }
:where([data-area="portal"]) :is(p, li) { text-wrap: pretty; }
[data-area="portal"] :focus-visible { outline: 3px solid var(--accent-hover); outline-offset: 2px; }
.pt-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pt-tabular { font-variant-numeric: tabular-nums; }

/* ---- faixa de marca + topo ---- */
.pt-faixa-marca { display: flex; height: 4px; }
.pt-faixa-marca span { flex: 1; }
.pt-faixa-marca .az { background: var(--faixa-azul); flex: 6; }
.pt-faixa-marca .vd { background: var(--marca-verde); }
.pt-faixa-marca .am { background: var(--marca-amarelo); }

.pt-topo { background: var(--card-solido); border-bottom: 1px solid var(--border); }
.pt-topo-in { max-width: var(--largura-portal); margin: 0 auto; padding: var(--sp-3) var(--sp-4);
              display: flex; align-items: center; gap: var(--sp-3); }
.pt-logo { display: block; height: 44px; }
.pt-logo img { height: 100%; width: auto; display: block; }
.pt-logo .escuro { display: none; }
[data-theme="dark"] .pt-logo .claro { display: none; }
[data-theme="dark"] .pt-logo .escuro { display: block; }
.pt-topo-nav { margin-left: auto; display: flex; align-items: center; gap: var(--sp-1); }
.pt-topo-nav a { font-size: var(--pt-sm); font-weight: var(--fw-media); text-decoration: none; color: var(--muted);
                 padding: 0 var(--sp-3); min-height: var(--alvo-toque); display: inline-flex; align-items: center;
                 border-radius: var(--r-md); }
.pt-topo-nav a[aria-current="page"] { background: var(--accent-light); color: var(--accent-text); }
.pt-topo-nav .so-desktop { display: none; }
.pt-botao-icone { width: var(--alvo-toque); height: var(--alvo-toque); display: inline-grid; place-items: center;
                  border: 1px solid var(--border2); border-radius: var(--r-md); background: transparent;
                  color: var(--text); cursor: pointer; font: inherit; }

/* ---- estrutura ---- */
.pt-pagina { max-width: var(--largura-portal); margin: 0 auto; padding: var(--sp-4) var(--sp-4) var(--sp-8); }
.pt-wrap { max-width: var(--largura-portal); margin: 0 auto; padding: 0 var(--sp-4); }
main.pt-wrap { padding-bottom: var(--sp-12); }
.pt-leitura { max-width: var(--largura-leitura); margin: 0 auto; }
.pt-leitura-larga { max-width: 880px; margin: 0 auto; display: grid; gap: var(--sp-4); }
.pt-voltar { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--pt-sm);
             text-decoration: none; color: var(--muted); min-height: var(--alvo-toque); }
.pt-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
           box-shadow: var(--sombra-card); padding: var(--sp-5); }
.pt-card > h2 { font-size: var(--pt-lg); font-weight: var(--fw-extra); }
.pt-eyebrow { font-size: var(--pt-xs); font-weight: var(--fw-extra); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.pt-aqui { display: inline-block; font-size: var(--fs-xs); font-weight: var(--fw-extra); letter-spacing: 0.05em; text-transform: uppercase;
           color: var(--accent-text); background: var(--accent-light); border: 1px solid var(--accent-borda);
           border-radius: var(--r-pill); padding: 2px 9px; white-space: nowrap; }

/* ---- faixa azul (hero), com o pattern decorativo ---- */
.pt-hero { position: relative; overflow: hidden; background: var(--banda); color: var(--banda-texto);
           border-radius: 0 0 var(--r-hero) var(--r-hero); padding: var(--sp-8) 0 var(--sp-10); }
.pt-hero > .pt-wrap { position: relative; }
.pt-padrao { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; pointer-events: none;
             -webkit-mask-image: radial-gradient(ellipse 55% 26% at 100% 0%, var(--mascara), transparent 80%);
             mask-image: radial-gradient(ellipse 55% 26% at 100% 0%, var(--mascara), transparent 80%); }
.pt-padrao-verde { fill: var(--marca-verde); fill-opacity: 0.55; }
.pt-padrao-amarelo { fill: var(--marca-amarelo); fill-opacity: 0.45; }
.pt-pilula { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--pt-xs); font-weight: var(--fw-forte);
             letter-spacing: 0.02em; background: var(--banda-chip); border: 1px solid var(--banda-linha);
             border-radius: var(--r-pill); padding: 6px 14px; color: var(--banda-texto); }
.pt-hero h1 { font-size: var(--pt-display); font-weight: var(--fw-extra); letter-spacing: -0.025em; line-height: 1.06;
              margin-top: var(--sp-4); color: var(--banda-texto); max-width: 15ch; }
.pt-lead { font-size: clamp(1.0625rem, 1rem + 0.35cqi, 1.25rem); color: var(--banda-suave); margin-top: var(--sp-4); max-width: 42ch; }
.pt-hero a.pt-hero-voltar { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--banda-suave); text-decoration: none;
                            font-size: var(--pt-sm); font-weight: var(--fw-media); min-height: var(--alvo-toque); }
.pt-hero a.pt-hero-voltar:hover { color: var(--banda-texto); }

/* busca dentro da faixa */
.pt-busca { display: flex; gap: var(--sp-2); margin-top: var(--sp-6); max-width: 640px; }
.pt-busca-campo { position: relative; flex: 1; }
.pt-busca-campo svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--banda-campo-suave); pointer-events: none; }
.pt-busca .pt-input { min-height: 52px; padding-left: 46px; background: var(--banda-campo-bg); color: var(--banda-campo-texto);
                      border: 0; border-radius: var(--r-md); }
.pt-busca .pt-input::placeholder { color: var(--banda-campo-suave); }
.pt-busca .pt-botao { min-height: 52px; background: var(--banda-chip); border: 1px solid var(--banda-linha); color: var(--banda-texto); }
.pt-busca .pt-botao:hover { background: var(--banda-chip-hover); }

/* três números grandes (do mockup C): sempre calculados das vagas abertas */
.pt-numeros { display: grid; grid-template-columns: repeat(3, 1fr); margin: var(--sp-8) 0 0; padding: 0; list-style: none;
              border-top: 1px solid var(--banda-linha); }
.pt-numeros li { padding: var(--sp-4) var(--sp-3) 0 0; }
.pt-numeros li + li { padding-left: var(--sp-3); border-left: 1px solid var(--banda-linha); }
.pt-numeros b { display: block; font-family: var(--fonte-titulo); font-size: var(--pt-numero); font-weight: var(--fw-extra);
                line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pt-numeros span { display: block; font-size: var(--pt-xs); color: var(--banda-suave); margin-top: var(--sp-2); line-height: 1.35; }

/* ---- "como funciona" (trilha) ---- */
.pt-mini { margin-top: calc(-1 * var(--sp-6)); position: relative; }
.pt-mini > p { font-size: var(--pt-sm); color: var(--muted); margin-top: var(--sp-1); }
.pt-trilha { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; list-style: none; margin: var(--sp-5) 0 0; padding: 0; }
.pt-trilha li { position: relative; text-align: center; font-size: var(--pt-xs); font-weight: var(--fw-media); color: var(--muted); padding: 0 2px; }
.pt-trilha li::after { content: ""; position: absolute; top: 15px; left: calc(50% + 20px); right: calc(-50% + 20px); height: 2px; background: var(--border2); }
.pt-trilha li:last-child::after { display: none; }
.pt-trilha li.feito::after { background: var(--green); }
.pt-bolha { width: 32px; height: 32px; margin: 0 auto var(--sp-2); border-radius: 50%; display: grid; place-items: center;
            font-size: var(--pt-sm); font-weight: var(--fw-extra); background: var(--accent-light); color: var(--accent-text);
            border: 1.5px solid var(--accent-borda); position: relative; z-index: 1; }
.pt-trilha li.feito .pt-bolha { background: var(--green); border-color: var(--green); color: var(--card); }
.pt-trilha li.atual .pt-bolha { background: var(--accent); border-color: var(--accent); color: var(--sobre-cor); box-shadow: 0 0 0 4px var(--accent-light); }
.pt-trilha li.atual { color: var(--text); }
/* compacta (confirmação): só os números no celular; o "Você está aqui" aponta para a etapa atual */
.pt-trilha.compacta { padding-bottom: var(--sp-8); }
.pt-trilha.compacta .rot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pt-trilha .pt-aqui { position: absolute; top: calc(32px + var(--sp-2) + 2px); left: 50%; transform: translateX(-50%); }

/* ---- filtros da lista ---- */
.pt-areas { display: flex; gap: var(--sp-2); overflow-x: auto; margin: var(--sp-6) calc(-1 * var(--sp-4)) 0; padding: 2px var(--sp-4) var(--sp-1);
            scrollbar-width: none; }
.pt-areas::-webkit-scrollbar { display: none; }
.pt-areas a { flex: none; min-height: var(--alvo-toque); padding: 0 var(--sp-4); border-radius: var(--r-pill); border: 1px solid var(--border2);
              background: var(--card); color: var(--text); text-decoration: none; font-size: var(--pt-sm); font-weight: var(--fw-forte);
              display: inline-flex; align-items: center; gap: var(--sp-2); }
.pt-areas a span { font-size: var(--pt-xs); font-weight: var(--fw-forte); color: var(--muted); background: var(--neutro-bg); border-radius: var(--r-pill); padding: 0 8px; }
.pt-areas a[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--sobre-cor); }
.pt-areas a[aria-current="true"] span { background: var(--chip-contagem-ativo); color: var(--sobre-cor); }
.pt-filtros-ativos { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.pt-chip { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 36px; padding: 0 var(--sp-3);
           border: 1px solid var(--accent-borda); background: var(--accent-light); color: var(--accent-text);
           border-radius: var(--r-pill); font-size: var(--pt-sm); font-weight: var(--fw-media); cursor: pointer; }
.pt-contagem { margin: var(--sp-6) 0 var(--sp-4); font-size: var(--pt-sm); color: var(--muted); }

/* folha de filtros (contrato): abre embaixo do botão, sem JS */
.pt-folha { background: var(--card-solido); border: 1px solid var(--border2); border-radius: var(--r-lg);
            box-shadow: var(--sombra-flutuante); padding: var(--sp-4); }
.pt-folha h2 { font-size: var(--pt-lg); margin-bottom: var(--sp-3); }
.pt-folha fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-4); }
.pt-folha legend { font-size: var(--pt-sm); font-weight: var(--fw-media); color: var(--muted); margin-bottom: var(--sp-2); }
.pt-opcoes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pt-opcao { min-height: 40px; padding: 0 var(--sp-3); border: 1px solid var(--border2); border-radius: var(--r-pill);
            background: transparent; color: var(--text); font: inherit; font-size: var(--pt-sm); cursor: pointer; }
.pt-opcao[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-light); color: var(--accent-text);
                                 font-weight: var(--fw-media); }
.pt-folha-acoes { display: flex; gap: var(--sp-2); }
.pt-folha-acoes .pt-botao { flex: 1; }

/* ---- cartão de vaga ---- */
.pt-lista { display: grid; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.pt-lista > li { display: flex; }
.pt-vaga { flex: 1; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border);
           border-radius: var(--r-lg); box-shadow: var(--sombra-card); padding: var(--sp-5); text-decoration: none;
           color: var(--text); transition: border-color var(--transicao), transform var(--transicao); }
.pt-vaga:hover { border-color: var(--accent-borda); transform: translateY(-1px); }
.pt-vaga-topo { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); align-items: start; }
.pt-tile { width: 48px; height: 48px; border-radius: var(--r-md); background: var(--tile-bg); color: var(--accent-text);
           display: grid; place-items: center; font-family: var(--fonte-titulo); font-weight: var(--fw-extra);
           font-size: var(--pt-sm); letter-spacing: 0.02em; flex: none; }
.pt-vaga h3 { font-size: var(--pt-lg); font-weight: var(--fw-forte); color: var(--text); overflow-wrap: anywhere; line-height: 1.25; }
.pt-vaga-setor { font-size: var(--pt-sm); color: var(--muted); margin-top: 2px; }
.pt-ir { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border2); display: grid; place-items: center; color: var(--accent-text); }
.pt-vaga:hover .pt-ir { background: var(--accent); color: var(--sobre-cor); border-color: var(--accent); }
.pt-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0; list-style: none; padding: 0; }
.pt-meta li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--pt-xs); font-weight: var(--fw-media); color: var(--muted);
              background: var(--neutro-bg); border-radius: var(--r-pill); padding: 4px 10px; }
.pt-meta li.destaque { background: var(--accent-light); color: var(--accent-text); }
.pt-vaga-rodape { margin-top: auto; display: flex; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-3);
                  border-top: 1px dashed var(--border2); font-size: var(--pt-xs); color: var(--muted); }
.pt-vaga-rodape .prazo { color: var(--amber); font-weight: var(--fw-forte); }
.pt-mais { width: 100%; margin-top: var(--sp-5); }

/* ---- banco de talentos (fim da lista) ---- */
.pt-banco { margin-top: var(--sp-6); padding: var(--sp-5); border-radius: var(--r-lg);
            background: var(--accent-light); border: 1px dashed var(--accent-borda); }
.pt-banco h2 { font-size: var(--pt-lg); }
.pt-banco p { margin: var(--sp-2) 0 var(--sp-3); color: var(--muted); font-size: var(--pt-sm); }

/* ---- página da vaga ---- */
.pt-hero-vaga { padding-bottom: var(--sp-8); }
.pt-hero-vaga h1 { font-size: var(--pt-2xl); line-height: 1.15; max-width: 24ch; overflow-wrap: anywhere; margin-top: var(--sp-4); }
.pt-pilulas { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pt-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-6); list-style: none; padding: 0; }
.pt-stats li { align-content: start; background: var(--banda-chip); border: 1px solid var(--banda-linha); border-radius: var(--r-ml);
               padding: var(--sp-3) var(--sp-4); display: grid; gap: 2px; min-width: 0; }
.pt-stats svg { color: var(--banda-suave); }
.pt-stats small { font-size: var(--pt-xs); color: var(--banda-suave); font-weight: var(--fw-media); }
.pt-stats b { font-size: var(--pt-md); font-weight: var(--fw-forte); color: var(--banda-texto); line-height: 1.25; overflow-wrap: anywhere; }
.pt-hero a.pt-teaser { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-5); font-size: var(--pt-sm);
                       font-weight: var(--fw-media); color: var(--banda-texto); text-decoration: none; border-bottom: 1px solid var(--banda-linha);
                       padding: var(--sp-2) 0; min-height: var(--alvo-toque); }
.pt-hero a.pt-teaser:hover { border-bottom-color: var(--banda-texto); }
.pt-grid { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.pt-coluna { display: grid; gap: var(--sp-4); align-content: start; min-width: 0; }
.pt-lateral { display: none; }
.pt-bloco-vaga h2 { font-size: var(--pt-xl); font-weight: var(--fw-extra); margin-bottom: var(--sp-3); }
.pt-bloco-vaga p { max-width: 62ch; overflow-wrap: anywhere; }
.pt-bloco-vaga p + p { margin-top: var(--sp-2); }
.pt-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.pt-checks li { display: grid; grid-template-columns: 24px 1fr; gap: var(--sp-3); align-items: start; overflow-wrap: anywhere; }
.pt-checks svg { color: var(--green); margin-top: 2px; }
.pt-bloco-vaga .pt-eyebrow { margin: var(--sp-4) 0 var(--sp-2); }
.pt-bloco-vaga .pt-eyebrow:first-child { margin-top: 0; }
.pt-salario { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); }
.pt-salario b { font-family: var(--fonte-titulo); font-size: var(--pt-xl); font-weight: var(--fw-extra); letter-spacing: -0.02em; }
.pt-bens { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.pt-bens li { display: flex; align-items: center; gap: var(--sp-3); background: var(--card2); border-radius: var(--r-ml);
              padding: var(--sp-3); font-size: var(--pt-sm); font-weight: var(--fw-media); line-height: 1.3; overflow-wrap: anywhere; }
.pt-bens svg { flex: none; color: var(--accent-text); }
.pt-lateral .pt-prazo-t { font-size: var(--pt-sm); color: var(--muted); }
.pt-lateral .pt-prazo-d { font-family: var(--fonte-titulo); font-size: var(--pt-xl); font-weight: var(--fw-extra); margin: 2px 0 var(--sp-4); }
.pt-lateral .pt-ajuda { margin-top: var(--sp-3); }
.pt-lateral .pt-card > h2 { margin-bottom: var(--sp-4); }
.pt-lateral .pt-botao { width: 100%; }
.pt-mini-jornada { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.pt-mini-jornada li { display: grid; grid-template-columns: 28px 1fr; gap: var(--sp-3); font-size: var(--pt-sm); align-items: start; }
.pt-mini-jornada b { display: block; font-weight: var(--fw-forte); line-height: 1.3; }
.pt-mini-jornada span { color: var(--muted); font-size: var(--pt-xs); }
.pt-mini-jornada i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: var(--pt-xs);
                     font-weight: var(--fw-extra); background: var(--accent-light); color: var(--accent-text); border: 1px solid var(--accent-borda); }

/* ---- fluxograma do processo (do mockup C): estações numeradas ligadas por tubulação ---- */
.pt-processo { margin-top: var(--sp-10); }
.pt-processo > h2 { font-size: var(--pt-xl); font-weight: var(--fw-extra); }
.pt-processo > p { color: var(--muted); margin-top: var(--sp-2); max-width: 60ch; }
.pt-fluxo { list-style: none; margin: var(--sp-6) 0 0; padding: 0; }
.pt-fluxo > li { display: grid; grid-template-columns: 44px 1fr; gap: var(--sp-3); position: relative; padding-bottom: var(--sp-4); }
.pt-fluxo > li:last-child { padding-bottom: 0; }
.pt-no { position: relative; display: flex; flex-direction: column; align-items: center; }
.pt-quad { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center;
           font-family: var(--fonte-titulo); font-weight: var(--fw-extra); font-size: var(--pt-lg); background: var(--card); color: var(--text);
           border: 2px solid var(--border2); font-variant-numeric: tabular-nums; flex: none; }
.pt-cano { flex: 1; width: 4px; margin-top: 4px; margin-bottom: -12px;
           background: repeating-linear-gradient(to bottom, var(--border2) 0 6px, transparent 6px 12px); }
.pt-fluxo > li:last-child .pt-cano { display: none; }
.pt-fluxo li.inicio .pt-quad, .pt-fluxo li.feito .pt-quad, .pt-fluxo li.atual .pt-quad { background: var(--accent); border-color: var(--accent); color: var(--sobre-cor); }
.pt-fluxo li.feito .pt-cano { background: var(--accent); }
.pt-fluxo li.atual .pt-quad { box-shadow: 0 0 0 4px var(--accent-light), 0 0 0 6px var(--accent-borda); }
.pt-etapa { background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--border2); border-radius: var(--r-ml);
            padding: var(--sp-4); box-shadow: var(--sombra-card); min-width: 0; }
.pt-fluxo li.inicio .pt-etapa, .pt-fluxo li.feito .pt-etapa, .pt-fluxo li.atual .pt-etapa { border-top-color: var(--accent); }
.pt-etapa-rotulo { display: flex; justify-content: space-between; gap: var(--sp-2); align-items: center; font-family: var(--fonte-titulo);
                   font-size: var(--pt-xs); font-weight: var(--fw-forte); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.pt-etapa h3 { font-size: var(--pt-lg); font-weight: var(--fw-extra); margin-top: var(--sp-1); line-height: 1.2; }
.pt-etapa dl { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--sp-3); margin: var(--sp-3) 0 0; font-size: var(--pt-sm); }
.pt-etapa dt { color: var(--text-dim); }
.pt-etapa dd { margin: 0; font-weight: var(--fw-media); }
.pt-esp { font-size: var(--pt-sm); color: var(--muted); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--border2); }
.pt-fluxo-nota { font-size: var(--pt-xs); color: var(--muted); margin-top: var(--sp-5); }

/* CTA fixo no rodapé do celular */
.pt-cta-fixo { position: sticky; bottom: 0; z-index: 5; margin: var(--sp-6) calc(-1 * var(--sp-4)) 0; padding: var(--sp-3) var(--sp-4) var(--sp-4);
               background: var(--card-solido); border-top: 1px solid var(--border2); border-radius: var(--r-cta) var(--r-cta) 0 0;
               box-shadow: var(--sombra-cta); display: flex; align-items: center; gap: var(--sp-3); }
.pt-cta-fixo .prazo { font-size: var(--pt-xs); color: var(--muted); line-height: 1.3; font-weight: var(--fw-media); }
.pt-cta-fixo .pt-botao { flex: 1; }

/* ---- botões ---- */
.pt-botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
            min-height: var(--alvo-toque); padding: 0 var(--sp-5); border-radius: var(--r-md); border: 1px solid transparent;
            font: inherit; font-size: var(--pt-md); font-weight: var(--fw-forte); text-decoration: none; cursor: pointer;
            transition: background var(--transicao), border-color var(--transicao); }
.pt-botao.primario { background: var(--accent); color: var(--sobre-cor); }
.pt-botao.primario:hover { background: var(--accent-hover); }
.pt-botao.secundario { background: transparent; color: var(--accent-text); border-color: var(--accent-borda); }
.pt-botao.secundario:hover { background: var(--accent-light); }
.pt-botao.discreto { background: transparent; color: var(--muted); border-color: var(--border2); }
.pt-botao.linkedin { background: transparent; color: var(--text); border-color: var(--border2); width: 100%; }
.pt-botao.grande { min-height: 52px; padding: 0 var(--sp-6); font-size: var(--pt-lg); }

/* ---- formulário ---- */
.pt-passos { display: flex; gap: var(--sp-2); list-style: none; padding: 0; margin: var(--sp-4) 0 var(--sp-5); }
.pt-passos li { flex: 1; font-size: var(--pt-xs); color: var(--muted); }
.pt-passos li::before { content: ""; display: block; height: 4px; border-radius: var(--r-pill); background: var(--border2);
                        margin-bottom: var(--sp-1); }
.pt-passos li.feito::before, .pt-passos li.atual::before { background: var(--accent); }
.pt-passos li.atual { color: var(--text); font-weight: var(--fw-media); }
.pt-form-titulo { font-size: var(--pt-xl); font-weight: var(--fw-forte); }
.pt-form-sub { color: var(--muted); font-size: var(--pt-sm); margin: var(--sp-1) 0 0; overflow-wrap: anywhere; }

.pt-bloco { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4);
            margin-top: var(--sp-4); }
.pt-bloco > h2 { font-size: var(--pt-lg); font-weight: var(--fw-forte); margin-bottom: var(--sp-1); }
.pt-bloco > p { margin: 0 0 var(--sp-2); color: var(--muted); font-size: var(--pt-sm); }

.pt-campo { margin-top: var(--sp-4); }
.pt-campo label, .pt-campo .pt-rotulo { display: block; font-size: var(--pt-sm); font-weight: var(--fw-media); margin-bottom: var(--sp-1); }
.pt-campo .opcional { font-weight: var(--fw-normal); color: var(--muted); }
.pt-input { width: 100%; min-height: var(--alvo-toque); padding: 0 var(--sp-3); border-radius: var(--r-md);
            border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text);
            font: inherit; font-size: var(--pt-md); }
.pt-input::placeholder { color: var(--text-dim); }
.pt-ajuda { font-size: var(--pt-xs); color: var(--muted); margin-top: var(--sp-1); }
.pt-campo.com-erro .pt-input { border-color: var(--red); }
.pt-erro { font-size: var(--pt-xs); color: var(--red); margin-top: var(--sp-1); font-weight: var(--fw-media); }
.pt-divisor { display: flex; align-items: center; gap: var(--sp-3); color: var(--muted); font-size: var(--pt-xs); margin: var(--sp-4) 0 0; }
.pt-divisor::before, .pt-divisor::after { content: ""; flex: 1; height: 1px; background: var(--border2); }
.pt-in { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-sm); flex: none;
         background: var(--text); color: var(--card-solido); font-weight: var(--fw-forte); font-size: var(--pt-xs); }
.pt-selo-fase { white-space: nowrap; font-size: var(--fs-2xs); font-weight: var(--fw-forte); text-transform: uppercase; letter-spacing: 0.04em;
                color: var(--amber); background: var(--amber-bg); border-radius: var(--r-pill); padding: 1px var(--sp-2); }

/* upload */
.pt-upload { display: block; border: 2px dashed var(--border2); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-4);
             text-align: center; cursor: pointer; background: var(--card2); }
.pt-upload b { display: block; color: var(--accent-text); }
.pt-upload span { font-size: var(--pt-xs); color: var(--muted); }
.pt-arquivo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); border: 1px solid var(--border2); border-radius: var(--r-lg);
              padding: var(--sp-3); background: var(--card2); }
.pt-arquivo-icone { flex: none; width: 40px; height: 48px; border-radius: var(--r-sm); display: grid; place-items: center;
                    font-size: var(--fs-2xs); font-weight: var(--fw-forte); color: var(--red); background: var(--red-bg); }
.pt-arquivo-nome { flex: 1; min-width: 0; }
.pt-arquivo-nome b { display: block; font-size: var(--pt-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-arquivo-nome span { font-size: var(--pt-xs); color: var(--green); }
.pt-arquivo-acoes { display: flex; gap: var(--sp-1); width: 100%; justify-content: flex-end;
                     border-top: 1px solid var(--border); padding-top: var(--sp-1); }
.pt-arquivo-acoes button { min-height: 36px; padding: 0 var(--sp-2); border: 0; background: transparent; color: var(--accent-text);
                           font: inherit; font-size: var(--pt-sm); font-weight: var(--fw-media); cursor: pointer; }
.pt-upload-erro { border-color: var(--red); background: var(--red-bg); }

/* escolha (sim/não, múltipla) */
.pt-pergunta { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.pt-pergunta:first-of-type { border-top: 0; padding-top: 0; }
.pt-pergunta .pt-rotulo { font-size: var(--pt-md); }
.pt-escolhas { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.pt-escolhas.lado { grid-template-columns: 1fr 1fr; }
.pt-escolha { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--alvo-toque); padding: var(--sp-2) var(--sp-3);
              border: 1px solid var(--border2); border-radius: var(--r-md); cursor: pointer; font-size: var(--pt-md); }
.pt-escolha input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; flex: none; }
.pt-escolha:has(input:checked) { border-color: var(--accent); background: var(--accent-light); }

/* privacidade */
.pt-privacidade { font-size: var(--pt-sm); }
.pt-privacidade ul { margin: var(--sp-2) 0; padding-left: var(--sp-5); color: var(--muted); }
.pt-aceite { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3); border: 1px solid var(--border2);
             border-radius: var(--r-md); margin-top: var(--sp-3); cursor: pointer; font-size: var(--pt-sm); }
.pt-aceite input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--accent); }
.pt-aceite b { display: block; font-size: var(--pt-md); color: var(--text); }
.pt-aceite span { color: var(--muted); }
.pt-robo { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--pt-xs); color: var(--muted); margin-top: var(--sp-4); }
.pt-robo::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--green); flex: none; }

/* revisão */
.pt-revisao { margin: 0; display: grid; grid-template-columns: 1fr; gap: var(--sp-1); font-size: var(--pt-sm); }
.pt-revisao dt { color: var(--muted); margin-top: var(--sp-2); }
.pt-revisao dd { margin: 0; font-weight: var(--fw-media); overflow-wrap: anywhere; }
.pt-bloco-cab { display: flex; justify-content: space-between; align-items: baseline; }
.pt-bloco-cab h2 { font-size: var(--pt-lg); font-weight: var(--fw-forte); }
.pt-bloco-cab a { font-size: var(--pt-sm); font-weight: var(--fw-media); }

.pt-form-acoes { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.pt-form-acoes .pt-botao.primario { flex: 1; }

/* alerta */
.pt-alerta { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-size: var(--pt-sm);
             margin-top: var(--sp-4); border: 1px solid; }
.pt-alerta.erro { background: var(--red-bg); border-color: var(--red); color: var(--text); }
.pt-alerta.aviso { background: var(--amber-bg); border-color: var(--amber-borda); color: var(--text); }
.pt-alerta.info { background: var(--accent-light); border-color: var(--accent-borda); color: var(--text); }
.pt-alerta b { display: block; }
.pt-alerta svg { flex: none; }
.pt-alerta.aviso svg { color: var(--amber); }
.pt-coluna > .pt-alerta, .pt-leitura-larga > .pt-alerta { margin-top: 0; }


/* estados vazios */
.pt-vazio { text-align: center; padding: var(--sp-8) var(--sp-4); background: var(--card); border: 1px solid var(--border);
            border-radius: var(--r-lg); }
.pt-vazio h2 { font-size: var(--pt-lg); }
.pt-vazio p { color: var(--muted); font-size: var(--pt-sm); margin: var(--sp-2) 0 var(--sp-4); }
.pt-botoes-empilhados { display: grid; gap: var(--sp-2); margin-top: var(--sp-5); }

/* ---- confirmação ("Candidatura enviada") ---- */
.pt-ok { padding: var(--sp-8) 0 var(--sp-2); text-align: center; }
.pt-ok-icone { width: 84px; height: 84px; margin: 0 auto var(--sp-5); border-radius: 50%; display: grid; place-items: center;
               color: var(--card); background: var(--green); box-shadow: 0 0 0 10px var(--green-bg); }
.pt-ok h1 { font-size: var(--pt-2xl); font-weight: var(--fw-extra); letter-spacing: -0.03em; }
.pt-ok p { color: var(--muted); margin: var(--sp-3) auto 0; max-width: 46ch; overflow-wrap: anywhere; }
.pt-ok p b { color: var(--text); }
.pt-protocolo { display: inline-flex; gap: var(--sp-2); margin-top: var(--sp-4); font-size: var(--pt-sm); font-weight: var(--fw-forte);
                font-variant-numeric: tabular-nums; background: var(--card); border: 1px solid var(--border2); border-radius: var(--r-pill);
                padding: 6px 16px; }
.pt-protocolo span { color: var(--muted); font-weight: var(--fw-media); }
.pt-etapa-atual { margin-top: var(--sp-2); }
.pt-etapa-atual .topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.pt-etapa-atual h2 { font-size: var(--pt-xl); font-weight: var(--fw-extra); }
.pt-etapa-atual .topo span.n { font-size: var(--pt-sm); font-weight: var(--fw-forte); color: var(--muted); }
.pt-data { display: flex; gap: var(--sp-4); align-items: center; margin-top: var(--sp-5); padding: var(--sp-4); border-radius: var(--r-ml);
           background: var(--accent-light); border: 1px solid var(--accent-borda); }
.pt-data .dia { flex: none; text-align: center; line-height: 1; min-width: 64px; }
.pt-data .dia b { display: block; font-family: var(--fonte-titulo); font-size: var(--pt-2xl); font-weight: var(--fw-extra);
                  color: var(--accent-text); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pt-data .dia small { font-size: var(--pt-xs); font-weight: var(--fw-extra); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pt-data p { font-size: var(--pt-sm); color: var(--text); }
.pt-data p b { display: block; font-size: var(--pt-md); }
.pt-depois > h2 { font-size: var(--pt-xl); font-weight: var(--fw-extra); margin-top: var(--sp-4); }
.pt-proximos { display: grid; gap: var(--sp-3); list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.pt-proximo { align-content: start; display: grid; grid-template-columns: 44px 1fr; gap: var(--sp-3); padding: var(--sp-4);
              background: var(--card); border: 1px solid var(--border); border-radius: var(--r-ml); }
.pt-proximo .pt-tile { width: 44px; height: 44px; }
.pt-proximo h3 { font-size: var(--pt-md); font-weight: var(--fw-extra); }
.pt-proximo small { display: block; font-size: var(--pt-xs); font-weight: var(--fw-forte); color: var(--accent-text); margin-top: 2px; }
.pt-proximo p { font-size: var(--pt-sm); color: var(--muted); margin-top: var(--sp-1); }
.pt-acoes { display: grid; gap: var(--sp-2); margin-top: var(--sp-5); }

/* ---- página "Sobre a Meridional" ---- */
.pt-sobre-bloco { margin-top: var(--ritmo); }
.pt-sobre-bloco:first-of-type { margin-top: var(--sp-8); }
.pt-sobre-bloco > .pt-eyebrow { color: var(--accent-text); }
.pt-sobre-bloco > h2 { font-size: var(--pt-2xl); font-weight: var(--fw-extra); margin-top: var(--sp-2); max-width: 22ch; letter-spacing: -0.02em; line-height: 1.1; }
.pt-sobre-bloco > .pt-sub { color: var(--muted); margin-top: var(--sp-3); max-width: 58ch; }
.pt-sobre-rotulo { font-size: var(--pt-xs); font-weight: var(--fw-extra); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-top: var(--sp-10); }
.pt-sobre-bloco > h2 + .pt-sobre-rotulo, .pt-sobre-bloco > .pt-sub + .pt-sobre-rotulo { margin-top: var(--sp-5); }
.pt-numeros-sobre { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); list-style: none; margin: var(--sp-6) 0 0; padding: 0; }
.pt-numeros-sobre li { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sombra-card); padding: var(--sp-4); }
.pt-numeros-sobre b { display: block; font-family: var(--fonte-titulo); font-size: clamp(2rem, 1.4rem + 2.6cqi, 3.25rem); font-weight: var(--fw-extra);
                      letter-spacing: -0.04em; line-height: 1; color: var(--accent-text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pt-numeros-sobre span { display: block; font-size: var(--pt-sm); color: var(--muted); margin-top: var(--sp-2); line-height: 1.35; }
.pt-marcos { list-style: none; margin: var(--sp-6) 0 0; padding: 0; position: relative; }
.pt-marcos li { position: relative; padding: 0 0 var(--sp-6) 40px; }
.pt-marcos li:last-child { padding-bottom: 0; }
.pt-marcos li::before { content: ""; position: absolute; left: 8px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); border: 3px solid var(--accent); }
.pt-marcos li::after { content: ""; position: absolute; left: 15px; top: 26px; bottom: -4px; width: 2px; background: var(--border2); }
.pt-marcos li:last-child::after { display: none; }
.pt-ano { font-size: var(--pt-sm); font-weight: var(--fw-extra); color: var(--accent-text); letter-spacing: 0.02em; }
.pt-marcos h3 { font-size: var(--pt-lg); font-weight: var(--fw-extra); margin-top: 2px; }
.pt-marcos p { font-size: var(--pt-sm); color: var(--muted); margin-top: 2px; max-width: 40ch; }
.pt-beneficios { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
.pt-beneficio { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sombra-card); padding: var(--sp-4); }
.pt-beneficio .cab { display: flex; gap: var(--sp-3); align-items: center; }
.pt-beneficio h3 { font-size: var(--pt-lg); font-weight: var(--fw-extra); }
.pt-beneficio ul { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: 6px; font-size: var(--pt-sm); }
.pt-beneficio li { display: flex; gap: var(--sp-2); align-items: flex-start; }
.pt-beneficio li svg { flex: none; color: var(--green); margin-top: 3px; }
.pt-carreira { display: grid; list-style: none; margin: var(--sp-5) 0 0; padding: 0; counter-reset: cargo; }
.pt-carreira li { display: grid; grid-template-columns: 44px 1fr; gap: var(--sp-3); padding: var(--sp-3) 0; position: relative; }
.pt-carreira li + li::before { content: ""; position: absolute; left: 21px; top: -14px; width: 2px; height: 28px; background: var(--accent-borda); }
.pt-carreira b { display: block; }
.pt-carreira span.t { font-size: var(--pt-sm); color: var(--muted); }
.pt-final { margin-top: var(--ritmo); padding: var(--sp-6); border-radius: var(--r-lg); background: var(--banda); color: var(--banda-texto); display: grid; gap: var(--sp-4); }
.pt-final h2 { font-size: var(--pt-2xl); font-weight: var(--fw-extra); max-width: 20ch; line-height: 1.1; }
.pt-final p { color: var(--banda-suave); max-width: 46ch; }
.pt-final a.pt-botao { background: var(--banda-texto); color: var(--banda); justify-self: start; }

/* rodapé */
.pt-rodape { border-top: 1px solid var(--border); padding: var(--sp-5) var(--sp-4); text-align: center; font-size: var(--pt-xs);
             color: var(--muted); }
.pt-rodape nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--sp-4); margin-top: var(--sp-2); }
/* Area de toque de 44px no celular (o texto continua pequeno; so a caixa clicavel cresce). */
.pt-rodape nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--sp-1); }

/* ---- desktop ---- */
@container portal (min-width: 768px) {
  .pt-topo-nav .so-desktop { display: inline-flex; }
  .pt-wrap, .pt-topo-in { padding-left: var(--sp-8); padding-right: var(--sp-8); }
  .pt-hero { padding: var(--sp-16) 0 var(--sp-20); border-radius: 0 0 var(--r-hero-lg) var(--r-hero-lg); }
  .pt-padrao { -webkit-mask-image: radial-gradient(ellipse 75% 70% at 100% 100%, var(--mascara), transparent 72%);
               mask-image: radial-gradient(ellipse 75% 70% at 100% 100%, var(--mascara), transparent 72%); }
  .pt-hero-topo { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--sp-16); align-items: end; }
  .pt-numeros { margin-top: 0; border-top: 0; grid-template-columns: 1fr; }
  .pt-numeros li { display: grid; grid-template-columns: 150px 1fr; align-items: baseline; padding: var(--sp-4) 0; border-top: 1px solid var(--banda-linha); }
  .pt-numeros li + li { padding-left: 0; border-left: 0; }
  .pt-numeros span { margin: 0; }
  .pt-mini { margin-top: calc(-1 * var(--sp-10)); }
  .pt-mini .pt-trilha { max-width: 760px; }
  .pt-card { padding: var(--sp-6); }
  .pt-lista { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .pt-areas { margin-left: 0; margin-right: 0; padding-left: 0; overflow: visible; flex-wrap: wrap; }
  .pt-trilha.compacta .rot { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .pt-trilha .pt-aqui { top: calc(32px + var(--sp-2) + 1.6em); }

  /* página da vaga */
  .pt-hero-vaga { padding: var(--sp-6) 0 var(--sp-12); }
  .pt-stats { grid-template-columns: repeat(4, 1fr); max-width: 860px; }
  .pt-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-8); align-items: start; margin-top: var(--sp-8); }
  .pt-lateral { display: grid; gap: var(--sp-4); position: sticky; top: var(--sp-4); }
  .pt-bens { grid-template-columns: repeat(3, 1fr); }
  .pt-dois { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .pt-cta-fixo { display: none; }

  /* fluxograma na horizontal: uma coluna por etapa que a vaga tem */
  .pt-fluxo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
  .pt-fluxo[data-etapas="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pt-fluxo[data-etapas="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pt-fluxo > li { display: flex; flex-direction: column; padding: 0 var(--sp-3) 0 0; }
  .pt-fluxo > li:last-child { padding: 0; }
  .pt-fluxo .pt-no { flex-direction: row; align-items: center; margin-bottom: var(--sp-3); }
  .pt-fluxo .pt-cano { flex: 1; width: auto; height: 4px; margin: 0 0 0 4px;
                       background: repeating-linear-gradient(to right, var(--border2) 0 6px, transparent 6px 12px); }
  .pt-fluxo li.feito .pt-cano { background: var(--accent); }
  .pt-fluxo > li .pt-etapa { flex: 1; }
  .pt-fluxo .pt-etapa-rotulo { flex-wrap: wrap; justify-content: flex-start; }
  .pt-fluxo .pt-etapa dl { grid-template-columns: 1fr; gap: 0; }
  .pt-fluxo .pt-etapa dt { font-size: var(--pt-xs); margin-top: var(--sp-2); }

  /* confirmação */
  .pt-proximos { grid-template-columns: repeat(3, 1fr); }
  .pt-proximos[data-etapas="1"] { grid-template-columns: minmax(0, 1fr); }
  .pt-proximos[data-etapas="2"] { grid-template-columns: repeat(2, 1fr); }
  .pt-proximos[data-etapas="4"] { grid-template-columns: repeat(2, 1fr); }
  .pt-proximo { grid-template-columns: 1fr; }
  .pt-acoes { grid-template-columns: auto auto; justify-content: center; }
  .pt-botoes-empilhados { grid-template-columns: 1fr 1fr; }

  /* sobre */
  .pt-numeros-sobre { grid-template-columns: repeat(4, 1fr); }
  .pt-numeros-sobre[data-itens="3"] { grid-template-columns: repeat(3, 1fr); }
  .pt-numeros-sobre[data-itens="2"] { grid-template-columns: repeat(2, 1fr); }
  .pt-marcos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sp-4); }
  .pt-marcos::before { content: ""; position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; background: var(--border2); }
  .pt-marcos li { padding: 44px 0 0 0; }
  .pt-marcos li::before { left: 0; top: 6px; }
  .pt-marcos li::after { display: none; }
  .pt-beneficios { grid-template-columns: repeat(3, 1fr); }
  .pt-carreira { grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sp-4); }
  .pt-carreira li { grid-template-columns: 1fr; padding: 0; }
  .pt-carreira li + li::before { display: none; }
  .pt-final { grid-template-columns: 1fr auto; align-items: center; padding: var(--sp-10); }

  /* formulário e demais */
  .pt-arquivo { flex-wrap: nowrap; }
  .pt-arquivo-acoes { width: auto; border-top: 0; padding-top: 0; }
  .pt-revisao { grid-template-columns: 180px 1fr; }
  .pt-revisao dt { margin-top: 0; }
}

/* ---------- implementação (Fase 1) ---------- */
/* faixa "Ambiente teste" (não existe em produção) */
.pt-faixa-ambiente { background: var(--amber); color: var(--sobre-cor); text-align: center; font-size: var(--pt-xs); font-weight: var(--fw-forte); padding: 2px var(--sp-2); }
/* filtros: <details> (funciona sem JS); no celular a folha abre por baixo do botão */
.pt-filtros { margin-top: var(--sp-3); }
.pt-filtros > summary { list-style: none; display: inline-flex; }
.pt-filtros > summary::-webkit-details-marker { display: none; }
.pt-filtros[open] > .pt-folha { margin-top: var(--sp-3); }
.pt-opcao { display: inline-flex; align-items: center; position: relative; }
.pt-opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pt-opcao:has(input:checked) { border-color: var(--accent); background: var(--accent-light); color: var(--accent-text); font-weight: var(--fw-media); }
.pt-opcao:has(input:focus-visible) { outline: 3px solid var(--accent-hover); outline-offset: 2px; }
.pt-chip { text-decoration: none; }
.espaco-portal { margin-top: var(--sp-5); }
/* candidatura: com JS, uma etapa por vez; sem JS, tudo visível */
.js .pt-form [data-passo]:not([data-atual]) { display: none; }
.pt-so-js { display: none; }
.js .pt-so-js { display: flex; }
.js .pt-bloco.pt-so-js { display: block; }
.pt-upload { position: relative; }
.pt-upload:focus-within { outline: 3px solid var(--accent-hover); outline-offset: 2px; }
.pt-upload-erro span { color: var(--red); }
.pt-textarea { min-height: 96px; padding: var(--sp-2) var(--sp-3); resize: vertical; }
.pt-pergunta.com-erro .pt-escolha { border-color: var(--red); }
.pt-aceite.com-erro { border-color: var(--red); }
.pt-link { background: none; border: 0; padding: 0; color: var(--accent-text); font: inherit; font-size: var(--pt-sm); font-weight: var(--fw-media); text-decoration: underline; cursor: pointer; }
.pt-turnstile { margin-top: var(--sp-4); }
.pt-pergunta { border: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.pt-botao[disabled] { opacity: .6; cursor: progress; }

/* =============================================================================
   PROPOSTA DE TRABALHO: carta e páginas do link (/vagas/proposta/<token>)  ·  prefixo .cp-
   Mockup aprovado em 07/10/2026: design-system/mockups/aprovados/mockup_proposta_fluxo_candidato.html
   (e a carta no modelo B: mockup_proposta_trabalho_B). Celular primeiro; colunas por container query.
   Reaproveita .pt-* (botão, rodapé, alerta, topo) e os tokens do portal; só o que é novo leva .cp-.
   ============================================================================= */
.cp-wrap { max-width: 880px; margin: 0 auto; padding: 0 var(--sp-4); }
.cp-logo { display: block; height: 44px; }
.cp-logo img { height: 100%; width: auto; display: block; }

/* ---- faixa azul (hero) com o logo claro ---- */
.cp-hero { position: relative; overflow: hidden; background: var(--banda); color: var(--banda-texto);
           border-radius: 0 0 var(--r-hero) var(--r-hero); padding: var(--sp-5) 0 var(--sp-10); }
.cp-hero > .cp-wrap { position: relative; }
.cp-pilula { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-5); font-size: var(--pt-xs);
             font-weight: var(--fw-forte); background: var(--banda-chip); border: 1px solid var(--banda-linha);
             border-radius: var(--r-pill); padding: 6px 14px; color: var(--banda-texto); }
.cp-titulo { font-size: var(--pt-2xl); font-weight: var(--fw-extra); letter-spacing: -0.025em; line-height: 1.1;
             margin-top: var(--sp-4); color: var(--banda-texto); max-width: 20ch; overflow-wrap: anywhere; }
.cp-lead { font-size: var(--pt-md); color: var(--banda-suave); margin-top: var(--sp-4); max-width: 50ch; overflow-wrap: anywhere; }
.cp-lead b { color: var(--banda-texto); }

/* ---- corpo: os cartões sobem sobre a faixa azul ---- */
.cp-corpo { position: relative; margin-top: calc(-1 * var(--sp-6)); display: grid; gap: var(--sp-3); padding-bottom: var(--sp-8); }
.cp-grade { display: grid; gap: var(--sp-3); }
.cp-c { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sombra-card);
        padding: var(--sp-4) var(--sp-5); }
.cp-c small { display: block; font-size: var(--pt-xs); font-weight: var(--fw-extra); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cp-c strong { display: block; font-size: var(--pt-lg); font-weight: var(--fw-extra); line-height: 1.25; margin-top: 2px; overflow-wrap: anywhere; }
.cp-c .sub { display: block; font-size: var(--pt-sm); color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.cp-sal { background: var(--banda); border-color: var(--banda-linha); color: var(--banda-texto); }
.cp-sal small, .cp-sal .sub { color: var(--banda-suave); }
.cp-sal strong { font-size: var(--pt-2xl); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cp-prazo { background: var(--amber-bg); border-color: var(--amber-borda); }
.cp-prazo strong { color: var(--amber); }
.cp-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.cp-chips li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--pt-sm); font-weight: var(--fw-media);
               background: var(--card2); border-radius: var(--r-pill); padding: 6px 14px; overflow-wrap: anywhere; }
.cp-chips svg { color: var(--accent-text); flex: none; }

/* mensagem curta do RH (opcional) */
.cp-msg { background: var(--card); border: 1px solid var(--border); border-left: 5px solid var(--accent); border-radius: var(--r-lg);
          padding: var(--sp-4) var(--sp-5); }
.cp-msg p { font-size: var(--pt-md); overflow-wrap: anywhere; }
.cp-msg footer { font-size: var(--pt-xs); color: var(--muted); margin-top: var(--sp-2); font-weight: var(--fw-media); }

/* avisos */
.cp-aviso { display: grid; grid-template-columns: 28px 1fr; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-ml);
            font-size: var(--pt-sm); background: var(--accent-light); border: 1px solid var(--accent-borda); }
.cp-aviso svg { color: var(--accent-text); margin-top: 1px; }
.cp-aviso b { color: var(--text); }
.cp-aviso.ambar { background: var(--amber-bg); border-color: var(--amber-borda); }
.cp-aviso.ambar svg { color: var(--amber); }
.cp-seguranca { display: grid; grid-template-columns: 20px 1fr; gap: var(--sp-2); font-size: var(--pt-xs); color: var(--muted); padding: 0 var(--sp-1); }
.cp-seguranca svg { margin-top: 2px; }
.cp-pendente { background: var(--amber-bg); color: var(--amber); border-radius: var(--r-sm); padding: 0 4px; font-weight: var(--fw-media); }

/* responder à proposta */
.cp-resp { background: var(--card2); border: 1px solid var(--border); border-radius: var(--r-cta); padding: var(--sp-5); display: grid; gap: var(--sp-4); }
.cp-resp h2 { font-size: var(--pt-xl); font-weight: var(--fw-extra); }
.cp-resp p { font-size: var(--pt-sm); color: var(--muted); }
.cp-resp p b { color: var(--text); }
.cp-acoes { display: grid; gap: var(--sp-2); }
.cp-acoes .pt-botao { width: 100%; }
.cp-acoes.centro { max-width: 420px; margin: 0 auto; width: 100%; }
.cp-previa [aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

/* barra fixa do celular */
.cp-fixo { position: sticky; bottom: 0; z-index: 5; margin: 0 calc(-1 * var(--sp-4)); padding: var(--sp-3) var(--sp-4) var(--sp-4);
           background: var(--card-solido); border-top: 1px solid var(--border2); border-radius: var(--r-cta) var(--r-cta) 0 0;
           box-shadow: var(--sombra-cta); display: flex; align-items: center; gap: var(--sp-3); }
.cp-fixo .t { font-size: var(--pt-xs); color: var(--muted); line-height: 1.3; font-weight: var(--fw-media); }
.cp-fixo .t b { display: block; color: var(--text); font-size: var(--pt-sm); }
.cp-fixo .pt-botao { flex: 1; }

/* páginas de estado (aceita, dúvidas, expirada, inválida, cancelada, encerrada) */
.cp-pagina { display: grid; gap: var(--sp-4); max-width: 880px; margin: 0 auto; padding: 0 var(--sp-4) var(--sp-10); }
.cp-pagina > .cp-nao-imprimir { display: grid; gap: var(--sp-4); }
.cp-estado { text-align: center; padding: var(--sp-8) 0 var(--sp-2); }
.cp-estado-icone { width: 84px; height: 84px; margin: 0 auto var(--sp-5); border-radius: 50%; display: grid; place-items: center; color: var(--card-solido); }
.cp-estado-icone.ok { background: var(--green); box-shadow: 0 0 0 10px var(--green-bg); }
.cp-estado-icone.info { background: var(--accent); color: var(--sobre-cor); box-shadow: 0 0 0 10px var(--accent-light); }
.cp-estado-icone.amb { background: var(--amber); box-shadow: 0 0 0 10px var(--amber-bg); }
.cp-estado-icone.neu { background: var(--muted); box-shadow: 0 0 0 10px var(--neutro-bg); }
.cp-estado h1 { font-size: var(--pt-2xl); font-weight: var(--fw-extra); letter-spacing: -0.03em; }
.cp-estado p { color: var(--muted); margin: var(--sp-3) auto 0; max-width: 46ch; overflow-wrap: anywhere; }
.cp-estado p b { color: var(--text); }
.cp-estado .cp-acoes { max-width: 420px; margin: var(--sp-6) auto 0; }
.cp-contato { margin-top: var(--sp-5); font-size: var(--pt-sm); color: var(--muted); text-align: center; }
.cp-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.cp-passos li { display: grid; grid-template-columns: 40px 1fr; gap: var(--sp-3); background: var(--card); border: 1px solid var(--border);
                border-radius: var(--r-ml); padding: var(--sp-4); }
.cp-passos .n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: var(--fw-extra);
                background: var(--accent-light); color: var(--accent-text); border: 2px solid var(--accent-borda); }
.cp-passos h3 { font-size: var(--pt-md); font-weight: var(--fw-extra); }
.cp-passos p { font-size: var(--pt-sm); color: var(--muted); margin-top: 2px; }
.cp-selo-aceite { display: flex; gap: var(--sp-3); align-items: center; background: linear-gradient(var(--green-bg), var(--green-bg)), var(--card-solido); border: 1px solid var(--green);
                  color: var(--text); border-radius: var(--r-ml); padding: var(--sp-3) var(--sp-4); font-size: var(--pt-sm); }
.cp-selo-aceite svg { color: var(--green); flex: none; }
.cp-h2 { font-size: var(--pt-xl); font-weight: var(--fw-extra); margin-top: var(--sp-4); }

/* confirmação do aceite (segundo passo): cartão central, em página própria */
.cp-folha { display: grid; gap: var(--sp-4); max-width: 520px; width: 100%; margin: var(--sp-6) auto 0; background: var(--card-solido);
            border: 1px solid var(--border2); border-radius: var(--r-hero); padding: var(--sp-6) var(--sp-5); box-shadow: var(--sombra-folha); }
.cp-folha h1 { font-size: var(--pt-xl); font-weight: var(--fw-extra); }
.cp-folha p { font-size: var(--pt-sm); color: var(--muted); }
.cp-resumo { margin: 0; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border2); border-radius: var(--r-md); display: grid;
             gap: var(--sp-1); font-size: var(--pt-sm); background: var(--card2); }
.cp-resumo div { display: flex; justify-content: space-between; gap: var(--sp-3); }
.cp-resumo dt { color: var(--muted); }
.cp-resumo dd { margin: 0; font-weight: var(--fw-forte); text-align: right; overflow-wrap: anywhere; }
.cp-confirma { display: grid; grid-template-columns: 28px 1fr; gap: var(--sp-3); font-size: var(--pt-sm); align-items: start; cursor: pointer; }
.cp-confirma input { width: 24px; height: 24px; margin: 0; accent-color: var(--accent); }

/* pré-visualização no painel do RH: a carta fica dentro do quadro .fone (rh.css); botões inertes */
.cp-quadro { min-height: 0; }
.cp-imprime-nota { display: none; }

/* ---- desktop (container >= 768px) ---- */
@container portal (min-width: 768px) {
  .cp-wrap, .cp-pagina { padding-left: var(--sp-8); padding-right: var(--sp-8); }
  .cp-hero { padding: var(--sp-8) 0 var(--sp-16); border-radius: 0 0 var(--r-hero-lg) var(--r-hero-lg); }
  .cp-corpo { margin-top: calc(-1 * var(--sp-10)); }
  .cp-grade { grid-template-columns: repeat(6, 1fr); }
  .cp-g4 { grid-column: span 4; } .cp-g2 { grid-column: span 2; } .cp-g3 { grid-column: span 3; } .cp-g6 { grid-column: span 6; }
  .cp-resp { grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: var(--sp-6); }
  .cp-resp .cp-txt { display: grid; gap: var(--sp-2); }
  .cp-fixo { display: none; }
  .cp-passos { grid-template-columns: repeat(3, 1fr); }
  .cp-passos li { grid-template-columns: 1fr; }
}

/* ---- impressão / salvar em PDF: A4, uma página, só a carta (sem botões, topo, rodapé nem páginas de estado) ---- */
@page { size: A4; margin: 10mm; }
@media print {
  .pt-faixa-ambiente, .pt-faixa-marca, .pt-topo, .pt-rodape, .cp-fixo, .cp-nao-imprimir, .cp-seguranca, .cp-pagina { display: none !important; }
  [data-area="portal"] { background: var(--imp-fundo) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; font-size: 10pt; line-height: 1.4; }
  .cp-hero { border-radius: 0; padding: 6mm 0 9mm; }
  .cp-hero .pt-padrao { display: none; }
  .cp-titulo { font-size: 20pt; max-width: none; }
  .cp-lead { font-size: 10pt; margin-top: 2mm; max-width: none; }
  .cp-pilula { margin-top: 3mm; font-size: 8pt; }
  .cp-logo { height: 12mm; }
  .cp-corpo { margin-top: -4mm; gap: 2.5mm; padding-bottom: 0; }
  .cp-grade { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2.5mm; }
  .cp-g4 { grid-column: span 4; } .cp-g2 { grid-column: span 2; } .cp-g3 { grid-column: span 3; } .cp-g6 { grid-column: span 6; }
  .cp-c { padding: 3mm 4mm; box-shadow: none; break-inside: avoid; }
  .cp-c small { font-size: 7pt; } .cp-c strong { font-size: 11pt; } .cp-c .sub { font-size: 8.5pt; }
  .cp-sal strong { font-size: 16pt; }
  /* Pior caso conferido em 18/10/2026 (cargo de 100 caracteres, 15 benefícios, mensagem de 280, carta aceita): 1 página. */
  .cp-chips { gap: 1.5mm; margin-top: 2mm; }
  .cp-chips li { font-size: 8.5pt; padding: 1mm 3mm; }
  .cp-msg, .cp-aviso, .cp-selo-aceite { padding: 3mm 4mm; font-size: 9pt; break-inside: avoid; }
  .cp-msg p { font-size: 9.5pt; }
  .cp-resp { display: none !important; }
  .cp-imprime-nota { display: block; font-size: 8.5pt; color: var(--imp-nota); border-top: 1px solid var(--imp-linha); padding-top: 3mm; }
}