/* ==================================================================
   LP Programa de Trainee Enforce 2027

   O desenho segue a LP atual da Enforce (enforce.across.jobs), que é
   o que a diretoria já aprovou. Padrões vindos de lá, não inventados:
     - Base azul profunda #130084 com sobreposição a 95% sobre foto
     - Fotos de fundo em paralaxe (lá via background-attachment:fixed)
     - Cantos de 15px nos cards e 30/50px nas pílulas
     - Tipografia Montserrat (títulos 600, corpo 400) e Ubuntu nos números
     - Mandala da cultura girando conforme o scroll (rotateZ)
     - Mosaico de quadrados azuis + tipografia contornada, do KV

   Vermelho não existe na paleta e não entra em botão nem destaque.
   ================================================================== */

/* ------------- Espelho da paleta oficial (tailwind.config) ------------- */
:root {
  --navy:    #130084;
  --azul:    #0043FF;
  --azulesc: #043BE4;
  --medio:   #264BB8;
  --acinz:   #507BB8;
  --claro:   #3EA8FF;
  --corp:    #0A4C88;
  --preto:   #1D1D1B;
  --gelo:    #EFF2EE;
  --cinza:   #7A7A7A;

  --display: 'Montserrat', Arial, sans-serif;
  --texto:   'Montserrat', Arial, sans-serif;
  --num:     'Ubuntu', Arial, sans-serif;

  --sombra:       0 4px 16px rgba(19, 0, 132, .08);
  --sombra-forte: 0 12px 32px rgba(19, 0, 132, .15);
  --rule-dark:    rgba(19, 0, 132, .12);
  --rule-light:   rgba(255, 255, 255, .22);

  --nav-h: 80px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  overflow-x: hidden;
  font-family: var(--texto);
  font-weight: 400;
  font-size: 17px;
}

::selection { background: var(--azul); color: #fff; }

:focus-visible { outline: 2px solid var(--claro); outline-offset: 3px; }

#hero :focus-visible,
.faixa-azul :focus-visible,
.parallax :focus-visible,
footer :focus-visible { outline-color: #fff; }

/* ==================================================================
   TIPOGRAFIA
   Título em Montserrat 400 com o trecho de ênfase em 700 — mesmo
   contraste de peso usado na LP atual.
   ================================================================== */

/* Títulos inteiros em negrito. O cliente pediu para Pré-requisitos,
   Sobre a empresa e Nossa Cultura; aplicado a todos para a página não
   ficar com dois padrões de título. O <strong> do HTML continua no
   lugar — serve de marcação semântica e para a quebra de linha. */
.section-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  line-height: 1.14;
  letter-spacing: -.01em;
  color: var(--navy);
}

.section-title strong { font-weight: 700; }

.section-title--light { color: #fff; }

/* "Sobre o" numa linha, "programa" na seguinte — sem isso a quebra
   cai onde couber e a palavra de ênfase fica pendurada. */
.section-title--quebra strong { display: block; }

.section-sub {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--cinza);
  max-width: 68ch;
}

.titulo-centro .section-sub { margin-left: auto; margin-right: auto; }

.prose-p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--cinza);
  max-width: 62ch;
}

/* Primeiro parágrafo do bloco "Sobre o programa": é a frase-manifesto
   do escopo, ganha corpo maior e cor da marca. */
.prose-p--lead {
  font-size: clamp(1.15rem, 2vw, 1.375rem);
  line-height: 1.5;
  font-weight: 500;
  color: var(--navy);
  max-width: 40ch;
}

.prose-p--light { color: rgba(255, 255, 255, .9); }

/* ---- Lista em bullets (Sobre o programa) ---- */

.lista-titulo {
  margin-top: 2rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--navy);
}

.lista-bullets {
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  max-width: 62ch;
}

.lista-bullets li {
  position: relative;
  padding-left: 1.9rem;
  margin-top: .85rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--cinza);
}

/* Marcador losango, o mesmo grafismo dos quadros do KV girados 45° */
.lista-bullets li::before {
  content: '';
  position: absolute;
  left: .25rem;
  top: .62em;
  width: 9px;
  height: 9px;
  background: var(--azul);
  transform: rotate(45deg);
}

.titulo-centro {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

/* ============================== BOTÕES ============================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  padding: .8rem 2rem;
  border-radius: 45px;
  border: 2px solid transparent;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.btn-lg { font-size: 15px; padding: .95rem 2.4rem; }

/* CTA do header: some no mobile, onde o hambúrguer assume. Classe
   própria — o .hidden do Tailwind empata em especificidade com .btn. */
.btn-header { display: none; }

@media (min-width: 480px) { .btn-header { display: inline-flex; } }
@media (max-width: 479px) { .btn-lg { font-size: 14px; padding: .85rem 1.7rem; } }

.btn-solid {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
}
.btn-solid:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

.btn-ghost {
  border-color: rgba(255, 255, 255, .65);
  color: #fff;
}
.btn-ghost:hover { background: #fff; border-color: #fff; color: var(--navy); }

.btn-onblue {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
}
.btn-onblue:hover { background: var(--claro); border-color: var(--claro); color: #fff; }

/* ============================== HEADER ============================== */

#header { background: transparent; }

/* A barra do topo tem que ficar acima do painel mobile: o #nav-mobile é
   filho do header e é fixed com z-index; a barra, estática, pintava por
   baixo dele — e junto ia o X, que é o mesmo burger virado. */
.header-bar { position: relative; z-index: 45; }

#header .nav-link { color: #fff; }

/* Duas artes do logo no mesmo slot: a negativa vale sobre o hero, a
   colorida entra junto com o fundo branco. Trocar via opacity evita o
   pulo de layout que um display:none causaria. */
.logo-slot { position: relative; display: inline-flex; transition: opacity .3s ease; }
.logo-slot .logo-pos { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; }
.logo-slot .logo-neg { opacity: 1; transition: opacity .3s ease; }

/* No desktop o logo do header some no topo: o KV já traz a marca
   embutida no canto inferior esquerdo, e dois "enforce community" na
   mesma tela vira redundância. No mobile o KV não entra, então ali ele
   fica visível. Ao rolar, o header fica branco e o logo volta nos dois
   casos. */
@media (min-width: 768px) {
  #header:not(.is-scrolled):not(.is-nav-aberto) .logo-slot { opacity: 0; pointer-events: none; }
}

#header.is-scrolled { background: #fff; box-shadow: 0 2px 12px rgba(19, 0, 132, .10); }
#header.is-scrolled .logo-slot .logo-neg { opacity: 0; }
#header.is-scrolled .logo-slot .logo-pos { opacity: 1; }
#header.is-scrolled .nav-link { color: var(--navy); }
#header.is-scrolled .burger-bar { background: var(--navy); }

/* Painel mobile aberto: precisa vir DEPOIS do .is-scrolled, porque as
   duas têm a mesma especificidade. Com a página rolada o header fica
   branco e apagaria o X e o logo sobre o painel azul. */
#header.is-nav-aberto { background: transparent; box-shadow: none; }
#header.is-nav-aberto .logo-slot .logo-neg { opacity: 1; }
#header.is-nav-aberto .logo-slot .logo-pos { opacity: 0; }
#header.is-nav-aberto .burger-bar { background: #fff; }

.nav-link {
  position: relative;
  font-size: .95rem;
  font-weight: 500;
  transition: color .3s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 0;
  height: 2px;
  background: var(--claro);
  transition: width .3s ease;
}

.nav-link:hover::after,
.nav-link.is-active::after { width: 100%; }

#header.is-scrolled .nav-link.is-active { color: var(--azul); }

.burger-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  transition: transform .3s ease, opacity .3s ease, background .3s ease;
}

#nav-toggle.is-open .burger-bar { background: #fff; }
#nav-toggle.is-open .burger-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
#nav-toggle.is-open .burger-bar:nth-child(2) { opacity: 0; }
#nav-toggle.is-open .burger-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

#nav-mobile.is-open { display: flex; animation: fadeIn .25s ease both; }

.nav-mobile-link {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 500;
  transition: color .3s ease;
}

.nav-mobile-link:hover { color: var(--claro); }

/* ==================================================================
   HERO
   KV provisório na linguagem do KV oficial: campo azul em degradê com
   um mosaico de quadrados de opacidades diferentes, headline sólida,
   nome do programa em tipografia contornada e os brilhos de 4 pontas.
   Assim que img/hero-kv.png existir, o <picture> cobre tudo isto.
   ================================================================== */

/* Altura da tela inteira, sem teto. O svh evita o "pulo" da barra de
   endereço no celular; o vh acima fica de fallback para navegador sem
   svh. Não colocar max-height aqui: qualquer teto quebra o 100%. */
.hero {
  height: 100vh;
  height: 100svh;
  background: linear-gradient(135deg, #1300A6 0%, var(--azul) 55%, #0B78FF 100%);
}

/* ---- Fundo vertical do mobile ----
   Provisório, montado por mim a partir dos arquivos do próprio cliente:
   o campo azul saiu da arte do KV (a faixa x<380, que é degradê puro) e
   a foto é o ENFORCE (96) com o mesmo tratamento que a arte aplica ao
   escritório — escurecido e puxado para o azul da marca.
   O KV oficial é arte fechada e não dá para virar vertical por recorte:
   a headline atravessa o campo azul E a foto, então qualquer recorte
   retangular ou duplica ou corta o logotipo.
   Quando a arte vertical chegar, ela entra como <source media> no
   <picture> do hero e esta regra pode sair inteira. */
@media (max-width: 767px) {
  .hero {
    background-image:
      linear-gradient(180deg, rgba(19, 0, 132, .28) 0%, rgba(19, 0, 132, 0) 42%),
      url('../img/hero-mobile-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* O mosaico é o vocabulário geométrico do KV; com a foto no fundo ele
     vira ruído por cima dela. */
  #hero .hero-mosaico { display: none; }

  /* Com a foto embaixo, o texto sobe para o campo azul limpo em vez de
     ficar centralizado em cima do escritório.
     Precisa do #hero: o Tailwind da CDN injeta o .items-center depois
     deste arquivo, então um seletor de classe só perderia por ordem. */
  #hero .hero-texto { align-items: flex-start; padding-top: 20vh; }
}

/* ---- Mosaico ---- */
.hero-mosaico {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  z-index: 0;
  pointer-events: none;
}

.hero-mosaico span {
  background: rgba(255, 255, 255, .05);
  opacity: 0;
  animation: mosaicoIn .9s ease forwards;
}

/* Xadrez irregular, igual ao KV: cada quadro é um azul da paleta com
   opacidade própria, alternando claro e escuro. Os valores são fixos
   de propósito — aleatório em CSS não existe e o desenho precisa ser
   sempre o mesmo. Onde o degradê já está claro entram véus escuros,
   senão o branco some. */
.hero-mosaico span:nth-child(2)  { background: rgba(255, 255, 255, .13); animation-delay: .05s }
.hero-mosaico span:nth-child(3)  { background: rgba(19, 0, 132, .22);    animation-delay: .10s }
.hero-mosaico span:nth-child(4)  { background: rgba(255, 255, 255, .17); animation-delay: .15s }
.hero-mosaico span:nth-child(5)  { background: rgba(19, 0, 132, .26);    animation-delay: .20s }
.hero-mosaico span:nth-child(6)  { background: rgba(255, 255, 255, .09); animation-delay: .25s }
.hero-mosaico span:nth-child(7)  { background: rgba(19, 0, 132, .14);    animation-delay: .30s }
.hero-mosaico span:nth-child(8)  { background: rgba(255, 255, 255, .15); animation-delay: .35s }
.hero-mosaico span:nth-child(9)  { background: rgba(255, 255, 255, .10); animation-delay: .40s }
.hero-mosaico span:nth-child(10) { background: rgba(19, 0, 132, .30);    animation-delay: .45s }
.hero-mosaico span:nth-child(11) { background: rgba(255, 255, 255, .06); animation-delay: .50s }
.hero-mosaico span:nth-child(12) { background: rgba(19, 0, 132, .18);    animation-delay: .55s }
.hero-mosaico span:nth-child(13) { background: rgba(19, 0, 132, .34);    animation-delay: .60s }
.hero-mosaico span:nth-child(14) { background: rgba(255, 255, 255, .08); animation-delay: .65s }
.hero-mosaico span:nth-child(15) { background: rgba(19, 0, 132, .20);    animation-delay: .70s }
.hero-mosaico span:nth-child(16) { background: rgba(255, 255, 255, .12); animation-delay: .75s }

@keyframes mosaicoIn { to { opacity: 1; } }

/* ---- Brilhos de 4 pontas ---- */
.brilho {
  position: absolute;
  z-index: 1;
  width: 26px;
  height: 26px;
  background: #fff;
  clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
  opacity: .9;
  animation: brilhoPulsa 3.5s ease-in-out infinite;
  pointer-events: none;
}

.brilho--1 { top: 24%; right: 26%; }
.brilho--2 { bottom: 18%; left: 22%; width: 18px; height: 18px; animation-delay: 1.2s; }
.brilho--3 { top: 62%; right: 12%; width: 12px; height: 12px; animation-delay: 2.1s; }

@keyframes brilhoPulsa {
  0%, 100% { transform: scale(1);   opacity: .9; }
  50%      { transform: scale(.65); opacity: .45; }
}

/* ---- Texto ---- */
.hero-linha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .9rem;
}

.hero-kicker {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.35rem, 3.2vw, 2.5rem);
  line-height: 1.1;
  color: #fff;
}

/* Selo contornado com o ano, exatamente como no KV atual */
.hero-selo {
  display: inline-flex;
  align-items: center;
  padding: .35em 1em;
  border: 2px solid #fff;
  border-radius: 12px;
  font-family: var(--num);
  font-weight: 400;
  font-size: clamp(1.1rem, 2.6vw, 2rem);
  line-height: 1.2;
  color: #fff;
}

/* Tipografia contornada, o traço da headline do KV */
.hero-title {
  margin-top: .35rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.6rem, 13vw, 9rem);
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 3px #fff;
  text-shadow: 0 0 40px rgba(255, 255, 255, .25);
}

/* Em telas pequenas o corpo cai muito e um traço de 3px engrossa
   demais, fechando os contornos das letras. */
@media (max-width: 767px) { .hero-title { -webkit-text-stroke-width: 2px; } }

@supports not ((-webkit-text-stroke: 2px #fff)) {
  .hero-title { color: #fff; }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2.4rem;
}

/* ---- KV oficial ----
   Some abaixo de 768px: a arte é 2.6:1 e num recorte estreito
   perderia headline e pessoas. Ali vale o bloco em HTML acima. */
.hero-kv { display: none; }

@media (min-width: 768px) {
  .hero-kv {
    display: flex;
    justify-content: center;
    position: absolute;
    inset: 0;
    z-index: 20;
  }

  /* Largura conforme pedido: base de 1140px, acompanhando a tela a
     partir daí e travando em 2000px, que é o tamanho nativo — passar
     disso só borraria. O degradê da <section> preenche as sobras
     laterais em telas muito largas.

     A altura é sempre 100% da seção (100svh). Como a arte é 2.6:1 e a
     tela costuma ser mais baixa que isso, o cover recorta pelas
     laterais — e é justamente para isso que existe a área segura de
     1144px no centro do KV: headline, pessoas e logos ficam todos
     dentro dela e sobrevivem ao recorte. */
  .hero-kv img {
    display: block;
    width: clamp(1140px, 100vw, 2000px);
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* A arte é fechada: onde ela entra, o bloco em HTML sai de cena.
     O :has garante que, se o onerror derrubar o <picture>, tudo volta
     em vez de deixar um retângulo azul vazio. */
  #hero:has(.hero-kv) .hero-texto,
  #hero:has(.hero-kv) .hero-mosaico,
  #hero:has(.hero-kv) .brilho { display: none; }
}

/* ==================================================================
   FAIXA AZUL — destaques
   Degradê da paleta com um grafismo de quadros por cima, o mesmo
   vocabulário do KV, bem discreto. É a única seção sólida escura da
   página: dá o respiro entre as duas paralaxes de ambiente.
   ================================================================== */

.faixa-azul {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(120deg, var(--navy) 0%, #1B2CC9 48%, var(--azul) 100%);
}

.faixa-azul::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 120px 120px;
  pointer-events: none;
}

/* ============================ PRÉ-REQUISITOS ============================
   Vivem dentro do painel branco, sobre a foto do escritório. */

.reqs { list-style: none; margin: 0; padding: 0; }

.req {
  display: flex;
  align-items: flex-start;
  gap: 1.15rem;
  padding: 1.35rem 0;
  border-top: 1px solid var(--rule-dark);
}

.req:last-child { border-bottom: 1px solid var(--rule-dark); }

.req-icon { flex: 0 0 auto; color: var(--azul); margin-top: .1rem; }
.req-icon svg { width: 28px; height: 28px; }

.req-text {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--navy);
}

/* Nota de rodapé do item de presencialidade: corpo menor, itálico e o
   mesmo navy do resto do texto — pedido da planilha de 31/08. O que a
   separa do item agora é o corpo e o itálico, não mais a cor. */
.req-nota {
  margin-top: .45rem;
  font-size: .875rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--navy);
}

.req-text sup, .req-nota sup { color: var(--azul); font-weight: 600; }

/* ============================== CARDS ============================== */

.card {
  background: #fff;
  border-radius: 15px;
  box-shadow: var(--sombra);
  padding: 2rem 1.75rem;
  height: 100%;
  transition: transform .3s ease, box-shadow .3s ease;
}

.card:hover { transform: translateY(-4px); box-shadow: var(--sombra-forte); }

.card-icon { display: block; color: var(--azul); margin-bottom: 1.1rem; }
.card-icon svg { width: 34px; height: 34px; }

.card-text {
  font-size: 1.0625rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--navy);
}

/* ============================== FOTOS ============================== */

.foto {
  border-radius: 15px;
  box-shadow: var(--sombra-forte);
  overflow: hidden;
}

.foto img { display: block; width: 100%; height: auto; }

/* Retrato em coluna: sem recorte a foto ficaria alta demais e
   desequilibraria a linha ao lado do texto. */
.foto--retrato img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 15%;
}

/* Sobre o programa: a foto ocupa a coluna estreita e o texto a larga.
   Um 1fr/1fr deixaria o retrato grande demais para o volume de texto. */
.programa-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }

@media (min-width: 1024px) {
  .programa-grid {
    grid-template-columns: 5fr 7fr;
    gap: 4rem;
    align-items: center;
  }
}

/* Sobre a empresa: texto à esquerda, foto à direita. A coluna da foto é
   a estreita — ela acompanha o texto em vez de dominar a seção. */
.empresa-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }

@media (min-width: 1024px) {
  .empresa-grid {
    grid-template-columns: 7fr 5fr;
    gap: 4rem;
    /* Centralizado: sem o selo do BTG o texto encurtou e, alinhado ao
       topo, sobrava uma faixa branca embaixo dele do lado da foto. */
    align-items: center;
  }
}

.foto--coluna img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  max-height: 460px;
  object-fit: cover;
  object-position: center;
}

/* 15 benefícios em linhas de 3/4 — o flex centraliza a última linha,
   que fica incompleta. Com grid ela encostaria na esquerda. */
.beneficios-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

.beneficios-grid > .card {
  flex: 1 1 240px;
  max-width: 300px;
  padding: 2rem 1.6rem;
  /* height:auto é obrigatório: item flex só estica no eixo cruzado
     quando a altura é auto. Com o height:100% herdado de .card os
     cards da mesma linha ficariam com alturas diferentes. */
  height: auto;
}

/* ============================== ETAPAS ============================== */

.timeline {
  --tl-ease: cubic-bezier(.4, 0, .2, 1);
  position: relative;
  padding: 60px 20px 0;
  margin-top: 2rem;
}

.timeline__track {
  position: absolute;
  top: 114px;
  left: 6%;
  right: 6%;
  height: 4px;
  background: rgba(19, 0, 132, .12);
  border-radius: 999px;
  z-index: 0;
  overflow: hidden;
}

.timeline__progress {
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg, var(--navy) 0%, var(--azul) 55%, var(--claro) 100%);
  border-radius: 999px;
  box-shadow: 0 0 20px rgba(0, 67, 255, .4);
  transition: width 800ms var(--tl-ease);
}

.timeline__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tl-step {
  position: relative;
  text-align: center;
  padding: 0 4px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 700ms var(--tl-ease), transform 700ms var(--tl-ease);
  transition-delay: var(--delay, 0ms);
}

.timeline.is-active .tl-step { opacity: 1; transform: translateY(0); }

.tl-step__node {
  position: relative;
  width: 84px;
  height: 84px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 3px solid var(--azul);
  border-radius: 50%;
  color: var(--azul);
  transition: background .32s var(--tl-ease), color .32s var(--tl-ease),
              transform .32s var(--tl-ease), box-shadow .32s var(--tl-ease);
  z-index: 2;
}

/* Anel tracejado girando devagar em volta do nó */
.tl-step__node::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px dashed var(--azul);
  opacity: 0;
  transition: opacity .32s var(--tl-ease);
}

.timeline.is-active .tl-step__node::before {
  opacity: .35;
  animation: rotateDash 12s linear infinite;
}

@keyframes rotateDash {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.tl-step__num {
  position: absolute;
  top: -12px;
  right: -10px;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--claro);
  color: var(--navy);
  border: 2.5px solid var(--navy);
  border-radius: 999px;
  font-family: var(--num);
  font-weight: 700;
  font-size: .78rem;
  z-index: 3;
}

.tl-step__icon { width: 34px; height: 34px; }

.tl-step:hover .tl-step__node {
  background: var(--azul);
  color: #fff;
  transform: scale(1.08) rotate(-5deg);
  box-shadow: 0 10px 30px rgba(0, 67, 255, .32);
}

.tl-step__body h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: .9rem;
  color: var(--navy);
  line-height: 1.25;
  margin-bottom: 6px;
}

.tl-step__body p {
  font-size: .8rem;
  line-height: 1.5;
  color: var(--cinza);
  max-width: 200px;
  margin-inline: auto;
}

/* A etapa 5 traz duas informações empilhadas (Presencial / Novembro/26) */
.tl-step__body p + p { margin-top: 3px; }

/* Nó final em destaque */
.tl-step--final .tl-step__node {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: 0 12px 32px rgba(19, 0, 132, .35);
}

.tl-step--final .tl-step__node::before { border-color: var(--navy); }

.tl-step--final .tl-step__num {
  background: var(--navy);
  color: #fff;
  border-color: #fff;
}

.tl-step--final:hover .tl-step__node {
  background: var(--azul);
  border-color: var(--azul);
  box-shadow: 0 10px 30px rgba(0, 67, 255, .32);
}

/* ===== Responsivo ===== */

/* Tablet — 4 colunas x 2 linhas, sem trilho (ele só faz sentido em fila) */
@media (max-width: 1100px) and (min-width: 861px) {
  .timeline__steps { grid-template-columns: repeat(4, 1fr); gap: 56px 24px; }
  .timeline__track { display: none; }
  .tl-step__body h3 { font-size: .98rem; }
}

/* Mobile — timeline vertical, trilho à esquerda */
@media (max-width: 860px) {
  .timeline { padding: 40px 0; }

  .timeline__track {
    top: 60px;
    bottom: 60px;
    left: 50px;
    right: auto;
    width: 4px;
    height: auto;
  }

  .timeline__progress {
    width: 100%;
    height: 0;
    background: linear-gradient(180deg, var(--navy) 0%, var(--azul) 55%, var(--claro) 100%);
    transition: height 800ms var(--tl-ease);
  }

  .timeline__steps { grid-template-columns: 1fr; gap: 44px; }

  .tl-step {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
    text-align: left;
    gap: 20px;
    padding: 0;
    transform: translateX(-30px);
  }

  .timeline.is-active .tl-step { transform: translateX(0); }

  .tl-step__node { margin: 0; }
  .tl-step__body h3 { font-size: 1.0625rem; }
  .tl-step__body p { max-width: none; margin: 0; }
}

@media (max-width: 480px) {
  .tl-step { grid-template-columns: 72px 1fr; gap: 16px; }
  .tl-step__node { width: 68px; height: 68px; }
  .tl-step__icon { width: 28px; height: 28px; }
  .tl-step__num { top: -8px; right: -8px; height: 26px; min-width: 26px; font-size: .68rem; }
  .timeline__track { left: 34px; }
}

/* ========================= SOBRE A EMPRESA ========================= */

/* Trechos de ênfase dentro do texto corrido: negrito + cor da marca,
   senão o peso sozinho quase não aparece no cinza do parágrafo. */
.prose-p strong { font-weight: 700; color: var(--navy); }

/* As 4 verticais: colunas divididas por fio, sem virar mais uma
   fileira de cards — a página já tem 15 deles em Benefícios. */
.verticais {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 640px)  { .verticais { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .verticais { grid-template-columns: repeat(4, 1fr); } }

.vertical { padding: 1.75rem 0; border-top: 1px solid var(--rule-dark); }

@media (min-width: 640px) {
  .vertical { border-top: 0; border-left: 1px solid var(--rule-dark); padding: .5rem 1.75rem; }
  .vertical:nth-child(odd) { border-left: 0; padding-left: 0; }
}

@media (min-width: 1024px) {
  .vertical:nth-child(odd) { border-left: 1px solid var(--rule-dark); padding-left: 1.75rem; }
  .vertical:first-child { border-left: 0; padding-left: 0; }
}

.vertical-num {
  display: block;
  font-family: var(--num);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--claro);
  margin-bottom: .85rem;
}

.vertical-titulo {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--navy);
}

.vertical-titulo span { font-weight: 400; color: var(--acinz); }

/* ======================= DESTAQUES (faixa azul) ======================= */

.numeros-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  line-height: 1.2;
  color: #fff;
}

.numeros-title strong { font-weight: 700; }

.numeros-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem 2.5rem;
}

@media (min-width: 480px)  { .numeros-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .numeros-grid { grid-template-columns: repeat(3, 1fr); } }

/* Cada coluna carrega dois números empilhados; a terceira só a frase.
   Planilha de 31/08.                                                 */
.num-col {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

/* A frase fica sozinha: centrada na altura dos dois números ao lado */
.num-col--frase { justify-content: center; }

/* Em duas colunas a frase passa a ocupar a linha inteira, senão ficaria
   metade da largura contra um vizinho vazio. */
@media (min-width: 480px) and (max-width: 1023px) {
  .num-col--frase { grid-column: 1 / -1; }
}

.num-valor {
  font-family: var(--num);
  font-weight: 700;
  font-size: clamp(2.1rem, 3.8vw, 2.9rem);
  line-height: 1;
  color: var(--claro);
}

.num-desc {
  margin-top: .75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .88);
}

/* Destaque sem número, sozinho na terceira coluna. O corpo subiu na
   planilha de 31/08 ("com a letra um pouco maior para dar destaque"):
   fica acima do texto dos descritivos e ainda abaixo dos contadores,
   que continuam sendo o primeiro peso da faixa. */
.num-frase {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  line-height: 1.25;
  color: var(--claro);
  max-width: 22ch;
}

/* ============================ NOSSA CULTURA ============================
   A roda é estática — pedido do cliente na planilha de 24/08. O giro
   por scroll que existia aqui foi removido, junto com o bloco de JS.
   ==================================================================== */

.mandala-wrap { display: flex; justify-content: center; }

.mandala { width: min(560px, 90vw); height: auto; }

/* ==================================================================
   PARALAXE — CTA final sobre foto do escritório
   Movimento por transform + requestAnimationFrame, não por
   background-attachment:fixed (esse trava e pisca no iOS; a LP atual
   usa fixed e é justamente o que engasga no celular).

   A folga de 20% em cima e embaixo é o que permite a camada deslizar
   sem nunca mostrar borda. Ela TEM que bater com PARALLAX_CURSO em
   js/main.js — mexeu num, mexe no outro.

   Sem a foto, .parallax-bg fica transparente e o azul sólido segura.
   ================================================================== */

.parallax { position: relative; overflow: hidden; }

.parallax-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: -20%;
  bottom: -20%;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .6s ease;
}

.parallax.has-bg .parallax-bg { opacity: 1; will-change: transform; }

/* Véu azul — só onde ele é pedido. Hoje, apenas no CTA final: o cliente
   pediu para o painel parar de destoar do fundo, "assim como podemos
   ver no KV". A paralaxe de Pré-requisitos continua com a foto limpa.
   O KV usa um véu bem fechado; aqui fica um pouco mais aberto para o
   ambiente ainda ser reconhecível atrás. */
.parallax-veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(120deg, rgba(19, 0, 132, .80) 0%, rgba(4, 59, 228, .72) 100%);
}

.parallax-content { position: relative; z-index: 2; }

/* ==================================================================
   PAINEL — a caixa que carrega o texto sobre a foto

   A foto de fundo fica LIMPA, sem véu por cima. A legibilidade vem
   daqui: o painel é sólido e o texto nunca encosta na fotografia.
   Se algum ambiente novo pedir mais contraste, o caminho é subir o
   --painel-alpha abaixo, e não filtrar a foto inteira.
   ================================================================== */

.painel {
  --painel-alpha: 1;
  background: rgba(255, 255, 255, var(--painel-alpha));
  border-radius: 15px;
  box-shadow: 0 18px 50px rgba(19, 0, 132, .28);
  padding: 2rem 1.6rem;
}

@media (min-width: 768px) { .painel { padding: 3rem 2.75rem; } }

.painel--largo { max-width: 940px; }

.painel--azul {
  background: rgba(19, 0, 132, var(--painel-alpha));
  color: #fff;
}

.painel--azul .section-title { color: #fff; }

/* Cantos mais soltos que os 15px do resto: o cliente achou o painel
   "muito quadrado" mesmo com o arredondamento anterior. */
.cta-painel {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
  border-radius: 36px;
}

@media (max-width: 560px) { .cta-painel { border-radius: 26px; } }

.cta-kicker {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .9);
}

/* "Enforce 2027" num padrão só na linha — antes "Enforce" era branco em
   peso normal e "2027" azul claro em Ubuntu bold, o que o cliente pediu
   para unificar.

   >>> CENÁRIO A (no ar): tudo branco.
   >>> CENÁRIO B: azul claro. Para trocar, acrescente a classe
       cta-title--azul no <h2> do CTA em index.html. Nada mais muda. */
.cta-title {
  margin-top: .5rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: #fff;
}

.cta-title--azul { color: var(--claro); }

/* ================================ FOOTER ================================ */

.footer-strip {
  height: 6px;
  background: linear-gradient(90deg,
    var(--navy)  0    25%,
    var(--medio) 25%  50%,
    var(--azul)  50%  75%,
    var(--claro) 75%  100%);
}

.footer-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem 3rem;
}

.footer-rule {
  display: block;
  width: 80px;
  height: 1px;
  background: rgba(255, 255, 255, .3);
  margin: 2.5rem auto;
}

.footer-suporte {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .88);
  max-width: 52ch;
  margin: 0 auto;
  text-wrap: balance;
}

.footer-mail {
  font-weight: 600;
  color: var(--claro);
  transition: color .3s ease;
}

.footer-mail:hover { color: #fff; text-decoration: underline; }

.footer-social {
  display: flex;
  justify-content: center;
  gap: .75rem;
  margin-top: 1.75rem;
}

.social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  transition: background-color .3s ease;
}

.social:hover { background: var(--azul); }
.social svg { width: 18px; height: 18px; }

.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.footer-copy { font-size: .9rem; color: rgba(255, 255, 255, .6); }

/* ========================= REVEAL ON SCROLL ========================= */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}

.reveal.is-visible { opacity: 1; transform: none; }

.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }
.reveal-delay-5 { transition-delay: .40s; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ============================ ACESSIBILIDADE ============================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .parallax.has-bg .parallax-bg { transform: none !important; will-change: auto; }
  .hero-mosaico span { opacity: 1; animation: none; }
  .brilho { animation: none; }
  .timeline.is-active .tl-step__node::before { animation: none; }
}