/* Vagoou — camada visual 2026
   Carrega DEPOIS de vagoou-mobile-20260916.css e vagoou-ui.css e redefine o visual de todo o site
   (público, área do candidato, Vagoou RH e admin) sem mexer em PHP, rotas ou formulários.
   Para voltar ao visual anterior, basta remover a linha que carrega este arquivo nos headers. */

:root {
  /* paleta */
  --v-roxo: #5720E5;
  --v-roxo-forte: #3F12B8;
  --v-roxo-claro: #EEE9FD;
  --v-tinta: #150D2E;
  --v-tinta-2: #241A45;
  --v-lima: #D7F85B;
  --v-branco: #FFFFFF;
  --v-nevoa: #F4F2FA;
  --v-linha: #E4E0EF;
  --v-texto: #3A3350;
  --v-suave: #675F7D;
  --v-sucesso: #12704A;
  --v-alerta: #8A5208;
  --v-erro: #B3263F;

  --v-fonte: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --v-raio-botao: 10px;
  --v-raio-campo: 10px;
  --v-raio-card: 14px;
  --v-sombra: 0 1px 2px rgba(21, 13, 46, 0.06), 0 12px 32px -18px rgba(21, 13, 46, 0.28);

  /* tokens antigos apontando para a paleta nova (re-tinge os estilos que ainda usam variáveis) */
  --brand-purple: var(--v-roxo);
  --brand-purple-2: var(--v-roxo);
  --brand-purple-dark: var(--v-roxo-forte);
  --brand-purple-soft: var(--v-roxo-claro);
  --brand-lime: var(--v-lima);
  --brand-ink: var(--v-tinta);
  --brand-ink-2: var(--v-tinta-2);
  --brand-cream: var(--v-branco);
  --brand-soft: var(--v-nevoa);
  --brand-muted: var(--v-suave);
  --brand-line: var(--v-linha);
  --brand-success: var(--v-sucesso);
  --brand-warning: var(--v-alerta);
  --brand-danger: var(--v-erro);
  --brand-radius: var(--v-raio-card);
  --brand-radius-sm: var(--v-raio-campo);
  --ink: var(--v-tinta);
  --text: var(--v-texto);
  --muted: var(--v-suave);
  --line: var(--v-linha);
  --soft: var(--v-nevoa);
  --cream: var(--v-branco);
  --lime: var(--v-lima);
  --purple: var(--v-roxo);
  --purple-dark: var(--v-roxo-forte);
  --purple-soft: var(--v-roxo-claro);
  --green: var(--v-sucesso);
  --red: var(--v-erro);
  --orange: var(--v-alerta);
  --radius: var(--v-raio-card);
}

/* ---------- base ---------- */
/* O CSS antigo tem centenas de tamanhos abaixo de 15px em rem. Subir a base sobe todos de uma vez. */
html:root { font-size: 112.5%; }
html body, html body.public-body, html body.panel-body, html body.auth-body {
  font-family: var(--v-fonte);
  font-stretch: 100%;
  font-size: 0.9444rem;
  line-height: 1.6;
  color: var(--v-texto);
  background: var(--v-branco);
  -webkit-font-smoothing: antialiased;
}
html body.panel-body { background: var(--v-nevoa); }

html body h1, html body h2, html body h3, html body h4 {
  font-family: var(--v-fonte);
  color: var(--v-tinta);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
html body h1 { font-size: clamp(1.9rem, 4vw, 3.1rem); }
html body h2 { font-size: clamp(1.45rem, 2.6vw, 2.15rem); }
html body h3 { font-size: 1.1rem; font-stretch: 106%; letter-spacing: -0.012em; line-height: 1.2; }
html body p { color: var(--v-texto); }
html body a { color: var(--v-roxo); text-underline-offset: 0.18em; }
html body a:hover { color: var(--v-roxo-forte); }
html body :focus-visible { outline: 3px solid var(--v-roxo); outline-offset: 3px; border-radius: 4px; }

html body .container { max-width: 1240px; padding-left: clamp(1rem, 4vw, 2.5rem); padding-right: clamp(1rem, 4vw, 2.5rem); }

/* rótulos curtos: sem caixa alta, sem espaçamento largo */
html body .eyebrow,
html body .hero-label,
html body .support-kicker,
html body .job-detail-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--v-fonte);
  font-size: 0.75rem;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--v-roxo);
  margin-bottom: 0.6rem;
}
html body .eyebrow-light { color: var(--v-lima); }

html body .skip-link { background: var(--v-tinta); color: var(--v-branco); border-radius: 0 0 8px 8px; }

/* ícones */
html body .ui-icon, html body svg.ui-icon { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- botões ---------- */
html body .button,
html body button.button,
html body a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.65rem 1.2rem;
  border: 2px solid var(--v-roxo);
  border-radius: var(--v-raio-botao);
  background: var(--v-roxo);
  color: var(--v-branco);
  font-family: var(--v-fonte);
  font-size: 0.9444rem;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
html body .button:hover { background: var(--v-roxo-forte); border-color: var(--v-roxo-forte); color: var(--v-branco); }
html body .button:active { transform: translateY(1px); }

html body .button-ghost,
html body a.button-ghost,
html body button.button-ghost {
  background: transparent;
  color: var(--v-roxo);
  border-color: var(--v-linha);
}
html body .button-ghost:hover { background: var(--v-roxo-claro); border-color: var(--v-roxo); color: var(--v-roxo-forte); }

html body .button-green,
html body a.button-green,
html body button.button-green {
  background: var(--v-lima);
  border-color: var(--v-lima);
  color: var(--v-tinta);
}
html body .button-green:hover { background: #C9EE3F; border-color: #C9EE3F; color: var(--v-tinta); }

html body .button-warning { background: #FFF1DA; border-color: #F0D3A2; color: var(--v-alerta); }
html body .button-warning:hover { background: #FFE6BD; border-color: #E5BD7A; color: var(--v-alerta); }

html body .button-small { min-height: 2.25rem; padding: 0.45rem 0.9rem; font-size: 0.8611rem; }
html body .button-tiny { min-height: 1.9rem; padding: 0.3rem 0.7rem; font-size: 0.8rem; border-width: 1.5px; }
html body .button-block { width: 100%; }

html body .text-link,
html body .text-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--v-roxo);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(87, 32, 229, 0.28);
}
html body .text-link:hover, html body .text-button:hover { text-decoration-color: var(--v-roxo); }

/* ---------- formulários ---------- */
html body .field label,
html body .search-field label,
html body .filter-form label {
  display: block;
  font-size: 0.8611rem;
  font-weight: 600;
  color: var(--v-tinta);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 0.4rem;
}
html body input[type="text"], html body input[type="email"], html body input[type="password"],
html body input[type="tel"], html body input[type="number"], html body input[type="url"],
html body input[type="search"], html body input[type="date"], html body input:not([type]),
html body select, html body textarea {
  font-family: var(--v-fonte);
  font-size: 0.9444rem;
  color: var(--v-tinta);
  background-color: var(--v-branco);
  border: 1.5px solid #CFC9DE;
  border-radius: var(--v-raio-campo);
  min-height: 2.75rem;
  padding: 0.7rem 0.9rem;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
html body textarea { min-height: 7.5rem; line-height: 1.5; }
html body input::placeholder, html body textarea::placeholder { color: #8C85A0; }
html body input:hover, html body select:hover, html body textarea:hover { border-color: #A99FC4; }
html body input:focus, html body select:focus, html body textarea:focus {
  outline: none;
  border-color: var(--v-roxo);
  box-shadow: 0 0 0 4px rgba(87, 32, 229, 0.16);
}
html body .check-field { gap: 0.6rem; align-items: flex-start; }
html body input[type="checkbox"], html body input[type="radio"] { accent-color: var(--v-roxo); width: 1.125rem; height: 1.125rem; }
html body .form-stack { gap: 1.1rem; }
html body .form-divider { border-color: var(--v-linha); }

/* ---------- avisos ---------- */
html body .flash {
  border-radius: var(--v-raio-campo);
  border: 1.5px solid #BFE7D2;
  background: #EAF8F0;
  color: var(--v-sucesso);
  font-weight: 600;
  padding: 0.85rem 1rem;
  box-shadow: none;
}
html body .flash-danger { border-color: #F2C3CC; background: #FDEEF1; color: var(--v-erro); }
html body .flash-warning { border-color: #F0D3A2; background: #FFF6E6; color: var(--v-alerta); }
html body .flash a { color: inherit; font-weight: 700; }

/* ---------- topo ---------- */
html body .site-header {
  background: var(--v-branco);
  border-bottom: 1px solid var(--v-linha);
  box-shadow: none;
  backdrop-filter: none;
}
html body .site-header .header-inner { min-height: 4.25rem; }
html body .brand-logo { height: 1.95rem; width: auto; }
html body .site-nav { gap: 0.25rem; }
html body .site-nav a {
  font-size: 0.8889rem;
  font-weight: 600;
  color: var(--v-tinta);
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  text-decoration: none;
}
html body .site-nav a:hover { background: var(--v-nevoa); color: var(--v-roxo); }
html body .site-nav .nav-login { color: var(--v-roxo); }
html body .site-nav a.nav-cta,
html body .site-nav a.button { color: var(--v-branco); margin-left: 0.4rem; padding: 0.5rem 1.05rem; }
html body .site-nav a.nav-cta:hover { background: var(--v-roxo-forte); color: var(--v-branco); }
html body .menu-toggle span { background: var(--v-tinta); }

/* ---------- home: hero ---------- */
html body .v-hero {
  position: relative;
  background: var(--v-roxo);
  color: var(--v-branco);
  padding: clamp(3rem, 7vw, 6rem) 0 0;
  overflow: hidden;
  isolation: isolate;
}
html body .v-hero::after {
  /* faixa branca que a barra de busca atravessa */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5.4rem;
  background: var(--v-branco);
  z-index: -1;
}
html body .v-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 2rem;
  align-items: end;
}
html body .v-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  font-weight: 600;
  color: var(--v-lima);
}
html body .v-hero h1 {
  color: var(--v-branco);
  font-size: clamp(2.4rem, 5.9vw, 5.2rem);
  font-weight: 800;
  font-stretch: 118%;
  letter-spacing: -0.03em;
  line-height: 0.96;
  max-width: 13ch;
  margin: 0;
}
html body .v-hero-lead {
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  max-width: 44ch;
  margin: 1.5rem 0 0;
}
html body .v-hero-check {
  width: 100%;
  max-width: 17rem;
  justify-self: end;
  align-self: start;
  margin-top: 1.75rem;
  overflow: visible;
}
html body .v-hero-check path {
  fill: none;
  stroke: var(--v-lima);
  stroke-width: 34;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 640;
  stroke-dashoffset: 640;
  animation: v-check 0.9s 0.25s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes v-check { to { stroke-dashoffset: 0; } }

html body .v-search-wrap { position: relative; margin-top: clamp(2.5rem, 5vw, 4rem); }
html body .v-hero .opportunity-search {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: 0;
  align-items: stretch;
  background: var(--v-branco);
  border: 2px solid var(--v-tinta);
  border-radius: 16px;
  padding: 0.5rem;
  box-shadow: 0 24px 48px -28px rgba(21, 13, 46, 0.55);
}
html body .v-hero .search-field { padding: 0.55rem 1rem; min-width: 0; }
html body .v-hero .search-field + .search-field { border-left: 1.5px solid var(--v-linha); }
html body .v-hero .search-field label { font-size: 0.8rem; color: var(--v-suave); margin-bottom: 0.15rem; }
html body .v-hero .search-field > div { display: flex; align-items: center; gap: 0.55rem; color: var(--v-roxo); }
html body .v-hero .search-field input {
  border: 0;
  padding: 0.2rem 0;
  min-height: 2rem;
  font-size: 1rem;
  font-weight: 600;
  background: transparent;
  width: 100%;
  box-shadow: none;
}
html body .v-hero .search-field input:focus { box-shadow: none; }
html body .v-hero .search-field:focus-within { background: var(--v-nevoa); border-radius: 10px; }
html body .v-hero .opportunity-search .button { min-height: 100%; padding: 0 1.6rem; font-size: 0.9444rem; border-radius: 11px; }
html body .v-hero .hero-search-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: center;
  padding: 1rem 0.25rem 0;
  color: var(--v-suave);
  font-size: 0.9375rem;
  background: var(--v-branco);
}
html body .v-hero .hero-search-links a { font-weight: 700; color: var(--v-roxo); display: inline-flex; gap: 0.35rem; align-items: center; }

/* ---------- home: atalhos ---------- */
html body .pathway-strip { background: var(--v-branco); border: 0; padding: clamp(2rem, 4vw, 3rem) 0 0; }
html body .pathway-inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--v-tinta); }
html body .pathway-inner a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.25rem 1rem 1.25rem 0;
  border: 0;
  border-bottom: 1px solid var(--v-linha);
  background: transparent;
  color: var(--v-tinta);
  text-decoration: none;
  border-radius: 0;
}
html body .pathway-inner a + a { padding-left: 1.25rem; border-left: 1px solid var(--v-linha); }
html body .pathway-inner a > svg:first-child { color: var(--v-roxo); width: 1.5rem; height: 1.5rem; }
html body .pathway-inner a strong { display: block; font-size: 1.125rem; font-weight: 800; font-stretch: 108%; color: var(--v-tinta); }
html body .pathway-inner a small { color: var(--v-suave); font-size: 0.9375rem; }
html body .pathway-inner a > svg:last-child { margin-left: auto; color: var(--v-roxo); transition: transform 0.15s ease; }
html body .pathway-inner a:hover strong { color: var(--v-roxo); }
html body .pathway-inner a:hover > svg:last-child { transform: translateX(4px); }

/* ---------- seções ---------- */
html body .section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
html body .section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
html body .section-heading h2 { margin: 0; }
html body .opening-layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }

/* lista de vagas (home e busca) */
html body .home-job-list, html body .jobs-list { display: grid; gap: 0; border-top: 1px solid var(--v-linha); background: transparent; }
html body .opportunity-row,
html body .job-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem 1.25rem;
  align-items: center;
  padding: 1.25rem 0.25rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--v-linha);
  border-radius: 0;
  box-shadow: none;
}
html body .opportunity-row:hover, html body .job-row:hover { background: var(--v-nevoa); }
html body .opportunity-row h3, html body .job-row h3 { font-size: 1.25rem; margin: 0.15rem 0; }
html body .opportunity-row h3 a, html body .job-row h3 a { color: var(--v-tinta); text-decoration: none; }
html body .opportunity-row h3 a:hover, html body .job-row h3 a:hover { color: var(--v-roxo); text-decoration: underline; }
html body .row-eyebrow, html body .job-row-kickers { display: flex; gap: 0.5rem; align-items: center; font-size: 0.875rem; color: var(--v-suave); font-weight: 600; }
html body .new-label { background: var(--v-lima); color: var(--v-tinta); border-radius: 999px; padding: 0.1rem 0.55rem; font-size: 0.8125rem; font-weight: 700; }
html body .job-facts { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; color: var(--v-suave); font-size: 0.9375rem; }
html body .job-facts span { display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: 0; padding: 0; }
html body .opportunity-side, html body .job-row-side { text-align: right; display: grid; gap: 0.35rem; justify-items: end; }
html body .opportunity-side strong, html body .job-row-side strong, html body .salary-value { font-weight: 800; color: var(--v-tinta); font-stretch: 106%; }

html body .company-avatar, html body .candidate-avatar {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  background: var(--v-roxo-claro);
  color: var(--v-roxo);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 0.95rem;
  border: 0;
}
html body .company-avatar-large, html body .candidate-avatar-large { width: 4.5rem; height: 4.5rem; font-size: 1.3rem; border-radius: 16px; }

html body .results-note { color: var(--v-suave); font-size: 0.9375rem; margin-top: 1rem; }

/* estado vazio: direção, não decoração */
html body .empty-state, html body .panel-empty, html body .error-state {
  text-align: left;
  background: var(--v-nevoa);
  border: 1.5px dashed #CFC9DE;
  border-radius: var(--v-raio-card);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: none;
}
html body .empty-state h3, html body .panel-empty h3 { font-size: 1.375rem; margin: 0.75rem 0 0.4rem; }
html body .empty-state p { max-width: 52ch; color: var(--v-suave); }
html body .empty-illustration, html body .empty-mark {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  background: var(--v-branco);
  color: var(--v-roxo);
  border: 1.5px solid var(--v-linha);
  margin: 0;
}
html body .empty-mini { color: var(--v-suave); }

/* ponto de partida (passos são sequência de verdade) */
html body .starting-point {
  background: var(--v-tinta);
  color: var(--v-branco);
  border: 0;
  border-radius: 18px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: none;
}
html body .starting-point h2 { color: var(--v-branco); font-size: clamp(1.5rem, 2.2vw, 2rem); }
html body .starting-point .eyebrow { color: var(--v-lima); }
html body .compact-steps { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 1.1rem; counter-reset: none; }
html body .compact-steps li { display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.85rem; align-items: start; }
html body .compact-steps li > span {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: var(--v-lima);
  color: var(--v-tinta);
  font-weight: 800;
  font-size: 0.875rem;
}
html body .compact-steps strong { color: var(--v-branco); }
html body .compact-steps p { color: rgba(255, 255, 255, 0.72); margin: 0.15rem 0 0; font-size: 0.9375rem; }
html body .starting-point .button-ghost { color: var(--v-branco); border-color: rgba(255, 255, 255, 0.35); }
html body .starting-point .button-ghost:hover { background: var(--v-branco); color: var(--v-tinta); border-color: var(--v-branco); }

/* áreas: palavras grandes como placas */
html body .category-section { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--v-branco); border-top: 1px solid var(--v-linha); }
html body .category-links { display: flex; flex-wrap: wrap; gap: 0.25rem 0; }
html body .category-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 1.25rem 0.35rem 0;
  margin-right: 1.25rem;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  font-weight: 800;
  font-stretch: 120%;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--v-tinta);
  text-decoration: none;
}
html body .category-links a svg { width: 0.7em; height: 0.7em; color: var(--v-roxo); opacity: 0; transform: translateX(-6px); transition: opacity 0.15s, transform 0.15s; }
html body .category-links a:hover { color: var(--v-roxo); }
html body .category-links a:hover svg { opacity: 1; transform: none; }

/* Vagoou RH na home */
html body .recruitment-section { background: var(--v-tinta); color: var(--v-branco); padding: clamp(3.5rem, 7vw, 6rem) 0; }
html body .recruitment-layout { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
html body .recruitment-section h2 { color: var(--v-branco); font-size: clamp(2rem, 4vw, 3.4rem); font-stretch: 118%; }
html body .recruitment-section p { color: rgba(255, 255, 255, 0.78); max-width: 46ch; }
html body .recruitment-section .hero-label { color: var(--v-lima); text-transform: none; }
html body .recruitment-features { display: grid; gap: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
html body .recruitment-features > div { display: flex; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); background: none; border-radius: 0; }
html body .recruitment-features svg { color: var(--v-lima); width: 1.4rem; height: 1.4rem; margin-top: 0.15rem; }
html body .recruitment-features strong { color: var(--v-branco); font-size: 1.0625rem; }
html body .recruitment-features p { margin: 0.2rem 0 0; font-size: 0.9375rem; }

/* sobre + dúvidas */
html body .about-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
html body .platform-numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 2rem; border-top: 2px solid var(--v-tinta); }
html body .platform-numbers div { padding: 1rem 1rem 0 0; background: none; border: 0; }
html body .platform-numbers div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
html body .platform-numbers dt { font-size: 0.8333rem; color: var(--v-suave); font-weight: 600; white-space: nowrap; margin-top: 0.35rem; }
html body .platform-numbers dd { margin: 0.25rem 0 0; font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 800; font-stretch: 118%; color: var(--v-tinta); line-height: 1; font-variant-numeric: tabular-nums; }
html body .faq-list h2 { margin-bottom: 1rem; }
html body .faq-list details { border: 0; border-bottom: 1px solid var(--v-linha); border-radius: 0; background: none; padding: 0; }
html body .faq-list details:first-of-type { border-top: 1px solid var(--v-linha); }
html body .faq-list summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  cursor: pointer; list-style: none;
  padding: 1.15rem 0;
  font-size: 1.125rem; font-weight: 700; color: var(--v-tinta);
}
html body .faq-list summary::-webkit-details-marker { display: none; }
html body .faq-list summary::after { content: "+"; font-size: 1.6rem; font-weight: 400; color: var(--v-roxo); line-height: 1; transition: transform 0.2s ease; }
html body .faq-list details[open] summary::after { transform: rotate(45deg); }
html body .faq-list details p { margin: 0 0 1.2rem; max-width: 60ch; color: var(--v-suave); }

/* ---------- topos de página internas ---------- */
html body .page-hero,
html body .search-page-head {
  background: var(--v-roxo);
  color: var(--v-branco);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border: 0;
}
html body .page-hero h1, html body .search-page-head h1 { color: var(--v-branco); font-stretch: 118%; font-size: clamp(2rem, 4.4vw, 3.6rem); max-width: 18ch; }
html body .page-hero p, html body .search-page-head p { color: rgba(255, 255, 255, 0.86); max-width: 56ch; font-size: 0.9444rem; }
html body .page-hero .eyebrow, html body .search-page-head .eyebrow { color: var(--v-lima); }
html body .breadcrumb, html body .breadcrumb a { color: rgba(255, 255, 255, 0.78); font-size: 0.9375rem; }
html body .breadcrumb a:hover { color: var(--v-branco); }

/* ---------- busca de vagas ---------- */
html body .jobs-layout { display: grid; grid-template-columns: minmax(0, 3.5fr) minmax(0, 8.5fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
html body .filter-card {
  background: var(--v-branco);
  border: 1.5px solid var(--v-linha);
  border-radius: var(--v-raio-card);
  padding: 1.25rem;
  box-shadow: none;
}
html body .filter-clear { color: var(--v-roxo); font-weight: 600; }
html body .filter-help { color: var(--v-suave); font-size: 0.875rem; }
html body .search-modes, html body .status-tabs, html body .candidate-status-tabs {
  display: flex; gap: 0.25rem; flex-wrap: wrap;
  border-bottom: 1.5px solid var(--v-linha);
  margin-bottom: 1.25rem;
}
html body .search-modes a, html body .status-tabs a, html body .candidate-status-tabs a {
  padding: 0.65rem 0.9rem;
  margin-bottom: -1.5px;
  border-bottom: 3px solid transparent;
  font-weight: 700;
  color: var(--v-suave);
  text-decoration: none;
  border-radius: 0;
  background: none;
}
html body .search-modes a:hover, html body .status-tabs a:hover, html body .candidate-status-tabs a:hover { color: var(--v-tinta); }
html body .search-modes a.active, html body .search-modes a[aria-current],
html body .status-tabs a.active, html body .status-tabs a[aria-current],
html body .candidate-status-tabs a.active, html body .candidate-status-tabs a[aria-current] { color: var(--v-roxo); border-bottom-color: var(--v-roxo); }
html body .results-heading h2, html body .results-heading strong { font-size: 1.375rem; }
html body .filter-chip { background: var(--v-roxo-claro); color: var(--v-roxo); border: 0; border-radius: 999px; font-weight: 600; padding: 0.3rem 0.8rem; }

/* ---------- detalhe da vaga ---------- */
html body .job-detail-hero { background: var(--v-nevoa); border-bottom: 1px solid var(--v-linha); padding: clamp(2rem, 5vw, 3.5rem) 0; }
html body .job-detail-hero h1 { font-stretch: 118%; max-width: 20ch; }
html body .detail-layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
html body .detail-section { border-bottom: 1px solid var(--v-linha); padding: 1.5rem 0; }
html body .detail-section h2 { font-size: 1.375rem; margin-bottom: 0.75rem; }
html body .formatted-text { max-width: 68ch; }
html body .detail-sidebar { position: sticky; top: 1.5rem; display: grid; gap: 1rem; }
html body .application-action-card { border: 2px solid var(--v-tinta); border-radius: 16px; background: var(--v-branco); box-shadow: var(--v-sombra); padding: 1.5rem; }

/* ---------- cartões genéricos ---------- */
html body .panel-card,
html body .form-card,
html body .auth-card,
html body .support-card,
html body .company-card,
html body .company-profile-card,
html body .price-card,
html body .success-card,
html body .candidate-card,
html body .profile-completion-card,
html body .candidate-tools-card,
html body .rh-account-card,
html body .support-email-card {
  background: var(--v-branco);
  border: 1.5px solid var(--v-linha);
  border-radius: var(--v-raio-card);
  box-shadow: none;
}
html body .panel-card-heading h2, html body .form-card-heading h2, html body .panel-section-heading h2 { font-size: 1.25rem; font-stretch: 108%; }

/* números */
html body .stat-card {
  background: var(--v-branco);
  border: 1.5px solid var(--v-linha);
  border-radius: var(--v-raio-card);
  box-shadow: none;
}
html body .stat-card strong, html body .stat-card .stat-value, html body .rh-attention-number, html body .plan-stat strong, html body .rating-score {
  font-weight: 800; font-stretch: 118%; color: var(--v-tinta); font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
html body .stat-dark { background: var(--v-tinta); border-color: var(--v-tinta); }
html body .stat-dark, html body .stat-dark strong, html body .stat-dark span, html body .stat-dark p { color: var(--v-branco); }
html body .stat-green { background: var(--v-lima); border-color: var(--v-lima); }
html body .stat-green, html body .stat-green strong, html body .stat-green span, html body .stat-green p { color: var(--v-tinta); }

/* status */
html body .status-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  background: var(--v-nevoa);
  color: var(--v-texto);
  border: 1px solid var(--v-linha);
}
html body .status-published { background: #E7F7EE; color: var(--v-sucesso); border-color: #BFE7D2; }

/* ---------- entrar / cadastro ---------- */
html body .auth-page {
  background: var(--v-roxo);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem);
}
html body .auth-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
html body .auth-copy { padding-top: 0.5rem; }
html body .auth-copy h1 { color: var(--v-branco); font-stretch: 118%; font-size: clamp(2rem, 4.2vw, 3.4rem); max-width: 14ch; }
html body .auth-copy p { color: rgba(255, 255, 255, 0.86); max-width: 42ch; font-size: 0.9444rem; }
html body .auth-copy a { color: var(--v-lima); }
html body .auth-copy li, html body .auth-copy strong, html body .auth-copy span { color: var(--v-branco); }
html body .auth-copy .eyebrow { color: var(--v-lima); }
html body .auth-card { border: 2px solid var(--v-tinta); border-radius: 18px; padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--v-sombra); }
html body .auth-card h2 { font-size: 1.6rem; margin-bottom: 1.25rem; }
html body .auth-foot { color: var(--v-suave); font-size: 0.9375rem; text-align: left; border-top: 1px solid var(--v-linha); padding-top: 0.85rem; margin-top: 0.85rem; }
html body .auth-foot a { font-weight: 700; }

/* ---------- planos ---------- */
html body .pricing-grid, html body .employer-plans { gap: 1rem; }
html body .price-card { padding: clamp(1.25rem, 2.5vw, 1.75rem); }
html body .price-card.featured, html body .featured.price-card { border: 2px solid var(--v-roxo); }
html body .price, html body .employer-plan-price { font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 800; font-stretch: 118%; color: var(--v-tinta); letter-spacing: -0.02em; }
/* planos para empresas: os 5 lado a lado e preço numa linha só */
html body .employer-plans { gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
@media (min-width: 1100px) { html body .employer-plans { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
html body .employer-plans > article { padding: 1.1rem 0.85rem; }
html body .employer-plans .button { padding-left: 0.45rem; padding-right: 0.45rem; font-size: 0.7778rem; white-space: nowrap; }
html body .employer-plan-price { font-size: 1.55rem; font-stretch: 100%; white-space: nowrap; line-height: 1.1; }
html body .employer-plan-price small { display: block; font-size: 0.8rem; font-weight: 600; color: var(--v-suave); margin-top: 0.2rem; letter-spacing: 0; }
html body .benefit-list { padding-left: 0; list-style: none; }
html body .benefit-list li { position: relative; padding-left: 1.6rem; margin: 0.4rem 0; }
html body .benefit-list li::before {
  content: ""; position: absolute; left: 0.1rem; top: 0.42em;
  width: 0.85rem; height: 0.5rem;
  border-left: 3px solid var(--v-roxo); border-bottom: 3px solid var(--v-roxo);
  transform: rotate(-45deg);
}

/* ---------- empresas (Vagoou RH) ---------- */
html body .employer-hero { background: var(--v-tinta); color: var(--v-branco); }
html body .employer-hero h1 { color: var(--v-branco); font-stretch: 118%; font-size: clamp(2.1rem, 4.4vw, 3.8rem); max-width: 16ch; }
html body .employer-hero p { color: rgba(255, 255, 255, 0.8); }
html body .employer-hero .hero-label, html body .employer-hero .eyebrow { color: var(--v-lima); }

/* ---------- rodapé ---------- */
html body .site-footer { background: var(--v-tinta); color: rgba(255, 255, 255, 0.75); border: 0; }
html body .site-footer h3 { color: var(--v-branco); font-size: 1rem; font-stretch: 100%; letter-spacing: 0; text-transform: none; }
html body .footer-links a { color: rgba(255, 255, 255, 0.75); text-decoration: none; }
html body .footer-links a:hover { color: var(--v-lima); }
html body .footer-brand p { color: rgba(255, 255, 255, 0.75); }
html body .footer-socials a { color: var(--v-branco); border-color: rgba(255, 255, 255, 0.22); }
html body .footer-socials a:hover { color: var(--v-tinta); background: var(--v-lima); border-color: var(--v-lima); }
html body .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.6); }
html body .footer-signoff strong { color: var(--v-lima); }

/* ---------- painéis (candidato, Vagoou RH, admin) ---------- */
html body .panel-sidebar {
  background: var(--v-tinta);
  border-right: 0;
  color: rgba(255, 255, 255, 0.78);
}
html body .panel-sidebar .company-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--v-branco);
}
html body .panel-sidebar .company-card strong { color: var(--v-branco); }
html body .panel-sidebar .company-card small { color: rgba(255, 255, 255, 0.6); }
html body .panel-sidebar .company-avatar, html body .panel-sidebar .candidate-avatar { background: var(--v-lima); color: var(--v-tinta); }
html body .panel-product-name { background: var(--v-lima); color: var(--v-tinta); border-radius: 6px; font-weight: 800; }
html body .panel-nav-section { color: rgba(255, 255, 255, 0.5); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
html body .panel-nav a {
  position: relative;
  color: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}
html body .panel-nav a:hover { background: rgba(255, 255, 255, 0.07); color: var(--v-branco); }
html body .panel-nav a.active {
  background: rgba(215, 248, 91, 0.1);
  color: var(--v-branco);
}
html body .panel-nav a.active::before {
  content: "";
  position: absolute;
  left: -0.5rem; top: 0.45rem; bottom: 0.45rem;
  width: 3px;
  border-radius: 3px;
  background: var(--v-lima);
}
html body .panel-nav a.active .nav-icon { color: var(--v-lima); }
html body .nav-icon { color: rgba(255, 255, 255, 0.62); }
html body .panel-nav-disabled { color: rgba(255, 255, 255, 0.38); }
html body .panel-nav-disabled small { color: rgba(255, 255, 255, 0.38); }
html body .panel-sidebar-footer a, html body .panel-sidebar-footer .sidebar-link { color: rgba(255, 255, 255, 0.72); }
html body .panel-sidebar-footer a:hover, html body .panel-sidebar-footer .sidebar-link:hover { color: var(--v-lima); }

html body .panel-topbar {
  background: var(--v-branco);
  border-bottom: 1px solid var(--v-linha);
  box-shadow: none;
}
html body .panel-topbar h1 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-stretch: 112%; margin: 0; }
html body .panel-topbar .eyebrow { margin-bottom: 0.15rem; font-size: 0.875rem; }

/* tabelas */
html body .panel-table-wrap { border: 1.5px solid var(--v-linha); border-radius: var(--v-raio-card); background: var(--v-branco); overflow-x: auto; }
html body .panel-table { border-collapse: collapse; width: 100%; }
html body .panel-table th {
  background: var(--v-nevoa);
  color: var(--v-suave);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  border-bottom: 1.5px solid var(--v-linha);
}
html body .panel-table td { border-bottom: 1px solid var(--v-linha); color: var(--v-texto); }
html body .panel-table tr:last-child td { border-bottom: 0; }
html body .panel-table tbody tr:hover td { background: #FBFAFE; }

/* processo seletivo */
html body .pipeline-column { background: var(--v-branco); border: 1.5px solid var(--v-linha); border-radius: var(--v-raio-card); }
html body .pipeline-card { background: var(--v-branco); border: 1.5px solid var(--v-linha); border-radius: 12px; box-shadow: none; }
html body .pipeline-card:hover { border-color: var(--v-roxo); }

/* destaques do painel RH */
html body .rh-dashboard-hero { background: var(--v-roxo); color: var(--v-branco); border-radius: 18px; border: 0; }
html body .rh-dashboard-hero h2, html body .rh-dashboard-hero strong { color: var(--v-branco); }
html body .rh-dashboard-hero p { color: rgba(255, 255, 255, 0.84); }
html body .upgrade-banner { background: var(--v-tinta); color: var(--v-branco); border-radius: var(--v-raio-card); border: 0; }
html body .upgrade-banner h2, html body .upgrade-banner h3, html body .upgrade-banner strong { color: var(--v-branco); }
html body .upgrade-banner p { color: rgba(255, 255, 255, 0.8); }

/* progresso de perfil */
html body .profile-progress { background: var(--v-nevoa); border-radius: 999px; overflow: hidden; }
html body .profile-progress span, html body .profile-progress > div, html body .stage-bar span { background: var(--v-roxo); }
html body .match-score { background: var(--v-lima); color: var(--v-tinta); font-weight: 800; border-radius: 10px; }

/* upload */
html body .file-upload { border: 1.5px dashed #CFC9DE; border-radius: var(--v-raio-card); background: var(--v-nevoa); }
html body .file-upload:hover { border-color: var(--v-roxo); }
html body .file-upload-icon { color: var(--v-roxo); }

/* ---------- responsivo ---------- */
@media (max-width: 980px) {
  html body .v-hero-grid { grid-template-columns: 1fr; }
  html body .v-hero-check { position: absolute; right: 1rem; top: 1.1rem; width: 4.75rem; margin: 0; z-index: -1; }
  html body .v-hero h1 { max-width: 11ch; }
  html body .opening-layout, html body .recruitment-layout, html body .about-layout,
  html body .jobs-layout, html body .detail-layout, html body .auth-grid { grid-template-columns: 1fr; }
  html body .detail-sidebar { position: static; }
  html body .pathway-inner { grid-template-columns: 1fr; }
  html body .pathway-inner a + a { padding-left: 0; border-left: 0; }
}

@media (max-width: 720px) {
  html body .v-hero::after { height: 9.5rem; }
  html body .v-hero h1 { font-size: clamp(2rem, 9.4vw, 2.6rem); font-stretch: 106%; max-width: none; }
  html body .v-hero .opportunity-search { grid-template-columns: 1fr; padding: 0.4rem; }
  html body .v-hero .search-field + .search-field { border-left: 0; border-top: 1.5px solid var(--v-linha); }
  html body .v-hero .opportunity-search .button { min-height: 3.25rem; margin-top: 0.4rem; width: 100%; }
  html body .opportunity-row, html body .job-row { grid-template-columns: auto minmax(0, 1fr); }
  html body .opportunity-side, html body .job-row-side { grid-column: 2; text-align: left; justify-items: start; }
  html body .platform-numbers { grid-template-columns: 1fr 1fr; }
  html body .category-links a { font-size: 1.6rem; }
  html body .site-nav a { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html body .v-hero-check path { animation: none; stroke-dashoffset: 0; }
  html body .button, html body .pathway-inner a > svg:last-child, html body .category-links a svg { transition: none; }
}