.elementor-kit-11{--e-global-color-primary:#06174E;--e-global-color-secondary:#0448AA;--e-global-color-text:#3A4670;--e-global-color-accent:#0767F1;--e-global-color-e80f268:#F3F6FB;--e-global-color-8733f05:#3A4670;--e-global-typography-primary-font-family:"Unbounded";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Bricolage Grotesque";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:600;background-color:#FFFFFF;font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;line-height:1.7em;--e-page-transition-entrance-animation:e-page-transition-fade-out;--e-page-transition-exit-animation:e-page-transition-fade-in;--e-page-transition-animation-duration:600ms;--e-preloader-animation-duration:1500ms;--e-preloader-delay:0ms;--e-preloader-color:#F3F6FB;--e-preloader-size:20px;}.elementor-kit-11 button,.elementor-kit-11 input[type="button"],.elementor-kit-11 input[type="submit"],.elementor-kit-11 .elementor-button{background-color:var( --e-global-color-accent );font-family:"Bricolage Grotesque", Sans-serif;font-size:14px;font-weight:600;color:var( --e-global-color-e80f268 );border-radius:999px 999px 999px 999px;padding:12px 24px 12px 24px;}.elementor-kit-11 button:hover,.elementor-kit-11 button:focus,.elementor-kit-11 input[type="button"]:hover,.elementor-kit-11 input[type="button"]:focus,.elementor-kit-11 input[type="submit"]:hover,.elementor-kit-11 input[type="submit"]:focus,.elementor-kit-11 .elementor-button:hover,.elementor-kit-11 .elementor-button:focus{background-color:var( --e-global-color-e80f268 );color:var( --e-global-color-accent );}.elementor-kit-11 e-page-transition{background-color:#06174E;}.elementor-kit-11 a{color:var( --e-global-color-accent );}.elementor-kit-11 a:hover{color:var( --e-global-color-secondary );}.elementor-kit-11 h1{color:var( --e-global-color-primary );font-family:"Unbounded", Sans-serif;font-size:46px;font-weight:700;line-height:1.4em;}.elementor-kit-11 h2{color:var( --e-global-color-primary );font-family:"Bricolage Grotesque", Sans-serif;font-size:32px;font-weight:700;line-height:1.25em;}.elementor-kit-11 h3{color:var( --e-global-color-primary );font-family:"Bricolage Grotesque", Sans-serif;font-size:28px;font-weight:600;}.elementor-kit-11 h4{color:var( --e-global-color-primary );font-family:"Bricolage Grotesque", Sans-serif;font-size:22px;font-weight:600;}.elementor-kit-11 h5{color:var( --e-global-color-primary );font-family:"Bricolage Grotesque", Sans-serif;font-size:18px;font-weight:600;}.elementor-kit-11 h6{color:var( --e-global-color-primary );font-family:"Bricolage Grotesque", Sans-serif;font-size:16px;font-weight:600;}.elementor-kit-11 img{border-radius:8px 8px 8px 8px;}.elementor-kit-11 input:not([type="button"]):not([type="submit"]),.elementor-kit-11 textarea,.elementor-kit-11 .elementor-field-textual{font-family:"Inter", Sans-serif;font-size:15px;font-weight:400;color:var( --e-global-color-8733f05 );border-radius:8px 8px 8px 8px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* Kit: sem CSS global. O CSS do site vive escopado no widget que o usa.
   Mega menu: widget Main Menu > Avancado > CSS personalizado (ver wordpress-config 5.1).
   Regra: nada de seletor global aqui sem comentario de origem e data. */

/* ============================================================
   INV Global Interaction Layer v1.7
   Origem: analise medida do xebia.com em 31/08/2026, em
   _temp-xebia-reference/visual/movimento-e-scroll.md e sistema-visual.md.
   v1.0 (31/08): transicao 300ms, underline sweep, hover de card, foco, reduced-motion.
   v1.1 (01/09): ritmo vertical por padding. REVERTIDO na v1.2, causou faixa branca.
   v1.3 (01/09): utilitarios .inv-on-dark, .inv-btn-row e .inv-note.
   v1.4 (02/09): secao 9, mapa heading -> familia (opcao D do Pedro).
   v1.5 (02/09): secao 10, hero. CSS morto, ancestral .inv-hero inexistente.
   v1.6 (02/09): secao 10 na direcao Stripe, peso 300 sobre video. ERRADA, ver v1.7.
   v1.7 (02/09): secao 10 = campo calmo. Peso 500, tipo sai de cima do movimento.
   Consome token do kit, nunca hex solto (regra do tokens-handoff).
   ATENCAO: escrever este bloco por add-custom-css APAGA o resto das settings do kit.
   Editar sempre por update-page-settings com o objeto completo. Ver wordpress-config 5.5.
   ============================================================ */

:root{
  --inv-dur: 300ms;
  --inv-ease: ease-in-out;
  --inv-underline-weight: 2px;
}

/* 1. Transicao padrao nas superficies interativas */
.elementor a,
.elementor .elementor-button,
.elementor .elementor-widget-image img,
.elementor .inv-card,
.elementor .inv-card img{
  transition:
    color var(--inv-dur) var(--inv-ease),
    background-color var(--inv-dur) var(--inv-ease),
    border-color var(--inv-dur) var(--inv-ease),
    box-shadow var(--inv-dur) var(--inv-ease),
    transform var(--inv-dur) var(--inv-ease),
    opacity var(--inv-dur) var(--inv-ease);
}

/* 2. Underline sweep: entra pela esquerda, sai pela direita.
   Escopo estreito: so link dentro de texto corrido. Nao toca botao nem navegacao. */
.elementor .elementor-widget-text-editor a:not(.elementor-button),
.elementor .elementor-widget-theme-post-content a:not(.elementor-button){
  position: relative;
  text-decoration: none;
}
.elementor .elementor-widget-text-editor a:not(.elementor-button)::before,
.elementor .elementor-widget-theme-post-content a:not(.elementor-button)::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  border-bottom: var(--inv-underline-weight) solid var(--e-global-color-accent);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform var(--inv-dur) var(--inv-ease);
  pointer-events: none;
}
.elementor .elementor-widget-text-editor a:not(.elementor-button):hover::before,
.elementor .elementor-widget-text-editor a:not(.elementor-button):focus-visible::before,
.elementor .elementor-widget-theme-post-content a:not(.elementor-button):hover::before,
.elementor .elementor-widget-theme-post-content a:not(.elementor-button):focus-visible::before{
  transform: scaleX(1);
  transform-origin: 0 50%;
}

/* 3. Hover de card: escala so na imagem, sem caixa, sem sombra. */
.elementor .inv-card{ overflow: hidden; }
.elementor .inv-card:hover img{ transform: scale(1.05); }

/* 4. Foco visivel. */
.elementor a:focus-visible,
.elementor .elementor-button:focus-visible{
  outline: 2px solid var(--e-global-color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* 5. .inv-on-dark (01/09/2026)
   Bloco com fundo escuro, video ou imagem: inverte texto para Cloud.
   A classe tem que ficar no WIDGET. Classe em CONTAINER nao renderiza
   (medido 02/09, duas vezes). Ver wordpress-config 5.8. */
.elementor .inv-on-dark .elementor-heading-title,
.elementor .inv-on-dark .elementor-widget-text-editor,
.elementor .inv-on-dark .elementor-widget-text-editor p,
.elementor .inv-on-dark .elementor-widget-text-editor li,
.elementor .inv-on-dark h1,
.elementor .inv-on-dark h2,
.elementor .inv-on-dark h3,
.elementor .inv-on-dark h4,
.elementor .inv-on-dark h5,
.elementor .inv-on-dark h6,
.elementor .inv-on-dark p,
.elementor .inv-on-dark li{
  color: var(--e-global-color-e80f268);
}
.elementor .inv-on-dark .elementor-widget-text-editor a:not(.elementor-button){
  color: var(--e-global-color-e80f268);
}
.elementor .inv-on-dark .elementor-widget-text-editor a:not(.elementor-button)::before{
  border-bottom-color: var(--e-global-color-e80f268);
}
.elementor .inv-on-dark a:focus-visible,
.elementor .inv-on-dark .elementor-button:focus-visible{
  outline-color: var(--e-global-color-e80f268);
}

/* 6. .inv-btn-row */
.elementor .inv-btn-row{
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
@media (max-width: 767px){
  .elementor .inv-btn-row{ flex-direction: column; align-items: flex-start; }
}

/* 7. .inv-note */
.elementor .inv-note{ display: none; }
.elementor-editor-active .inv-note,
.elementor-editor-preview .inv-note{
  display: block;
  opacity: 0.6;
  outline: 1px dashed var(--e-global-color-accent);
}

/* 8. Guarda de reduced-motion. */
@media (prefers-reduced-motion: reduce){
  .elementor *,
  .elementor *::before,
  .elementor *::after{
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  html{ scroll-behavior: auto !important; }
}

/* 9. Mapa heading -> familia (02/09/2026) — opcao D, recomendacao do Pedro Ramos.
   Unbounded fica confinada a Hero e H1; do H2 para baixo, Bricolage Grotesque.
   Precisa de CSS porque o widget Heading amarra a tipografia ao token Primary
   por padrao de fabrica (.elementor-widget-heading .elementor-heading-title,
   especificidade 0,2,0) e vence o Estilo do Tema (.elementor-kit-11 h2, 0,1,1).
   Medido em 02/09: h3-h6 renderizavam Unbounded 700 desde sempre. */
.elementor .elementor-widget-heading h2.elementor-heading-title,
.elementor .elementor-widget-heading h3.elementor-heading-title,
.elementor .elementor-widget-heading h4.elementor-heading-title,
.elementor .elementor-widget-heading h5.elementor-heading-title,
.elementor .elementor-widget-heading h6.elementor-heading-title{
  font-family: "Bricolage Grotesque", sans-serif;
}
.elementor .elementor-widget-heading h2.elementor-heading-title{ font-weight: 700; }
.elementor .elementor-widget-heading h3.elementor-heading-title,
.elementor .elementor-widget-heading h4.elementor-heading-title,
.elementor .elementor-widget-heading h5.elementor-heading-title,
.elementor .elementor-widget-heading h6.elementor-heading-title{ font-weight: 600; }

/* ============================================================
   10. HERO DA HOME (02/09/2026, rev.3) — CAMPO CALMO

   ERRO CORRIGIDO AQUI. A rev.2 pos Unbounded Light 300 a 54px sobre o video.
   Medido depois, amostrando o proprio video quadro a quadro por tras do texto:
     fundo MEDIO ....... Cloud 10,8 a 15,5:1  (parecia seguro)
     pixel MAIS CLARO .. Cloud 3,98:1 · tese #8FC0FF 2,29:1  (reprova)
   As faixas de luz do loop passam exatamente na area do titulo. Traco fino
   sobre luz em movimento e o pior caso possivel.

   A leitura errada que produziu a rev.2: tirei "peso leve e a norma" de 8 heros
   medidos e apliquei no unico contexto que nenhum deles usa. Vercel, Linear,
   Resend, Nearform e Stripe usam 300-400 sobre CAMPO CHAPADO (preto, quase
   preto, branco, creme). O unico com video atras do texto — thoughtworks.com —
   usa 700 e recua para 48px/1.42.

   O QUE AS REFERENCIAS REALMENTE FAZEM: o movimento nunca fica debaixo da letra.
   Vercel e Linear tem canvas, mas o tipo senta num campo calmo; a Xebia e a
   Anthropic poem a imagem ao lado ou abaixo, nunca atras.

   SOLUCAO: overlay em GRADIENTE (setting nativo do container, nao CSS) — Deep
   Navy opaco ate 40% da largura, dissolvendo para transparente em 94%. O texto
   senta em campo solido, com contraste DETERMINISTICO, e o video continua vivo
   na faixa direita. Peso volta para 500, o numero do Linear (510) e da Xebia.

   MEDIDO DEPOIS DA MUDANCA, pior pixel de 6 quadros sob a area do titulo:
     Cloud 8,21:1 · tese 4,73:1  (era 3,98 e 2,29)
   max-width 680px = 3 linhas. Em 620px dava 4, com "coordination" sozinha.
   ============================================================ */

.elementor .inv-hero-h1 .elementor-heading-title{
  font-size: 60px;
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.03em;
  max-width: 680px;
}
@media (max-width: 1024px){
  .elementor .inv-hero-h1 .elementor-heading-title{
    font-size: 44px;
    line-height: 1.1;
    max-width: 560px;
  }
}
@media (max-width: 767px){
  .elementor .inv-hero-h1 .elementor-heading-title{
    font-size: 32px;
    line-height: 1.14;
    letter-spacing: -0.022em;
    max-width: none;
  }
}

/* Corpo da hero: coluna mais estreita que o titulo, para nao invadir o video. */
.elementor .inv-hero-sub p{ max-width: 560px; }
@media (max-width: 767px){
  .elementor .inv-hero-sub p{ max-width: none; }
}

/* Tese colorida. Agora sobre campo solido Deep Navy, entao o contraste nao
   depende mais do quadro do video: 4,73:1 no pior pixel medido.
   DIVIDA DE TOKEN: #8FC0FF continua sendo hex fora do kit. Nenhum azul do kit
   sobrevive nem sobre o navy solido (Electric Blue 3,3:1, Mid Blue pior).
   Pedido de token aberto com o Pedro. Ver tokens-handoff. */
.elementor .inv-thesis{ color: #8FC0FF; }

/* Botoes da hero.
   Primario no Electric Blue do token; hover ESCURECE para Mid Blue, subindo o
   contraste de 4,7:1 para 7,6:1. Licao medida no xebia.com, onde o repouso do
   botao (4,53:1) e o estado mais fragil do sistema deles.
   Secundario e link com seta, padrao medido na stripe.com. */
.elementor .inv-btn-blue .elementor-button{
  background-color: var(--e-global-color-accent);
  color: var(--e-global-color-e80f268);
}
.elementor .inv-btn-blue .elementor-button:hover,
.elementor .inv-btn-blue .elementor-button:focus-visible{
  background-color: var(--e-global-color-secondary);
  color: var(--e-global-color-e80f268);
}
.elementor .inv-btn-link .elementor-button{
  background-color: transparent;
  color: #8FC0FF;
  padding: 12px 4px;
  border-radius: 0;
}
.elementor .inv-btn-link .elementor-button .elementor-button-text::after{
  content: " \2192";
}
.elementor .inv-btn-link .elementor-button:hover,
.elementor .inv-btn-link .elementor-button:focus-visible{
  color: var(--e-global-color-e80f268);
}
/* INV-5119 AC1 (07/10/2026): fim de bloco sem palavra sozinha. Global, EN e PT (BR2).
   Texto corrido: pretty (evita orfa na ultima linha). Titulos: balance (linhas de tamanho parecido).
   Escolhido no lugar de text-align: justify, que abre espacos irregulares em coluna estreita e no celular. */
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-widget-theme-post-content p,
.elementor-widget-theme-post-content li,
.elementor-widget-html p { text-wrap: pretty; }
.elementor-heading-title,
.elementor-widget-theme-post-content h2,
.elementor-widget-theme-post-content h3 { text-wrap: balance; }
/* INV-5119 AC1: cards de vaga e de cultura usam widgets fora do seletor acima (loop item, dynamic) */
.elementor p, .elementor li { text-wrap: pretty; }
/* INV-5119 AC1: colunas estreitas (241-306px) onde o pretty nao consegue evitar a palavra sozinha:
   cards de vaga (loop items 1054/1090, EN e PT) e os 4 cards de habitos de Carreiras (3e8cbd6 PT / 141ad06 EN). Balance reparte as linhas por igual. */
.elementor .e-loop-item p,
.elementor .elementor-element-3e8cbd6 p,
.elementor .elementor-element-141ad06 p { text-wrap: balance; }
/* INV-5119 AC3: blocos de pergunta e resposta. O container centraliza os itens (align-items:center), entao a pergunta de 1 linha
   encolhia e ficava no meio, a de 2 linhas colava na esquerda e a resposta ficava a esquerda. Titulos passam a ocupar a largura
   toda, alinhados com a resposta. Botao nao muda. IDs iguais em EN e PT: FAQ (f538532 8b2a0c9 dde480b a8c7674),
   Consultoria (f0d8149 5946336), Parceiro com IA (d21bb61 0bc9dfb), Como escolher (37dabc4 eb05463). */
.elementor-element-f538532 > .e-con-inner > .elementor-widget-heading,
.elementor-element-8b2a0c9 > .e-con-inner > .elementor-widget-heading,
.elementor-element-dde480b > .e-con-inner > .elementor-widget-heading,
.elementor-element-a8c7674 > .e-con-inner > .elementor-widget-heading,
.elementor-element-f0d8149 > .e-con-inner > .elementor-widget-heading,
.elementor-element-5946336 > .e-con-inner > .elementor-widget-heading,
.elementor-element-d21bb61 > .e-con-inner > .elementor-widget-heading,
.elementor-element-0bc9dfb > .e-con-inner > .elementor-widget-heading,
.elementor-element-37dabc4 > .e-con-inner > .elementor-widget-heading,
.elementor-element-eb05463 > .e-con-inner > .elementor-widget-heading { align-self: stretch; }/* End custom CSS */