/* =============================================================================
   Grupo Axia — Carreiras

   Estilos EXCLUSIVOS desta página. Tudo que é comum ao site inteiro saiu
   daqui e vive em ../assets/css/:

     global.css        tokens, reset, utilitários, botões, preloader
     navbar.css        header e menu do celular
     footer.css        rodapé
     support-card.css  card e barra de suporte (WhatsApp)
     cookies.css       aviso de cookies e central de preferências

   A navbar desta página não troca de cor na rolagem: ela nasce branca, porque
   o topo já é claro. Isso não é um estilo próprio daqui — é o
   `data-solid="always"` no <header> do index.html, previsto no navbar.css.

   Sumário
     1. Quebra de linha       4. Confirmação
     2. Dobra Carreiras       5. Ajustes do celular
     3. Painel de mídia e     6. Movimento reduzido
        formulário
   ========================================================================== */

/* ------------------------- Quebra de linha -------------------------------
   Sem isto, uma palavra sozinha na última linha ("diferença.", "negócios.")
   deixa o bloco com um degrau feio no pé.

   `balance` equilibra o comprimento das linhas — é o certo para título, que
   tem poucas linhas e ganha em ficar simétrico. `pretty` só evita a palavra
   viúva, sem mexer no resto — é o certo para parágrafo, onde equilibrar
   todas as linhas atrapalharia a leitura.

   Quem não suporta as duas propriedades simplesmente quebra como antes:
   nada depende delas para o texto aparecer.
   ------------------------------------------------------------------------ */
.careers__title,
.apply__title,
.apply-ok__title {
  text-wrap: balance;
}

.careers__lead,
.apply__subtitle,
.apply__note,
.apply-ok__text,
.dropzone__hint,
.consent__text,
.requisitos__list li,
.form__status,
.field__error {
  text-wrap: pretty;
}

/* =========================== 2. Dobra Carreiras ===========================
   A página inteira é uma dobra só: um cartão branco dividido em dois — o
   painel de mídia à esquerda e o formulário à direita. O respiro do topo
   (104px) é o que livra a navbar fixa, que mede 80px de altura.
   ========================================================================== */
.careers {
  padding-block: 104px 64px;
}

.careers__card {
  display: grid;
  gap: 16px;
  padding: 16px;
  background: #fff;
  border-radius: var(--r-2xl);
  box-shadow: 0 24px 64px rgb(3 50 35 / 0.1);
}

@media (min-width: 1024px) {
  .careers {
    padding-block: 136px 80px;
  }

  /* 0.95fr à esquerda reproduz a proporção da referência: o painel de mídia
     fica um pouco mais estreito que a coluna do formulário.

     `align-items: start` é o que permite o painel grudar: esticado até a
     altura do formulário — que é longo — ele ficaria com 1.200px de verde e
     o texto só lá embaixo. */
  .careers__card {
    grid-template-columns: 0.95fr 1fr;
    align-items: start;
    gap: 24px;
    padding: 24px;
  }
}


/* ========================== 3. Painel de mídia ============================
   O espaço está vazio de propósito, à espera do vídeo. O degradê de marca
   sustenta o painel enquanto ele não chega; quando chegar, o <video> entra
   por baixo de tudo e o resto continua igual.

   O texto (.careers__panel) é irmão do painel, não filho. No celular ele
   desce para o branco do cartão — de outro jeito o bloco de vidro tomaria
   quatro quintos da altura e não sobraria vídeo para ver. A partir de 768px
   ele volta a flutuar por cima, como na referência.
   ========================================================================== */
.careers__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* O painel não tem conteúdo próprio: é só o lugar do vídeo. O texto flutua
   por cima dele a partir de 768px, posicionado pelo .careers__intro. */
.careers__media {
  position: relative;
  isolation: isolate;
  height: 200px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 80% at 20% 0%, rgb(160 228 147 / 0.16), transparent 60%),
    linear-gradient(160deg, var(--brand-800) 0%, var(--brand-900) 55%, var(--brand-deep) 100%);
  overflow: hidden;
}

/* A foto e o vídeo ocupam o mesmo lugar: forro do painel, atrás de tudo.
   `object-position` puxa o enquadramento para a direita e um pouco para
   cima — é onde estão os rostos quando uma foto deitada é cortada na
   vertical do desktop. */
.careers__foto,
.careers__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 42%;
}

/* Degradê de leitura: hoje quase não aparece sobre o verde, e passa a valer
   quando o vídeo entrar por baixo. */
.careers__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(2 31 21 / 0.65) 0%, rgb(2 31 21 / 0) 55%);
}

/* No celular o texto é texto de cartão: fundo branco, tinta escura. */
.careers__panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-inline: 4px;
}

.careers__title {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--brand-850);
}

.careers__lead {
  font-size: 14px;
  line-height: 22px;
  font-weight: 300;
  color: var(--ink-muted);
}

.careers__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.careers__tags li {
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  line-height: 20px;
  color: var(--brand-700);
}

/* ---------------- A partir de 768px: painel de vidro ---------------------
   O texto sobe para dentro do painel, ancorado no pé, e as cores invertem —
   é a leitura da referência. `inset: auto 24px 24px` mantém o mesmo respiro
   dos três lados que o painel usa por dentro.
   ------------------------------------------------------------------------ */
@media (min-width: 768px) {
  .careers__intro {
    position: relative;
    display: block;
  }

  .careers__media {
    height: 480px;
  }

  /* Vidro: o desfoque é o que faz o efeito, mas sozinho ele não sustenta
     texto branco sobre uma foto clara. Por isso vêm juntos o véu verde
     (0.38 — translúcido o bastante para deixar a foto passar, opaco o
     bastante para o texto não brigar com ela) e o `saturate`, que devolve a
     cor que o blur lava. O fio branco por dentro e a sombra por fora são o
     que dá a espessura de uma placa de vidro em vez de uma mancha. */
  .careers__panel {
    position: absolute;
    inset: auto 24px 24px 24px;
    padding: 24px;
    border: 1px solid rgb(255 255 255 / 0.18);
    border-radius: var(--r-lg);
    background: rgb(3 50 35 / 0.38);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow:
      0 8px 32px rgb(2 31 21 / 0.28),
      inset 0 1px 0 rgb(255 255 255 / 0.14);
  }

  /* Sem suporte a backdrop-filter o painel ficaria translúcido sobre a foto e
     o texto sumiria: aí o véu vira quase sólido. */
  @supports not (backdrop-filter: blur(1px)) {
    .careers__panel {
      background: rgb(3 50 35 / 0.88);
    }
  }

  /* O título para de crescer em 28px de propósito: ele mora dentro do painel
     de vidro, e cada linha a mais ali é vídeo a menos aparecendo por trás. */
  .careers__title {
    font-size: 28px;
    color: #fff;
  }

  .careers__lead {
    color: rgb(255 255 255 / 0.78);
  }

  .careers__tags li {
    border-color: rgb(160 228 147 / 0.28);
    color: var(--brand-200);
  }
}

/* No desktop o painel guarda a proporção da referência e acompanha a rolagem
   enquanto o formulário passa ao lado. O 104px do topo é a navbar fixa (82px)
   mais um respiro; o calc impede que ele ultrapasse a janela em telas baixas,
   onde o pé do painel ficaria cortado. */
@media (min-width: 1024px) {
  .careers__intro {
    position: sticky;
    top: 104px;
  }

  .careers__media {
    height: min(680px, calc(100vh - 128px));
    min-height: 480px;
  }
}

/* ============================ 3b. Formulário ===============================
   Coluna com largura de leitura fixa (400px) e centrada na metade direita do
   cartão — é o que mantém rótulo, campo e botão na mesma linha vertical em
   qualquer largura de tela.
   ========================================================================== */
.careers__form-side {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 24px;
}

/* Malha discreta atrás do topo do formulário, como na referência. Só no
   desktop: no celular ela concorreria com o texto. */
@media (min-width: 1024px) {
  .careers__form-side {
    padding: 32px;
  }

  .careers__form-side::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    z-index: -1;
    height: 320px;
    background-image:
      linear-gradient(to right, var(--line) 1px, transparent 1px),
      linear-gradient(to bottom, var(--line) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.55;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
    mask-image: linear-gradient(to bottom, #000, transparent);
  }
}

.apply {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 400px;
}

/* Depois do envio o bloco inteiro sai e dá lugar à confirmação. Como ele é
   flex, o hidden do navegador sozinho não bastaria. */
.apply[hidden] {
  display: none;
}

.apply__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--icon-soft);
  color: var(--brand-700);
}

.apply__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.apply__title {
  font-size: 24px;
  line-height: 1.167;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--brand-850);
}

.apply__subtitle {
  font-size: 14px;
  line-height: 22px;
  font-weight: 300;
  color: var(--ink-muted);
}

/* ----------------------------- Anexo -------------------------------------
   Dois estados irmãos — o rótulo de "arraste ou clique" e a linha do arquivo
   escolhido —, trocados pelo atributo hidden. Só um existe de cada vez, então
   o leitor de tela também lê só um.
   ------------------------------------------------------------------------- */
.dropzone-wrap {
  position: relative;
}

.dropzone {
  display: flex;
  padding: 24px 16px;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: #fff;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Estado vazio: o próprio bloco é o <label>, então o cursor precisa dizer
   que ele é clicável de ponta a ponta. */
.dropzone--empty {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  cursor: pointer;
}

.dropzone--empty:hover,
.dropzone-wrap.is-dragging .dropzone--empty {
  border-color: var(--brand-700);
  background: var(--icon-soft);
}

/* O input está em .sr-only: sem esta regra o foco do teclado não apareceria
   em lugar nenhum. */
.dropzone-wrap:focus-within .dropzone--empty {
  border-color: var(--brand-700);
  box-shadow: 0 0 0 4px rgb(11 99 71 / 0.1);
}

.dropzone-wrap.is-invalid .dropzone {
  border-color: var(--danger);
}

.dropzone__icon {
  color: var(--brand-700);
  margin-bottom: 4px;
}

.dropzone__title {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: var(--ink);
}

.dropzone__hint {
  font-size: 12px;
  line-height: 18px;
  color: var(--ink-muted);
}

/* Estado preenchido */
.dropzone--file {
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-style: solid;
  border-color: var(--brand-400);
  background: var(--icon-soft);
  color: var(--brand-700);
}

/* display: flex vence o hidden do navegador; sem esta linha os dois estados
   apareceriam ao mesmo tempo. */
.dropzone[hidden] {
  display: none;
}

.dropzone__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.dropzone__name {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropzone__size {
  font-size: 12px;
  line-height: 18px;
  color: var(--ink-muted);
}

.dropzone__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  color: var(--ink-muted);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.dropzone__remove:hover {
  background: #fff;
  color: var(--danger);
}

/* --------------------------- Requisitos ---------------------------------- */
.requisitos {
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--icon-soft);
}

.requisitos__title {
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
}

.requisitos__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.requisitos__list li {
  position: relative;
  padding-left: 20px;
  font-size: 12px;
  line-height: 20px;
  color: var(--ink-muted);
}

.requisitos__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--brand-200);
}

/* -------------------------- Consentimento -------------------------------- */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.consent__box {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin: 0;
  margin-top: 2px;
  /* Verde e de 2px, não o cinza de 1px dos outros campos: a caixa é pequena e
     obrigatória para enviar, então precisa se anunciar. Os 2px também evitam
     que ela caia em meio pixel em telas com escala fracionária, onde uma
     borda de 1px se acinzenta de um lado e some do outro. */
  border: 2px solid var(--brand-700);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.consent__box:hover {
  box-shadow: 0 0 0 4px rgb(11 99 71 / 0.1);
}

.consent__box:checked {
  border-color: var(--brand-700);
  background-color: var(--brand-700);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}

.consent__box[aria-invalid="true"] {
  border-color: var(--danger);
}

.consent__text {
  font-size: 12px;
  line-height: 20px;
  color: var(--ink-muted);
}

/* --------------------------- Aviso de privacidade -------------------------
   Fica logo acima do botão de envio, no tamanho das notas de apoio do bloco.
   Não é um pedido de consentimento — é a informação de transparência exigida
   pelo art. 9º da LGPD, com o caminho para a política inteira.
   ------------------------------------------------------------------------ */
.form__aviso {
  font-size: 12px;
  line-height: 20px;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.form__aviso a {
  font-weight: 500;
  color: var(--brand-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form__aviso a:hover,
.form__aviso a:focus-visible {
  color: var(--brand-900);
}

/* ------------------------------ Status ----------------------------------- */
.form__status {
  padding: 12px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 20px;
}

.form__status:empty {
  display: none;
}

.form__status.is-error {
  background: rgb(179 38 30 / 0.08);
  color: var(--danger);
}

.form__status.is-info {
  background: var(--icon-soft);
  color: var(--ink-muted);
}

.form__status a {
  font-weight: 500;
  color: var(--brand-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --------------------------- Rodapé do bloco ----------------------------- */
.apply__note {
  font-size: 12px;
  line-height: 20px;
  color: var(--ink-muted);
}

/* =========================== 4. Confirmação =============================== */
.apply-ok {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  max-width: 400px;
}

.apply-ok[hidden] {
  display: none;
}

.apply-ok__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--brand-200);
  color: var(--brand-900);
}

.apply-ok__title {
  font-size: 24px;
  line-height: 1.167;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--brand-850);
}

.apply-ok__text {
  font-size: 14px;
  line-height: 22px;
  font-weight: 300;
  color: var(--ink-muted);
}

/* ======================== 5. Ajustes do celular ==========================
   Numa coluna só o rodapé centra, como no site oficial. O formulário é a
   exceção deliberada: rótulo, campo e erro continuam à esquerda, porque
   centrar um formulário tira a referência vertical de leitura.
   ========================================================================== */
@media (max-width: 767px) {
  /* O botão de envio é o único da página no celular, e acompanha a largura
     dos campos acima — por isso a largura fixa de 280px do site oficial não
     se aplica aqui. */
  .careers__card {
    border-radius: var(--r-xl);
  }

  .apply,
  .apply-ok {
    max-width: none;
  }

  /* --------------------- Retorno do toque --------------------------------
     Sem hover, o clarão do :active é o único retorno que o dedo recebe. */
  .btn,
  .footer__col a,
  .footer__social a,
  .header__toggle {
    transition: filter 0.15s ease;
  }

  .btn:active,
  .footer__col a:active,
  .footer__social a:active,
  .header__toggle:active {
    filter: brightness(1.18);
  }
}

/* ======================= 6. Movimento reduzido ============================
   A política geral e as exceções dos componentes compartilhados vivem em
   ../assets/css/. Aqui fica só o que é próprio desta página.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* Retorno do toque no celular. Precisa vir por último: as exceções acima
        casam com os mesmos elementos e imporiam a duração delas — 0,35s é
        lento demais para responder a um dedo. */
  @media (max-width: 767px) {
    .btn,
    .footer__col a,
    .footer__col span,
    .footer__social a,
    .header__toggle {
      transition-duration: 0.15s !important;
    }
  }
}