@import url("../_ds/design-system-2-34c5ae12-8f06-4bcd-b619-6a224752f3ad/styles.css"); body{background:var(--white)}.site-header{border-bottom:1px solid var(--border-subtle);position:sticky;top:0;background:var(--white);z-index:var(--layer-menu)}.site-header>div{align-items:center;display:flex;justify-content:space-between;margin:auto;max-width:var(--container-lg);min-height:var(--space-20);padding-inline:var(--space-6)}.site-header img{height:56px;width:auto}.site-header nav{display:flex;gap:var(--space-6)}.site-header a{text-decoration:none}.hero{background:var(--night-700);color:var(--night-100);padding-block:var(--space-20)}.hero h1{color:var(--white);font-size:var(--text-h1);max-width:16ch}.hero p{font-size:var(--text-body-lg);max-width:var(--measure-prose)}.hero .ct-button{margin-top:var(--space-6)}.section{padding-block:var(--space-16)}.section.dark{background:var(--night-700);color:var(--night-100)}.section.dark h2{color:var(--white)}.lead{font-size:var(--text-body-lg);max-width:var(--measure-prose)}.process{counter-reset:steps}.process>div{display:grid;gap:var(--space-6);grid-template-columns:var(--space-12) 1fr;padding-block:var(--space-6)}.process>div+div{border-top:1px solid var(--border-subtle)}.process>div::before{color:var(--violet-500);content:counter(steps,decimal-leading-zero);counter-increment:steps;font-family:var(--font-display);font-size:var(--text-h3);font-weight:800}.evidence{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-10)}.quote{border-left:var(--space-1) solid var(--precision-500);font-size:var(--text-h3);padding-left:var(--space-6)}.cta{background:var(--violet-050);padding-block:var(--space-16)}footer.site-footer{background:var(--night-900);color:var(--night-200);padding-block:var(--space-10)}@media(max-width:48rem){.site-header nav{display:none}.evidence{grid-template-columns:1fr}.hero h1{font-size:var(--text-h1)}} .lead-form{display:grid;gap:var(--space-4) var(--space-6);grid-template-columns:1fr 1fr;margin-top:var(--space-8);max-width:52rem}.lead-form .full,.lead-form button,.lead-form .form-note,.lead-form .form-confirm{grid-column:1/-1}.lead-form button{justify-self:start}.form-note{color:var(--text-muted);font-size:var(--text-body-sm);margin:0}/* Envio aceito: o formulario inteiro da lugar ao painel de obrigado, no mesmo lugar (padrao de formulario de contato B2B; modal teria de ser fechado e cobriria a pagina). Ate 25/09/2026 era uma linha verde embaixo do botao, com os campos limpos em cima, e passava despercebida. */ .lead-form--enviado>:not(.form-confirm){display:none!important} .form-confirm{align-items:center;background:var(--surface-page);border-radius:var(--radius-lg);display:grid;gap:var(--space-2);justify-items:center;padding:var(--space-12) var(--space-6);text-align:center} .form-confirm[hidden]{display:none} .form-confirm:focus{outline:none} .form-confirm__icone{background:var(--success-100);block-size:56px;border-radius:var(--radius-pill);color:var(--success-500);inline-size:56px;margin-bottom:var(--space-2);padding:14px} .form-confirm strong{color:var(--text-strong);font-family:var(--font-display);font-size:1.5rem;letter-spacing:-.02em;line-height:1.2} .form-confirm span{color:var(--text-body);font-size:var(--text-body-lg);line-height:1.5;max-width:36ch}.crit-row{display:grid;gap:var(--space-4);grid-template-columns:var(--space-12) 1fr}.crit-row dt{color:var(--violet-500);font-family:var(--font-display);font-weight:800}.crit-row dd{margin:0}.site-footer img{height:56px;width:auto}@media(max-width:48rem){.lead-form{grid-template-columns:1fr}} .wa-widget{align-items:center;animation:wa-pula 1.6s cubic-bezier(.28,.84,.42,1) infinite;background:#25d366;border:0;border-radius:50%;bottom:var(--space-6);box-shadow:var(--shadow-xl);color:var(--white);cursor:pointer;display:flex;height:72px;justify-content:center;padding:0;position:fixed;right:var(--space-6);transition:background .25s,transform .25s;width:72px;z-index:var(--layer-toast)}.wa-widget:hover{background:#1faf54;transform:scale(1.08)}.wa-widget>svg{height:32px;position:relative;width:32px;z-index:1}.wa-widget__ping{animation:wa-ping 2s cubic-bezier(0,0,.2,1) infinite;background:#25d366;border-radius:50%;inset:0;position:absolute}.wa-widget__ping--2{animation-delay:.5s;opacity:.5}@keyframes wa-ping{0%{opacity:.5;transform:scale(1)}75%,100%{opacity:0;transform:scale(2)}}@keyframes wa-pula{0%,20%,53%,100%{transform:translateY(0)}40%,43%{transform:translateY(-7px)}70%{transform:translateY(-4px)}90%{transform:translateY(-1px)}}.wa-widget__badge{align-items:center;background:var(--danger-500);border-radius:50%;color:var(--white);display:flex;font-size:11px;font-weight:700;height:18px;justify-content:center;line-height:1;position:absolute;right:-1px;top:-1px;width:18px;z-index:1}.wa-panel{background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);bottom:calc(var(--space-6) + 72px + var(--space-3));box-shadow:var(--shadow-xl);max-height:calc(100vh - 140px);max-height:calc(100dvh - 140px);max-width:calc(100vw - var(--space-8));overflow-y:auto;padding:var(--space-5);position:fixed;right:var(--space-6);width:21rem;z-index:var(--layer-toast)}.wa-widget.is-context-hidden~.wa-panel,.wa-widget.is-menu-hidden~.wa-panel{display:none}.wa-panel__topo{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--space-2)}.wa-panel__topo strong{font-family:var(--font-display);font-size:var(--text-body-lg)}.wa-panel__fechar{align-items:center;background:none;border:0;color:var(--text-muted);cursor:pointer;display:flex;height:32px;justify-content:center;margin-right:calc(var(--space-2)*-1);padding:0;width:32px}.wa-panel__fechar:hover{color:var(--text-strong)}.wa-panel__lead{color:var(--text-body);font-size:var(--text-body-sm);line-height:1.5;margin:0 0 var(--space-4)}.wa-panel form{display:grid;gap:var(--space-3)}.wa-panel .ct-field>label{color:var(--text-muted);font-size:var(--text-caption);font-weight:600}.wa-panel .ct-field input{font-size:16px;min-height:var(--space-10)}.wa-panel__pote{height:1px;left:-9999px;overflow:hidden;position:absolute;top:auto;width:1px}.wa-panel__enviar{align-items:center;background:#25d366;border:0;border-radius:var(--radius-md);color:var(--white);cursor:pointer;display:flex;font-family:var(--font-display);font-size:var(--text-body-sm);font-weight:700;gap:var(--space-2);justify-content:center;min-height:48px;padding:var(--space-3) var(--space-4);width:100%}.wa-panel__enviar:hover{background:#1faf54}.wa-panel__enviar[disabled]{cursor:progress;opacity:.7}.wa-panel__enviar>svg{height:18px;width:18px}@media(max-width:48rem){.wa-widget{bottom:16px;height:64px;right:16px;width:64px}.wa-widget>svg{height:30px;width:30px}.wa-panel{bottom:calc(16px + 64px + var(--space-3));max-height:calc(100dvh - 120px);max-width:21rem;right:16px;width:calc(100vw - 32px)}}@media(prefers-reduced-motion:reduce){.wa-widget__ping{animation:none;display:none}.wa-widget{animation:none;transition:none}} /* O container do design system nasce em 75rem (1200px), mas o hero da Home ja usava 1320px: o site inteiro ficava mais estreito que a propria abertura, e sobrava faixa branca dos dois lados em tela grande. 1320px alinha as duas medidas. Texto corrido nao acompanha: quem le paragrafo continua limitado por max-width em ch no proprio bloco. */ .ct-container{max-width:1320px} /* O "Portal de Vagas" e botao proprio no nav, como no site em producao: fica ao lado do CTA, com contorno, e nao mais um link no meio dos outros. */ .ct-main-nav__vagas:hover{background:var(--violet-050);color:var(--violet-700)} @media(max-width:64rem){.ct-main-nav__vagas{display:none!important}} .ct-mobile-menu .ct-mobile-menu__vagas{border:2px solid var(--violet-500);color:var(--violet-700);margin-top:8px;text-align:center} .lead-form__pote{height:1px;left:-9999px;overflow:hidden;position:absolute;top:auto;width:1px}.lead-form .ct-error{grid-column:1/-1;margin:0}.lead-form button[disabled]{cursor:default} .ct-cookie{align-items:flex-start;background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);bottom:var(--space-6);box-shadow:var(--shadow-xl);display:flex;gap:var(--space-3);left:var(--space-6);max-width:28rem;padding:var(--space-4) var(--space-5);position:fixed;z-index:var(--layer-toast)}.ct-cookie p{color:var(--text-body);font-size:var(--text-body-sm);line-height:1.55;margin:0}.ct-cookie a{color:var(--text-link);font-weight:600}.ct-cookie__fechar{align-items:center;background:none;border:0;color:var(--text-muted);cursor:pointer;display:flex;flex-shrink:0;height:32px;justify-content:center;margin:calc(var(--space-1)*-1) calc(var(--space-2)*-1) 0 0;padding:0;width:32px}.ct-cookie__fechar:hover{color:var(--text-strong)}@media(max-width:48rem){.ct-cookie{bottom:16px;left:16px;max-width:none;right:calc(16px + 64px + var(--space-3))}} .vg-linha{align-items:baseline;border-top:1px solid var(--border-default);color:inherit;display:grid;gap:8px 24px;grid-template-columns:1fr auto;padding:24px 8px;text-decoration:none;transition:background .2s}.vg-linha:last-child{border-bottom:1px solid var(--border-default)}.vg-linha:hover{background:var(--surface-page);color:inherit}.vg-linha__texto strong{color:var(--text-strong);font-family:var(--font-display);font-size:20px;letter-spacing:-.02em}.vg-linha__texto>span{color:var(--text-muted);display:block;font-size:14px;margin-top:4px}.vg-linha__salario{color:var(--text-body);font-weight:600;white-space:nowrap}.vg-linha__seta{color:var(--precision-500);font-weight:600}.vg-linha--lista{border-bottom:1px solid var(--border-default);border-top:0;gap:6px 24px;grid-template-columns:1fr auto auto}[data-vagas="outras"] .vg-linha{gap:6px 24px;padding:20px 8px}[data-vagas="outras"] .vg-linha__texto strong{font-size:18px;letter-spacing:0}[data-vagas="outras"] .vg-linha__texto>span{margin-top:2px}[data-vagas="outras"] .vg-linha:hover{background:var(--white)}[data-vagas="cards"]:empty{min-height:20rem}[data-vagas="linhas"]:empty,[data-vagas="outras"]:empty{min-height:18rem}.vg-status{color:var(--text-muted);margin:0;padding:40px 8px}.vg-aviso{background:var(--violet-050);border-left:var(--space-1) solid var(--violet-500);color:var(--text-strong);margin:0 0 var(--space-6);padding:var(--space-4)} [data-vagas][hidden],#vaga-encerrada[hidden]{display:none!important} [data-vagas="lista"]:empty::before{color:var(--text-muted);content:"Carregando as vagas abertas…";display:block;padding:40px 8px}#vaga-titulo:empty::before{content:"Carregando a vaga…"}#bc-vaga:empty::before{content:"Vaga"}#vaga-local:empty::before,#vaga-regime:empty::before,#vaga-salario:empty::before,#vaga-data:empty::before{content:"…"}#vaga-descricao:empty::before{color:var(--text-body);content:"Carregando a descrição completa da vaga…";display:block} /* Carrossel de vagas da Home (vagas.js, montarCarrossel). Setas, pausa e bolinhas NAO sao roxas: cada cartao ja tem o "Ver vaga" roxo, e o Roxo Vertice e um CTA por bloco. Estrutura em Azul Noite, foco em Azul Precisao. A margem negativa do trilho existe porque overflow-x corta o que passa da borda: a sombra do hover (--shadow-sm sobe 16px, desce 32px e abre 24px para os lados) e o anel de foco. A folga lateral e IGUAL ao vao entre os cartoes (--vc-vao): maior que ele, o cartao seguinte aparecia como uma tira cortada na borda direita (8px no desktop, 14px no tablet, ate 25/09/2026). No celular a espiada no proximo e de proposito (86%). */ [data-vagas="carrossel"]{margin-top:48px} [data-vagas="carrossel"]:empty{min-height:26rem} [data-vagas="carrossel"]:empty::before{color:var(--text-muted);content:"Carregando as vagas abertas…";display:block;padding:40px 8px} .vc{display:grid;gap:var(--space-4)} .vc__barra{align-items:center;display:flex;gap:var(--space-3);justify-content:space-between} .vc__status{color:var(--text-muted);font-size:var(--text-body-sm);margin:0} /* O carrossel pode vir escrito pelo servidor: a linha do contador ja nasce com altura, e nao pula quando o JS escreve. */ .vc__status:empty::before{content:"\00a0"} .vc__botoes{display:flex;gap:var(--space-2)} .vc__botao{align-items:center;background:var(--white);block-size:48px;border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-strong);cursor:pointer;display:inline-flex;inline-size:48px;justify-content:center;padding:0;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)} .vc__botao:hover{background:var(--violet-050);border-color:var(--violet-300);color:var(--violet-700)} .vc__botao:focus-visible,.vc__ponto:focus-visible{outline:3px solid var(--precision-500);outline-offset:3px} .vc__botao svg{block-size:20px;inline-size:20px} .vc__trilho{--vc-vao:24px;align-items:stretch;display:grid;gap:var(--vc-vao);grid-auto-columns:calc((100% - 2 * var(--vc-vao))/3);grid-auto-flow:column;list-style:none;margin:-16px calc(-1 * var(--vc-vao)) -32px;overflow-x:auto;overscroll-behavior-x:contain;padding:16px var(--vc-vao) 32px;scroll-padding-inline:var(--vc-vao);scroll-snap-type:x mandatory;scrollbar-width:none} .vc__trilho::-webkit-scrollbar{display:none} .vc__slide{display:flex;min-width:0;scroll-snap-align:start} .vc__slide>.ct-vagacard{flex:1;min-width:0} .vc__pontos{display:flex;flex-wrap:wrap;justify-content:center} .vc__ponto{background:none;block-size:44px;border:0;cursor:pointer;display:grid;inline-size:44px;padding:0;place-items:center} .vc__ponto::before{background:var(--border-strong);block-size:10px;border-radius:var(--radius-pill);content:"";inline-size:10px;transition:inline-size var(--dur-base) var(--ease-standard),background var(--dur-base) var(--ease-standard)} .vc__ponto[aria-current="true"]::before{background:var(--night-700);inline-size:28px} .vc--estatico .vc__barra,.vc--estatico .vc__pontos,.vc--sem-pontos .vc__pontos{display:none} @media(max-width:64rem){.vc__trilho{--vc-vao:18px;grid-auto-columns:calc((100% - var(--vc-vao))/2)}[data-vagas="carrossel"]{margin-top:32px}} @media(max-width:40rem){.vc__trilho{--vc-vao:16px;grid-auto-columns:86%}} @media(prefers-reduced-motion:reduce){.vc__trilho{scroll-behavior:auto}.vc__ponto::before{transition:none}} /* Detalhe da vaga: o titulo e a ficha entravam no lugar de "Carregando" e empurravam a descricao (CLS de 0,37 medido). A reserva e de duas linhas. */ #vaga-titulo:empty{min-height:2.04em} /* Portal: os botoes de UF chegam com a API e, na tela estreita, abriam uma linha nova na barra de filtros, empurrando a lista 58px (CLS de 0,142, medido com a API atrasada). Enquanto o span dos UFs esta vazio, um item do tamanho de quatro botoes guarda o lugar. */ #filtros:has([data-vagas-ufs]:empty)::after{block-size:38px;content:"";inline-size:236px} /* Celular: o salario ("R$ 4.137 a R$ 4.603") nao cabe ao lado do cargo e, com nowrap, estourava a linha nas LPs e nas "Outras oportunidades". Abaixo de 40rem ele desce para baixo do texto; na lista do Portal a seta fica. */ @media(max-width:40rem){.vg-linha{grid-template-columns:minmax(0,1fr)}.vg-linha--lista{grid-template-columns:minmax(0,1fr) auto}.vg-linha--lista .vg-linha__salario{grid-column:1;grid-row:2}.vg-linha--lista .vg-linha__seta{grid-column:2;grid-row:1/span 2;align-self:center}.vg-linha__salario{white-space:normal}} /* FAQ e Garantia nas LPs de cidade: as mesmas regras do