/* ==========================================================================
   VALENTES RH — folha de estilo principal
   Paleta: ouro da marca + azul-marinho de confiança
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ouro da marca */
  --ouro-100: #FBF3DC;
  --ouro-200: #F5E3B0;
  --ouro-300: #EED87F;
  --ouro-400: #E4C356;
  --ouro-500: #D6A428;
  --ouro-600: #B98A1B;
  --ouro-700: #8F6912;

  /* Azul de confiança */
  --azul-50:  #EEF4FB;
  --azul-100: #D7E5F5;
  --azul-300: #6FA3DC;
  --azul-500: #1E5FA8;
  --azul-600: #17497F;

  /* Marinho */
  --marinho-950: #050E1B;
  --marinho-900: #08182C;
  --marinho-850: #0A1F38;
  --marinho-800: #0D2340;
  --marinho-700: #123156;
  --marinho-600: #1B426E;

  /* Neutros */
  --tinta: #101A28;
  --tinta-media: #46586E;
  --tinta-suave: #6C7C90;
  --linha: #E3E9F1;
  --linha-forte: #CBD6E4;
  --fundo: #FFFFFF;
  --fundo-suave: #F5F8FC;
  --fundo-morno: #FAF7F0;

  --whats: #25D366;
  --whats-escuro: #1DA851;
  --sucesso: #12855A;
  --erro: #C2334A;

  /* Tipografia */
  --fonte-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --fonte-texto: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Estrutura */
  --largura: 1200px;
  --raio-p: 8px;
  --raio: 14px;
  --raio-g: 22px;
  --altura-cabecalho: 84px;

  --sombra-p: 0 2px 8px rgba(8, 24, 44, .06);
  --sombra: 0 14px 40px -18px rgba(8, 24, 44, .22);
  --sombra-g: 0 30px 70px -30px rgba(8, 24, 44, .4);

  --transicao: 260ms cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset e base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-cabecalho) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-display);
  line-height: 1.14;
  letter-spacing: -.022em;
  margin: 0 0 .5em;
  color: var(--marinho-900);
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 1.35rem + 3.4vw, 4.05rem); font-weight: 700; }
h2 { font-size: clamp(1.85rem, 1.25rem + 2.1vw, 2.85rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 1.02rem + .5vw, 1.4rem); font-weight: 600; }

p { margin: 0 0 1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--azul-500); text-decoration: none; transition: color var(--transicao); }
a:hover { color: var(--azul-600); }

img, svg { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

button { font: inherit; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--ouro-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--marinho-900);
  color: #fff;
  padding: .8rem 1.4rem;
  border-radius: 0 0 var(--raio-p) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.container {
  width: min(100% - 2.5rem, var(--largura));
  margin-inline: auto;
}

.icone { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

/* --------------------------------------------------------------------------
   3. Botões
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--marinho-900);
  --btn-cor: #fff;
  --btn-borda: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.7rem;
  font-family: var(--fonte-display);
  font-size: .97rem;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  color: var(--btn-cor);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-borda);
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--transicao), box-shadow var(--transicao),
              background-color var(--transicao), color var(--transicao),
              border-color var(--transicao);
}
.btn:hover { transform: translateY(-2px); color: var(--btn-cor); }
.btn:active { transform: translateY(0); }

.btn--ouro {
  --btn-bg: linear-gradient(135deg, var(--ouro-400), var(--ouro-600));
  --btn-cor: var(--marinho-950);
  box-shadow: 0 10px 26px -12px rgba(214, 164, 40, .85);
}
.btn--ouro:hover { box-shadow: 0 16px 34px -12px rgba(214, 164, 40, .95); }

.btn--azul {
  --btn-bg: var(--azul-500);
  box-shadow: 0 10px 26px -12px rgba(30, 95, 168, .8);
}
.btn--azul:hover { --btn-bg: var(--azul-600); box-shadow: 0 16px 34px -12px rgba(30, 95, 168, .9); }

.btn--whats { --btn-bg: var(--whats); --btn-cor: #04301A; }
.btn--whats:hover { --btn-bg: var(--whats-escuro); --btn-cor: #fff; }

.btn--contorno {
  --btn-bg: transparent;
  --btn-cor: #fff;
  --btn-borda: rgba(255, 255, 255, .38);
  backdrop-filter: blur(6px);
}
.btn--contorno:hover { --btn-bg: rgba(255, 255, 255, .12); --btn-borda: rgba(255, 255, 255, .8); }

.btn--contorno-escuro {
  --btn-bg: transparent;
  --btn-cor: var(--marinho-900);
  --btn-borda: var(--linha-forte);
}
.btn--contorno-escuro:hover { --btn-borda: var(--marinho-900); --btn-bg: rgba(8, 24, 44, .04); }

.btn--fantasma {
  --btn-bg: transparent;
  --btn-cor: var(--marinho-900);
  --btn-borda: transparent;
  padding-inline: .9rem;
}
.btn--fantasma:hover { --btn-bg: var(--fundo-suave); }

.btn--pequeno { padding: .62rem 1.15rem; font-size: .875rem; }
.btn--grande { padding: 1.15rem 2.2rem; font-size: 1.05rem; }
.btn--bloco { width: 100%; }

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--azul-500);
}
.link-seta .icone { transition: transform var(--transicao); }
.link-seta:hover .icone { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   4. Elementos de seção
   -------------------------------------------------------------------------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .9rem;
  font-family: var(--fonte-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ouro-700);
}
.kicker::before {
  content: '';
  width: 26px;
  height: 2px;
  background: linear-gradient(90deg, var(--ouro-500), transparent);
}

.secao-cabecalho { max-width: 62ch; margin-bottom: 3.2rem; }
.secao-cabecalho--centro { margin-inline: auto; text-align: center; }
.secao-cabecalho--centro .kicker::before { display: none; }
.secao-cabecalho__texto { color: var(--tinta-media); font-size: 1.06rem; }

.secao-cabecalho--linha {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  max-width: none;
}
.secao-cabecalho--linha > div { max-width: 60ch; }

.secao-cabecalho--claro h2 { color: #fff; }
.secao-cabecalho--claro .secao-cabecalho__texto { color: rgba(255, 255, 255, .74); }
.secao-cabecalho--claro .kicker { color: var(--ouro-300); }

section { padding-block: clamp(4rem, 2.4rem + 5vw, 7rem); }

/* --------------------------------------------------------------------------
   5. Cabeçalho
   -------------------------------------------------------------------------- */
.cabecalho {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--altura-cabecalho);
  display: flex;
  align-items: center;
  transition: background-color var(--transicao), box-shadow var(--transicao),
              height var(--transicao), border-color var(--transicao);
  border-bottom: 1px solid transparent;
}
.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: min(100% - 2.5rem, var(--largura));
  margin-inline: auto;
}

.cabecalho.is-fixo {
  height: 72px;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--linha);
  box-shadow: var(--sombra-p);
}

.marca { display: inline-flex; align-items: center; gap: .7rem; color: inherit; }
.marca__simbolo { width: 46px; height: 46px; object-fit: contain; transition: width var(--transicao), height var(--transicao); }
.cabecalho.is-fixo .marca__simbolo { width: 40px; height: 40px; }

.marca__texto {
  display: flex;
  flex-direction: column;
  font-family: var(--fonte-display);
  line-height: 1;
}
.marca__texto strong {
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
  transition: color var(--transicao);
}
.marca__texto span {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .34em;
  color: var(--ouro-400);
  margin-top: 3px;
}
.cabecalho.is-fixo .marca__texto strong { color: var(--marinho-900); }

.navegacao { display: flex; align-items: center; gap: 2rem; }
.navegacao__lista { display: flex; align-items: center; gap: 1.7rem; }
.navegacao__lista a {
  position: relative;
  font-size: .95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .86);
  transition: color var(--transicao);
}
.navegacao__lista a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--ouro-500);
  transition: width var(--transicao);
}
.navegacao__lista a:hover { color: #fff; }
.navegacao__lista a:hover::after { width: 100%; }

.cabecalho.is-fixo .navegacao__lista a { color: var(--tinta-media); }
.cabecalho.is-fixo .navegacao__lista a:hover { color: var(--marinho-900); }

.navegacao__acoes { display: flex; align-items: center; gap: .6rem; }
.navegacao__acoes .btn--fantasma { --btn-cor: rgba(255, 255, 255, .9); }
.navegacao__acoes .btn--fantasma:hover { --btn-bg: rgba(255, 255, 255, .12); --btn-cor: #fff; }
.cabecalho.is-fixo .navegacao__acoes .btn--fantasma { --btn-cor: var(--marinho-900); }
.cabecalho.is-fixo .navegacao__acoes .btn--fantasma:hover { --btn-bg: var(--fundo-suave); }

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 11px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 12px;
}
.menu-toggle span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform var(--transicao), opacity var(--transicao), background-color var(--transicao);
}
.cabecalho.is-fixo .menu-toggle { background: var(--fundo-suave); border-color: var(--linha); }
.cabecalho.is-fixo .menu-toggle span { background: var(--marinho-900); }

.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(100svh, 880px);
  padding-block: calc(var(--altura-cabecalho) + 3.5rem) 4.5rem;
  overflow: hidden;
  background: var(--marinho-950);
  isolation: isolate;
}

.hero__fundos { position: absolute; inset: 0; z-index: -3; }
.hero__fundo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1100ms ease, transform 8000ms linear;
}
.hero__fundo.is-ativo { opacity: 1; transform: scale(1); }

.hero__veu {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(5, 14, 27, .96) 0%, rgba(5, 14, 27, .84) 38%, rgba(8, 24, 44, .5) 72%, rgba(8, 24, 44, .38) 100%),
    linear-gradient(0deg, rgba(5, 14, 27, .9) 0%, transparent 45%);
}
.hero__grade {
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(circle at 30% 40%, #000 0%, transparent 72%);
}

.hero__interno { position: relative; width: min(100% - 2.5rem, var(--largura)); }

.hero__slides { position: relative; }
.hero__slide {
  max-width: 46rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition: opacity 620ms ease, transform 620ms cubic-bezier(.22, .61, .36, 1), visibility 0s linear 620ms;
}
.hero__slide.is-ativo {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s, 0s, 0s;
}
.hero__slide:not(.is-ativo) {
  position: absolute;
  inset: 0 auto auto 0;
  pointer-events: none;
}

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.3rem;
  padding: .48rem 1.05rem .48rem .8rem;
  font-family: var(--fonte-display);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ouro-300);
  background: rgba(214, 164, 40, .12);
  border: 1px solid rgba(214, 164, 40, .3);
  border-radius: 100px;
}
.hero__kicker .ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ouro-400);
  box-shadow: 0 0 0 0 rgba(228, 195, 86, .6);
  animation: pulso 2.4s infinite;
}
@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 rgba(228, 195, 86, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(228, 195, 86, 0); }
  100% { box-shadow: 0 0 0 0 rgba(228, 195, 86, 0); }
}

.hero__titulo { color: #fff; margin-bottom: 1.15rem; }
.hero__titulo em {
  font-style: normal;
  background: linear-gradient(120deg, var(--ouro-300), var(--ouro-500) 55%, var(--ouro-200));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__texto {
  max-width: 40rem;
  font-size: clamp(1.02rem, .96rem + .3vw, 1.18rem);
  color: rgba(255, 255, 255, .8);
  margin-bottom: 1.6rem;
}

.hero__destaque {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 2.2rem;
  padding: .6rem 1.15rem;
  font-size: .92rem;
  font-weight: 500;
  color: #fff;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 100px;
}
.hero__destaque .icone { color: var(--ouro-400); }

.hero__acoes { display: flex; flex-wrap: wrap; gap: .85rem; }

.hero__controles {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: 3.4rem;
}
.hero__seta {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #fff;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  transition: background-color var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.hero__seta svg { width: 20px; height: 20px; fill: currentColor; }
.hero__seta:hover { background: rgba(214, 164, 40, .22); border-color: var(--ouro-500); transform: scale(1.06); }

.hero__pontos { display: flex; align-items: center; gap: .55rem; }
.hero__ponto {
  width: 34px;
  height: 4px;
  padding: 0;
  background: rgba(255, 255, 255, .22);
  border: 0;
  border-radius: 100px;
  overflow: hidden;
  transition: width var(--transicao), background-color var(--transicao);
}
.hero__ponto.is-ativo { width: 62px; background: rgba(255, 255, 255, .2); }
.hero__ponto span { display: block; width: 0; height: 100%; background: var(--ouro-500); border-radius: 100px; }
.hero__ponto.is-ativo span { animation: progresso var(--duracao-slide, 7s) linear forwards; }
.hero.is-pausado .hero__ponto.is-ativo span { animation-play-state: paused; }
@keyframes progresso { from { width: 0; } to { width: 100%; } }

/* --------------------------------------------------------------------------
   7. Indicadores
   -------------------------------------------------------------------------- */
.indicadores {
  padding-block: 0;
  margin-top: -3.6rem;
  position: relative;
  z-index: 5;
}
.indicadores__lista {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-g);
  overflow: hidden;
}
.indicadores__item {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  padding: 2.1rem 1.8rem;
  border-right: 1px solid var(--linha);
}
.indicadores__item:last-child { border-right: 0; }
.indicadores__numero {
  font-family: var(--fonte-display);
  font-size: clamp(1.9rem, 1.5rem + 1.3vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  background: linear-gradient(135deg, var(--ouro-600), var(--ouro-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.indicadores__rotulo {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: .98rem;
  color: var(--marinho-900);
  margin-top: .4rem;
}
.indicadores__detalhe { font-size: .86rem; color: var(--tinta-suave); line-height: 1.45; }

/* --------------------------------------------------------------------------
   8. Caminhos
   -------------------------------------------------------------------------- */
.caminhos { background: var(--fundo); }
.caminhos__grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
}

.caminho {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.6rem;
  border-radius: var(--raio-g);
  border: 1px solid var(--linha);
  background: var(--fundo);
  overflow: hidden;
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.caminho::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--azul-500), var(--azul-300));
}
.caminho--candidato::before { background: linear-gradient(90deg, var(--ouro-600), var(--ouro-300)); }
.caminho:hover { transform: translateY(-5px); box-shadow: var(--sombra); border-color: transparent; }

.caminho__icone {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1.4rem;
  border-radius: 16px;
  background: var(--azul-50);
  color: var(--azul-500);
}
.caminho--candidato .caminho__icone { background: var(--ouro-100); color: var(--ouro-700); }
.caminho__icone svg { width: 28px; height: 28px; fill: currentColor; }

.caminho__tag {
  font-family: var(--fonte-display);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--azul-500);
  margin-bottom: .5rem;
}
.caminho--candidato .caminho__tag { color: var(--ouro-700); }

.caminho > p { color: var(--tinta-media); }

.caminho__lista { margin: 1.4rem 0 2rem; display: grid; gap: .7rem; }
.caminho__lista li {
  position: relative;
  padding-left: 1.85rem;
  font-size: .96rem;
  color: var(--tinta-media);
  line-height: 1.5;
}
.caminho__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .42em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--azul-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231E5FA8'%3E%3Cpath d='M9.6 16.2 4.8 11.4l1.4-1.4 3.4 3.4 8-8L19 6.8l-9.4 9.4Z'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.caminho--candidato .caminho__lista li::before {
  background-color: var(--ouro-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238F6912'%3E%3Cpath d='M9.6 16.2 4.8 11.4l1.4-1.4 3.4 3.4 8-8L19 6.8l-9.4 9.4Z'/%3E%3C/svg%3E");
}

.caminho__acoes {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  flex-wrap: wrap;
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   9. Serviços
   -------------------------------------------------------------------------- */
.servicos { background: var(--fundo-suave); }

.servicos__topo {
  display: grid;
  grid-template-columns: 1fr .82fr;
  gap: 3.5rem;
  align-items: center;
  margin-bottom: 3.4rem;
}
.servicos__topo .secao-cabecalho { margin-bottom: 0; }

.servicos__imagem { position: relative; margin: 0; }
.servicos__imagem img {
  width: 100%;
  /* height:auto anula o atributo height do HTML, senao ele venceria o aspect-ratio */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-g);
}
.servicos__imagem figcaption {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: -1.6rem;
  display: grid;
  gap: .25rem;
  padding: 1.15rem 1.4rem;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--tinta-media);
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.servicos__imagem figcaption strong {
  font-family: var(--fonte-display);
  font-size: .95rem;
  color: var(--marinho-900);
}

.servicos__grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 3.4rem;
}
.servico {
  position: relative;
  padding: 2.1rem 1.9rem;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.servico:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: var(--ouro-300); }
.servico__numero {
  display: block;
  margin-bottom: .9rem;
  font-family: var(--fonte-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ouro-600);
}
.servico h3 { margin-bottom: .55rem; }
.servico p { font-size: .96rem; color: var(--tinta-media); }

.servicos__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 3rem;
  padding: 2.4rem 2.6rem;
  background: linear-gradient(120deg, #fff, var(--fundo-morno));
  border: 1px solid var(--ouro-200);
  border-radius: var(--raio-g);
}
.servicos__cta h3 { margin-bottom: .25rem; }
.servicos__cta p { color: var(--tinta-media); }
.servicos__cta-acoes { display: flex; gap: .75rem; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   10. Processo
   -------------------------------------------------------------------------- */
.processo {
  position: relative;
  background: var(--marinho-900);
  overflow: hidden;
}
.processo::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -12%;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 164, 40, .16), transparent 65%);
  pointer-events: none;
}
.processo .container { position: relative; }

.etapas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  counter-reset: etapa;
}
.etapa {
  position: relative;
  padding: 2.1rem 1.7rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--raio);
  transition: background-color var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.etapa:hover { background: rgba(255, 255, 255, .07); border-color: rgba(214, 164, 40, .45); transform: translateY(-4px); }
.etapa::after {
  content: '';
  position: absolute;
  top: 3.05rem;
  right: -1.2rem;
  width: 1.2rem;
  height: 1px;
  background: rgba(255, 255, 255, .16);
}
.etapa:last-child::after { display: none; }

.etapa__numero {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 1.1rem;
  font-family: var(--fonte-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--marinho-950);
  background: linear-gradient(135deg, var(--ouro-300), var(--ouro-500));
  border-radius: 12px;
}
.etapa h3 { color: #fff; margin-bottom: .5rem; }
.etapa p { font-size: .94rem; color: rgba(255, 255, 255, .68); margin-bottom: 1.1rem; }
.etapa__prazo {
  display: inline-block;
  padding: .3rem .8rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ouro-300);
  background: rgba(214, 164, 40, .12);
  border-radius: 100px;
}

/* --------------------------------------------------------------------------
   11. Clientes e depoimentos
   -------------------------------------------------------------------------- */
.clientes { background: var(--fundo); }

.clientes__grade {
  display: grid;
  /* auto-fit em vez de numero fixo: a faixa se ajusta sozinha quando
     um cliente entra ou sai da lista, sem deixar coluna vazia. */
  /* 150px e o menor quadro em que os logos ainda se leem; abaixo disso
     o auto-fit cairia para uma coluna so e cada marca ficaria gigante
     no celular. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 3.6rem;
}
.cliente {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 140px;
  padding: 1.5rem 1rem;
  text-align: center;
  background: var(--fundo-suave);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.cliente:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: var(--ouro-300); background: #fff; }
.cliente--logo { gap: 0; justify-content: stretch; }
/* Marcas com fundo proprio: o quadro inteiro vira a arte, em vez de
   um retangulo escuro solto num cartao branco. Sem filtro cinza —
   ele nao resolve fundo escuro e ainda apaga o dourado e o laranja
   das marcas que dependem de cor. */
.cliente--logo,
.cliente:has(.cliente__marca) { padding: 0; overflow: hidden; }
.cliente__marca {
  display: block;
  width: 100%;
  /* Sem padding: os PNGs ja saem do ferramentas/preparar-logos-clientes.php
     com respiro uniforme, no mesmo enquadramento 2:1. Assim toda marca
     ocupa o mesmo peso visual, seja o logo largo ou alto. */
  padding: 0;
  background: #fff;
}
.cliente__marca img {
  display: block;
  width: 100%;
  height: auto;
  /* opacidade cheia: o fundo do quadro e o da propria arte, entao
     qualquer transparencia so lavaria a cor da marca. */
  opacity: 1;
  transition: opacity var(--transicao), transform var(--transicao);
}
.cliente--logo:hover .cliente__marca img { transform: scale(1.04); }

/* Selo tipografico (cliente ainda sem arquivo de logo) ocupa exatamente o
   mesmo quadro 2:1 dos logos, senao a faixa mistura cartoes de alturas
   diferentes e parece inacabada. */
.cliente__marca--selo {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .6rem;
  aspect-ratio: 2 / 1;
  padding: .8rem;
  background: linear-gradient(160deg, #fff, var(--cinza-50, #f4f6fa));
}
.cliente--logo .cliente__detalhe { padding: .7rem 1rem .9rem; }

.cliente__selo {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  font-family: var(--fonte-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--marinho-900);
  background: linear-gradient(135deg, var(--ouro-200), var(--ouro-400));
  border-radius: 14px;
}
.cliente__nome {
  font-family: var(--fonte-display);
  font-size: .95rem;
  font-weight: 600;
  color: var(--marinho-900);
}
.cliente__detalhe { font-size: .78rem; color: var(--tinta-suave); }

.depoimentos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.depoimento {
  position: relative;
  margin: 0;
  padding: 2.3rem 2.2rem;
  background: var(--fundo-suave);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
}
.depoimento__aspas {
  width: 34px;
  height: 34px;
  margin-bottom: 1rem;
  fill: var(--ouro-400);
}
.depoimento blockquote { margin: 0 0 1.5rem; }
.depoimento blockquote p {
  font-family: var(--fonte-display);
  font-size: 1.06rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--marinho-800);
}
.depoimento figcaption { display: flex; align-items: center; gap: .9rem; }
.depoimento__avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  font-weight: 700;
  color: var(--tinta-suave);
  background: var(--linha);
  border-radius: 50%;
}
.depoimento figcaption span:last-child {
  display: flex;
  flex-direction: column;
  font-size: .88rem;
  color: var(--tinta-suave);
}
.depoimento figcaption strong {
  font-family: var(--fonte-display);
  font-size: .98rem;
  color: var(--marinho-900);
}

/* --------------------------------------------------------------------------
   12. Vagas
   -------------------------------------------------------------------------- */
.vagas-secao { background: var(--fundo-suave); }
.vagas-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.vagas-grade > div { display: flex; }

.vaga {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.9rem;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.vaga:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: var(--azul-300); }

/* Um unico link cobre o cartao inteiro: melhor alvo de clique sem
   duplicar links para leitores de tela. */
.vaga__titulo a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.vaga:focus-within { border-color: var(--azul-500); box-shadow: var(--sombra); }
.vaga__titulo a:focus-visible { outline: none; }
.vaga:focus-within::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: calc(var(--raio) + 4px);
  outline: 3px solid var(--ouro-500);
  pointer-events: none;
}
.vaga:hover .link-seta .icone { transform: translateX(4px); }

.vaga__topo { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: 1rem; }
.vaga__area {
  font-family: var(--fonte-display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ouro-700);
}

.etiqueta {
  padding: .28rem .7rem;
  font-size: .74rem;
  font-weight: 600;
  border-radius: 100px;
  white-space: nowrap;
}
.etiqueta--presencial { color: var(--azul-600); background: var(--azul-50); }
.etiqueta--hibrido { color: var(--ouro-700); background: var(--ouro-100); }
.etiqueta--remoto { color: #0E6B4B; background: #E1F5ED; }

.vaga__titulo { margin-bottom: .6rem; font-size: 1.18rem; }
.vaga__titulo a { color: var(--marinho-900); }
.vaga__titulo a:hover { color: var(--azul-500); }

.vaga__resumo { font-size: .94rem; color: var(--tinta-media); margin-bottom: 1.3rem; }

.vaga__meta { display: grid; gap: .5rem; margin-bottom: 1.5rem; }
.vaga__meta li {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .88rem;
  color: var(--tinta-suave);
}
.vaga__meta .icone { color: var(--azul-300); }

.vaga__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linha);
}
.vaga__data { font-size: .8rem; color: var(--tinta-suave); }

/* --------------------------------------------------------------------------
   13. Candidatos
   -------------------------------------------------------------------------- */
.candidatos { background: var(--fundo); }
.candidatos__interno {
  display: grid;
  grid-template-columns: .85fr 1fr;
  gap: 4rem;
  align-items: center;
}
.candidatos__imagem { margin: 0; position: relative; }
.candidatos__imagem img {
  width: 100%;
  /* height:auto anula o atributo height do HTML, senao ele venceria o aspect-ratio */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-g);
}
.candidatos__imagem::after {
  content: '';
  position: absolute;
  inset: auto -18px -18px auto;
  width: 130px;
  height: 130px;
  border: 2px solid var(--ouro-300);
  border-radius: var(--raio-g);
  z-index: -1;
}

.candidatos__texto { color: var(--tinta-media); font-size: 1.05rem; margin-bottom: 2rem; }

.candidatos__passos { display: grid; gap: 1.35rem; margin-bottom: 2.4rem; counter-reset: passo; }
.candidatos__passos li {
  position: relative;
  padding-left: 3.4rem;
  counter-increment: passo;
  font-size: .96rem;
  color: var(--tinta-media);
  line-height: 1.55;
}
.candidatos__passos li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font-family: var(--fonte-display);
  font-size: .92rem;
  font-weight: 700;
  color: var(--ouro-700);
  background: var(--ouro-100);
  border: 1px solid var(--ouro-200);
  border-radius: 50%;
}
.candidatos__passos strong {
  display: block;
  font-family: var(--fonte-display);
  font-size: 1.02rem;
  color: var(--marinho-900);
  margin-bottom: .15rem;
}

.candidatos__acoes { display: flex; gap: .8rem; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   14. Contato
   -------------------------------------------------------------------------- */
.contato { background: var(--fundo-suave); }
.contato__grade { display: grid; grid-template-columns: .85fr 1fr; gap: 3.5rem; align-items: start; }

.contato__lateral { position: sticky; top: calc(var(--altura-cabecalho) + 2rem); }
.contato__texto { color: var(--tinta-media); margin-bottom: 2rem; }

.contato__canais { display: grid; gap: .8rem; margin-bottom: 1.8rem; }
.contato__canais a,
.contato__canal-estatico {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  color: var(--tinta);
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.contato__canais a:hover { transform: translateX(4px); box-shadow: var(--sombra); border-color: var(--ouro-300); }
.contato__canais a > span:last-child,
.contato__canal-estatico > span:last-child {
  display: flex;
  flex-direction: column;
  font-size: .96rem;
  color: var(--tinta-media);
}
.contato__canais strong {
  font-family: var(--fonte-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.contato__icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--azul-50);
  color: var(--azul-500);
  flex: none;
}
.contato__icone svg { width: 22px; height: 22px; fill: currentColor; }
.contato__icone--whats { background: rgba(37, 211, 102, .13); color: var(--whats-escuro); }

.contato__nota { font-size: .88rem; color: var(--tinta-suave); }

.contato__formularios {
  padding: 2.4rem;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
}

.abas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem;
  padding: .35rem;
  margin-bottom: 2rem;
  background: var(--fundo-suave);
  border-radius: 100px;
}
.abas__botao {
  padding: .78rem 1rem;
  font-family: var(--fonte-display);
  font-size: .93rem;
  font-weight: 600;
  color: var(--tinta-suave);
  background: transparent;
  border: 0;
  border-radius: 100px;
  transition: background-color var(--transicao), color var(--transicao), box-shadow var(--transicao);
}
.abas__botao.is-ativo {
  color: var(--marinho-900);
  background: #fff;
  box-shadow: var(--sombra-p);
}

.formulario { display: none; }
.formulario.is-ativo { display: block; }
.formulario__linha { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.campo { display: flex; flex-direction: column; margin-bottom: 1.1rem; }
.campo label {
  margin-bottom: .45rem;
  font-family: var(--fonte-display);
  font-size: .88rem;
  font-weight: 600;
  color: var(--marinho-800);
}
.campo label span { color: var(--erro); }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: .88rem 1.05rem;
  font-family: var(--fonte-texto);
  font-size: .97rem;
  color: var(--tinta);
  background: var(--fundo-suave);
  border: 1.5px solid var(--linha);
  border-radius: var(--raio-p);
  transition: border-color var(--transicao), background-color var(--transicao), box-shadow var(--transicao);
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo input::placeholder,
.campo textarea::placeholder { color: #9AA8B8; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--azul-500);
  box-shadow: 0 0 0 4px rgba(30, 95, 168, .12);
}

.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236C7C90'%3E%3Cpath d='m12 15-5-5h10l-5 5Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 20px;
  padding-right: 2.6rem;
}

.consentimento {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: start;
  padding: 1rem 1.15rem;
  margin-bottom: 1.1rem;
  background: var(--fundo-suave);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
}
.consentimento input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: .2rem 0 0;
  accent-color: var(--azul-500);
  cursor: pointer;
  flex: none;
}
.consentimento label {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: .88rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--tinta-media);
  cursor: pointer;
}
.consentimento:focus-within { border-color: var(--azul-500); }

.campo__ajuda {
  margin-top: .35rem;
  font-size: .82rem;
  color: var(--tinta-suave);
}

.campo-armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario__aviso { font-size: .82rem; color: var(--tinta-suave); margin: 1.3rem 0; }

.aviso {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.6rem;
  font-size: .93rem;
  border-radius: var(--raio-p);
  border: 1px solid;
}
.aviso--sucesso { color: #0B5F42; background: #EDF9F3; border-color: #B8E6D2; }
.aviso--erro { color: #8C1F31; background: #FDF0F2; border-color: #F3C6CE; flex-direction: column; gap: .4rem; }
.aviso--erro ul { padding-left: 1.2rem; }
.aviso--erro li { list-style: disc; }
.aviso--info { color: var(--azul-600); background: var(--azul-50); border-color: var(--azul-100); }
.aviso--atencao { color: #8A5A0B; background: var(--fundo-morno); border-color: var(--ouro-200); }
.aviso .icone { color: currentColor; margin-top: .15rem; flex: none; }
.aviso--sucesso .icone { color: var(--sucesso); }
.aviso code {
  padding: .1rem .35rem;
  font-size: .88em;
  background: rgba(8, 24, 44, .07);
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */
.faq { background: var(--fundo); }
.faq__lista { max-width: 860px; margin-inline: auto; display: grid; gap: .7rem; }

.faq__item {
  padding: 0 1.6rem;
  background: var(--fundo-suave);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  transition: border-color var(--transicao), background-color var(--transicao);
}
.faq__item[open] { background: #fff; border-color: var(--ouro-300); box-shadow: var(--sombra-p); }

.faq__item summary {
  position: relative;
  padding: 1.35rem 2.6rem 1.35rem 0;
  font-family: var(--fonte-display);
  font-size: 1.03rem;
  font-weight: 600;
  color: var(--marinho-900);
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 26px;
  height: 26px;
  transform: translateY(-50%);
  background: var(--ouro-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238F6912'%3E%3Cpath d='M11 5h2v14h-2z'/%3E%3Cpath d='M5 11h14v2H5z'/%3E%3C/svg%3E") center / 15px no-repeat;
  border-radius: 50%;
  transition: transform var(--transicao);
}
.faq__item[open] summary::after { transform: translateY(-50%) rotate(135deg); }

.faq__item > p {
  padding-bottom: 1.5rem;
  font-size: .97rem;
  color: var(--tinta-media);
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   16. CTA final
   -------------------------------------------------------------------------- */
.cta-final {
  position: relative;
  background: linear-gradient(120deg, var(--marinho-950), var(--marinho-800) 60%, var(--marinho-700));
  overflow: hidden;
}
.cta-final::before {
  content: '';
  position: absolute;
  bottom: -45%;
  left: -8%;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 164, 40, .2), transparent 62%);
}
.cta-final__interno {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}
.cta-final__interno > div:first-child { max-width: 44rem; }
.cta-final h2 { color: #fff; }
.cta-final p { color: rgba(255, 255, 255, .74); }
.cta-final .kicker { color: var(--ouro-300); }
.cta-final__acoes { display: flex; flex-direction: column; gap: .8rem; }

/* --------------------------------------------------------------------------
   17. Rodapé
   -------------------------------------------------------------------------- */
.rodape {
  padding-block: 4.5rem 2rem;
  background: var(--marinho-950);
  color: rgba(255, 255, 255, .68);
  font-size: .94rem;
}
.rodape__topo {
  display: grid;
  grid-template-columns: 1.15fr 2fr;
  gap: 4rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.marca--claro .marca__texto strong { color: #fff; }
.rodape__descricao { margin-top: 1.3rem; max-width: 40ch; line-height: 1.6; }

.rodape__redes { display: flex; gap: .6rem; margin-top: 1.5rem; }
.rodape__redes a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao);
}
.rodape__redes a:hover { background: rgba(214, 164, 40, .18); border-color: var(--ouro-500); color: var(--ouro-300); }
.rodape__redes .icone { width: 20px; height: 20px; }

.rodape__colunas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.rodape__coluna h3 {
  margin-bottom: 1.1rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ouro-400);
}
.rodape__coluna ul { display: grid; gap: .65rem; }
.rodape__coluna a { color: rgba(255, 255, 255, .68); }
.rodape__coluna a:hover { color: #fff; }

.rodape__contatos li > a,
.rodape__horario {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
}
.rodape__contatos span:last-child { display: flex; flex-direction: column; }
.rodape__contatos strong {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}
.rodape__contatos .icone { margin-top: .3rem; color: var(--ouro-400); }

.rodape__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 1.8rem;
  font-size: .84rem;
  color: rgba(255, 255, 255, .45);
}
.rodape__base p { margin: 0; }
.rodape__lgpd { max-width: 62ch; }

/* --------------------------------------------------------------------------
   18. WhatsApp flutuante
   -------------------------------------------------------------------------- */
.whats-flutuante {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 14px;
  color: #fff;
  background: var(--whats);
  border-radius: 100px;
  box-shadow: 0 14px 34px -10px rgba(37, 211, 102, .7);
  transform: translateY(90px);
  opacity: 0;
  transition: transform 420ms cubic-bezier(.22, .61, .36, 1), opacity 420ms ease, background-color var(--transicao);
}
.whats-flutuante.is-visivel { transform: none; opacity: 1; }
.whats-flutuante:hover { background: var(--whats-escuro); color: #fff; }
.whats-flutuante svg { width: 30px; height: 30px; fill: currentColor; flex: none; }
.whats-flutuante__balao {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--fonte-display);
  font-size: .92rem;
  font-weight: 600;
  transition: max-width 420ms cubic-bezier(.22, .61, .36, 1), padding-right 420ms ease;
}
.whats-flutuante:hover .whats-flutuante__balao,
.whats-flutuante:focus-visible .whats-flutuante__balao { max-width: 260px; padding-right: 10px; }

/* --------------------------------------------------------------------------
   19. Páginas internas
   -------------------------------------------------------------------------- */
.pagina-topo {
  position: relative;
  padding-block: calc(var(--altura-cabecalho) + 4rem) 4rem;
  background: linear-gradient(120deg, var(--marinho-950), var(--marinho-800));
  color: #fff;
  overflow: hidden;
}
.pagina-topo::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -6%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 164, 40, .18), transparent 65%);
}
.pagina-topo .container { position: relative; }
.pagina-topo h1 { color: #fff; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); }
.pagina-topo p { color: rgba(255, 255, 255, .76); max-width: 60ch; }
.pagina-topo .kicker { color: var(--ouro-300); }

.migalhas { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; font-size: .86rem; }
.migalhas a { color: rgba(255, 255, 255, .6); }
.migalhas a:hover { color: var(--ouro-300); }
.migalhas span { color: rgba(255, 255, 255, .34); }

.filtros {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 1.5rem;
  margin-bottom: 2.5rem;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-p);
}
.filtros .campo { margin-bottom: 0; flex: 1 1 220px; }

.vazio {
  padding: 4rem 2rem;
  text-align: center;
  background: var(--fundo-suave);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-g);
}
.vazio h3 { margin-bottom: .5rem; }
.vazio p { color: var(--tinta-media); margin-bottom: 1.6rem; max-width: 52ch; margin-inline: auto; }
.vazio__acoes { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* Filtros da listagem -------------------------------------------------- */
.filtros__busca { flex: 2 1 280px; }
.filtros__acoes { display: flex; gap: .6rem; flex-wrap: wrap; }

.vagas-secao__contagem {
  margin-bottom: 1.6rem;
  font-size: .95rem;
  color: var(--tinta-media);
}
.vagas-secao__contagem strong { color: var(--marinho-900); font-family: var(--fonte-display); }

.link-claro { color: var(--ouro-300); text-decoration: underline; text-underline-offset: 3px; }
.link-claro:hover { color: var(--ouro-200); }

/* Paginacao ------------------------------------------------------------ */
.paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 3rem;
}
.paginacao__seta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem 1.2rem;
  font-family: var(--fonte-display);
  font-size: .92rem;
  font-weight: 600;
  color: var(--marinho-900);
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 100px;
  transition: border-color var(--transicao), background-color var(--transicao);
}
.paginacao__seta:hover { border-color: var(--marinho-900); color: var(--marinho-900); }
.paginacao__seta.is-inativa { opacity: .38; pointer-events: none; }

.paginacao__numeros { display: flex; align-items: center; gap: .35rem; }
.paginacao__numeros a,
.paginacao__numeros .is-atual,
.paginacao__reticencias {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding-inline: .6rem;
  font-family: var(--fonte-display);
  font-size: .93rem;
  font-weight: 600;
  border-radius: 12px;
}
.paginacao__numeros a {
  color: var(--tinta-media);
  background: #fff;
  border: 1px solid var(--linha);
  transition: border-color var(--transicao), color var(--transicao);
}
.paginacao__numeros a:hover { border-color: var(--azul-500); color: var(--azul-500); }
.paginacao__numeros .is-atual {
  color: var(--marinho-950);
  background: linear-gradient(135deg, var(--ouro-400), var(--ouro-600));
}
.paginacao__reticencias { color: var(--tinta-suave); }

.pagina-topo--vaga .pagina-topo__etiquetas {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: .4rem;
}
.pagina-topo--vaga .kicker { margin-bottom: 0; }
.pagina-topo__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  margin-top: 1.4rem;
}
.pagina-topo__meta li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .95rem;
  color: rgba(255, 255, 255, .82);
}
.pagina-topo__meta .icone { color: var(--ouro-400); }

/* Textos que vem crus da API, com quebras de linha preservadas */
.texto-corrido {
  white-space: pre-line;
  color: var(--tinta-media);
  max-width: 68ch;
}

.vaga-detalhe { display: grid; grid-template-columns: 1fr .5fr; gap: 3rem; align-items: start; }
.vaga-detalhe__conteudo h2 { font-size: 1.5rem; margin-top: 2.2rem; }
.vaga-detalhe__conteudo h2:first-child { margin-top: 0; }

.vaga-detalhe__igualdade {
  margin-top: 2.4rem;
  padding: 1.1rem 1.3rem;
  font-size: .92rem;
  color: var(--tinta-media);
  background: var(--fundo-suave);
  border-left: 3px solid var(--ouro-400);
  border-radius: 0 var(--raio-p) var(--raio-p) 0;
}

.candidatura {
  margin-top: 3rem;
  padding: 2.2rem;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  scroll-margin-top: calc(var(--altura-cabecalho) + 24px);
}
.candidatura h2 { margin-top: 0; margin-bottom: .35rem; }
.candidatura > p { color: var(--tinta-media); margin-bottom: 1.8rem; }

.vaga-detalhe__compartilhar { margin-top: 1.4rem; font-size: .92rem; }
.vaga-detalhe__lateral .btn + .btn { margin-top: .7rem; }
.vaga-detalhe__conteudo ul { display: grid; gap: .6rem; margin-bottom: 1.5rem; }
.vaga-detalhe__conteudo ul li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--tinta-media);
}
.vaga-detalhe__conteudo ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  background: var(--ouro-500);
  border-radius: 50%;
}

.vaga-detalhe__lateral {
  position: sticky;
  top: calc(var(--altura-cabecalho) + 2rem);
  padding: 2rem;
  background: var(--fundo-suave);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
}
.vaga-detalhe__lateral h3 { margin-bottom: 1.2rem; }
.ficha { display: grid; gap: .9rem; margin-bottom: 1.7rem; }
.ficha div { display: flex; flex-direction: column; }
.ficha dt {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.ficha dd { margin: 0; font-family: var(--fonte-display); font-weight: 600; color: var(--marinho-900); }

/* --------------------------------------------------------------------------
   20. Animação de entrada
   -------------------------------------------------------------------------- */
/* Só esconde quando o JS está ativo: sem JS, todo o conteúdo aparece. */
.js [data-revelar] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 640ms ease, transform 640ms cubic-bezier(.22, .61, .36, 1);
}
.js [data-revelar].is-visivel { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   21. Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .servicos__grade { grid-template-columns: repeat(2, 1fr); }
  .etapas { grid-template-columns: repeat(2, 1fr); }
  .etapa::after { display: none; }
  .vagas-grade { grid-template-columns: repeat(2, 1fr); }
  .indicadores__lista { grid-template-columns: repeat(2, 1fr); }
  .indicadores__item:nth-child(2) { border-right: 0; }
  .indicadores__item:nth-child(-n+2) { border-bottom: 1px solid var(--linha); }
  .servicos__topo { grid-template-columns: 1fr; gap: 2.5rem; }
  .servicos__imagem { max-width: 620px; }
  .rodape__topo { grid-template-columns: 1fr; gap: 3rem; }
}

@media (max-width: 940px) {
  :root { --altura-cabecalho: 74px; }

  .menu-toggle { display: flex; }

  .navegacao {
    position: fixed;
    inset: var(--altura-cabecalho) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: 0;
    padding-inline: 1.25rem;
    background: #fff;
    border-bottom: 1px solid var(--linha);
    box-shadow: var(--sombra);
    overflow: hidden;
    transition: max-height 380ms cubic-bezier(.22, .61, .36, 1), padding-block 380ms ease;
  }
  .navegacao.is-aberto { max-height: 80vh; padding-block: 1rem 1.5rem; overflow-y: auto; }

  .navegacao__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .navegacao__lista a {
    display: block;
    padding: .95rem .25rem;
    font-size: 1.02rem;
    color: var(--marinho-900);
    border-bottom: 1px solid var(--linha);
  }
  .navegacao__lista a::after { display: none; }

  .navegacao__acoes { flex-direction: column; align-items: stretch; gap: .6rem; margin-top: 1.2rem; }
  .navegacao__acoes .btn { width: 100%; --btn-cor: var(--marinho-900); }
  .navegacao__acoes .btn--fantasma { border-color: var(--linha-forte); }
  .navegacao__acoes .btn--whats { --btn-cor: #04301A; }

  .caminhos__grade { grid-template-columns: 1fr; }
  .candidatos__interno { grid-template-columns: 1fr; gap: 2.5rem; }
  .candidatos__imagem { max-width: 460px; }
  .contato__grade { grid-template-columns: 1fr; gap: 2.5rem; }
  .contato__lateral { position: static; }
  .depoimentos { grid-template-columns: 1fr; }
  .vaga-detalhe { grid-template-columns: 1fr; }
  .vaga-detalhe__lateral { position: static; }
  .secao-cabecalho--linha { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }

  .hero { min-height: auto; padding-block: calc(var(--altura-cabecalho) + 3rem) 3.5rem; }
  .hero__acoes .btn { width: 100%; }
  .hero__controles { margin-top: 2.6rem; }

  .indicadores { margin-top: -2.4rem; }
  .indicadores__item { padding: 1.5rem 1.2rem; }

  .caminho { padding: 1.9rem 1.5rem; }
  .servicos__grade { grid-template-columns: 1fr; }
  .servicos__cta { padding: 1.8rem 1.5rem; }
  .servicos__cta-acoes .btn { width: 100%; }
  .etapas { grid-template-columns: 1fr; }
  .vagas-grade { grid-template-columns: 1fr; }
  .contato__formularios { padding: 1.6rem 1.3rem; }
  .formulario__linha { grid-template-columns: 1fr; gap: 0; }
  .rodape__colunas { grid-template-columns: 1fr; gap: 2rem; }
  .cta-final__acoes { width: 100%; }
  .cta-final__acoes .btn { width: 100%; }
  .whats-flutuante { right: 16px; bottom: 16px; }
  .servicos__imagem figcaption { position: static; margin-top: 1rem; left: auto; right: auto; }
}

/* --------------------------------------------------------------------------
   22. Preferências do usuário
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js [data-revelar] { opacity: 1; transform: none; }
  .hero__fundo { transform: none; }
}

@media print {
  .cabecalho, .whats-flutuante, .hero__controles, .cta-final, .contato__formularios { display: none !important; }
  body { color: #000; }
}

.vagas-secao__rodape { margin-top: 2.2rem; text-align: center; }

/* --------------------------------------------------------------------------
   23. Correcoes de telas estreitas (320-380px)
   --------------------------------------------------------------------------
   Item de grid/flex nasce com `min-width: auto`, ou seja, se recusa a
   encolher abaixo do proprio conteudo. Basta um botao com `nowrap` la
   dentro para o bloco inteiro ficar mais largo que a tela e empurrar a
   pagina para o lado. `min-width: 0` devolve o controle ao layout.
   -------------------------------------------------------------------------- */
.vaga-detalhe > *,
.contato__grade > *,
.candidatos__interno > *,
.servicos__topo > *,
.caminhos__grade > *,
.vagas-grade > *,
.indicadores__lista > *,
.indicadores__item,
.cta-final__interno > *,
.rodape__topo > *,
.secao-cabecalho--linha > * {
  min-width: 0;
}

/* E-mails e URLs longos quebram em vez de esticar o container */
body { overflow-wrap: break-word; }

@media (max-width: 430px) {
  /* Em tela estreita, um rotulo longo ("Entrar no banco de talentos")
     precisa poder quebrar em duas linhas em vez de definir a largura. */
  .btn {
    white-space: normal;
    text-align: center;
  }

  .paginacao { gap: .7rem; }
  .paginacao__seta { padding: .6rem .9rem; font-size: .86rem; }
  .paginacao__numeros a,
  .paginacao__numeros .is-atual,
  .paginacao__reticencias { min-width: 36px; height: 36px; }

  .candidatura { padding: 1.5rem 1.15rem; }
  .vaga-detalhe__lateral { padding: 1.5rem 1.25rem; }
  .filtros { padding: 1.15rem; }
  /* Alvo de toque cheio: no celular o botao de filtrar fica na
     largura toda, como o resto dos campos. */
  .filtros__acoes { width: 100%; }
  .filtros__acoes .btn { flex: 1 1 100%; }
  .pagina-topo__meta { gap: .5rem 1rem; }
}

@media (max-width: 400px) {
  /* Duas colunas de indicadores nao cabem: os rotulos longos
     ("em operacoes de todos os portes") fixavam a largura minima
     da pagina em 345px e empurravam tudo para o lado. */
  .indicadores__lista { grid-template-columns: 1fr; }
  .indicadores__item { border-right: 0; border-bottom: 1px solid var(--linha); }
  .indicadores__item:last-child { border-bottom: 0; }
}

/* E-mail e telefone sao "palavras" longas sem espaco: com min-width auto
   eles definem a largura minima do bloco e empurram a pagina. `anywhere`
   permite quebrar o token (diferente de `break-word`, ele tambem reduz a
   largura minima que o layout considera). */
.contato__canais li,
.contato__canais a,
.contato__canal-estatico,
.rodape__contatos li,
.rodape__contatos a { min-width: 0; }

.contato__canais a > span:last-child,
.contato__canal-estatico > span:last-child,
.rodape__contatos span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 680px) {
  /* No desktop a ficha fica na coluna lateral, ao lado do texto. Empilhada
     no celular ela caía depois do formulario — o candidato preenchia sem
     ter visto local, contratacao e remuneracao. Sobe para antes. */
  .vaga-detalhe__lateral { order: -1; }
}

/* --------------------------------------------------------------------------
   24. Consentimento LGPD e pagina de exclusao
   -------------------------------------------------------------------------- */

/* O texto do termo vem da API e e exibido por inteiro, com as quebras
   preservadas — o hash guardado no backend e do texto completo. */
.consentimento__texto {
  display: block;
  white-space: pre-line;
  margin-bottom: .5rem;
}
.consentimento__marca {
  display: inline-block;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  background: rgba(8, 24, 44, .05);
  padding: .18rem .5rem;
  border-radius: 4px;
}

.exclusao {
  display: grid;
  grid-template-columns: 1fr .82fr;
  gap: 3rem;
  align-items: start;
}
.exclusao > * { min-width: 0; }

.exclusao__formulario {
  padding: 2.2rem;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
}
.exclusao__formulario h2 { margin-top: 0; }
.exclusao__intro { color: var(--tinta-media); margin-bottom: 1.8rem; }

.exclusao__aviso {
  padding: 2rem;
  background: var(--fundo-suave);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
}
.exclusao__aviso h2 { font-size: 1.2rem; margin-top: 0; }
.exclusao__aviso h3 {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 2rem 0 .8rem;
}

.exclusao__lista { display: grid; gap: .9rem; margin-bottom: 0; }
.exclusao__lista li {
  position: relative;
  padding-left: 1.6rem;
  font-size: .94rem;
  color: var(--tinta-media);
  line-height: 1.55;
}
.exclusao__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  background: var(--alerta, #C2334A);
  border-radius: 2px;
}
.exclusao__lista strong { display: block; color: var(--marinho-900); }

.exclusao__passos { counter-reset: passo; display: grid; gap: .6rem; }
.exclusao__passos li {
  counter-increment: passo;
  position: relative;
  padding-left: 2.2rem;
  font-size: .94rem;
  color: var(--tinta-media);
}
.exclusao__passos li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: -.1rem;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  font-family: var(--fonte-display);
  font-size: .8rem;
  font-weight: 700;
  color: var(--azul-600);
  background: var(--azul-50);
  border-radius: 50%;
}

.exclusao__contato {
  margin-top: 1.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linha);
  font-size: .9rem;
  color: var(--tinta-suave);
}

@media (max-width: 940px) {
  .exclusao { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 430px) {
  .exclusao__formulario, .exclusao__aviso { padding: 1.5rem 1.2rem; }
}

.exclusao__novamente {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linha);
  font-size: .92rem;
  color: var(--tinta-suave);
}