/* =========================================================
   BPO NEXO — CAMADA NØEMA
   Referência: design-system/estudio.com/design-system.html
   ("NØEMA® — Design System & Pattern Library").

   Carregada DEPOIS de style.css e processos.css.

   O que vem do NØEMA: estrutura, fios de 1px, cantos retos, o easing único
   cubic-bezier(0.16, 1, 0.3, 1), o hero em camadas com lente, a
   barra de progresso e o cursor.

   A tipografia é a do design system Canvas (Inter; ver canvas.css).

   O que NÃO muda: a paleta. Toda cor abaixo é um token que já
   existe em style.css (--bg, --text, --accent, --border…), então
   os temas escuro e claro do site continuam exatamente os mesmos.
   ========================================================= */

/* =========================================================
   N1 · TOKENS (forma, tipo e movimento — nenhuma cor)
   ========================================================= */
@property --abre {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.42;
}

:root {
  --pad: clamp(1.1rem, 2.3vw, 2.4rem);
  /* Distância da borda até a coluna do .container (max-w centrado +
     --pad-x). Usada por tudo que é posicionado de forma absoluta e
     precisa alinhar com o conteúdo das seções. O 100% resolve no
     elemento que usa a variável. */
  --borda: max(var(--pad-x), calc((100% - var(--max-w)) / 2 + var(--pad-x)));
  --ease-noema: cubic-bezier(0.16, 1, 0.3, 1);
  /* Cor da mira e da lente: a mesma do "BPO" da logo (.logo__nome,
     var(--text)) — quase branco no tema escuro, navy no claro. */
  --mira: var(--text);

  --r-xs: 0;
  --r-sm: 0;
  --r-md: 0;
  --btn-r: 0;
  --btn-h: 48px;
  --btn-px: 26px;
  --btn-t: 450ms;

  /* Tipografia do design system Canvas (design-system/
     canvas-visual.aura.build): Inter no corpo e nos títulos, mono nos
     rótulos técnicos. A escala segue a do site-antigo (ver canvas.css). */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: var(--font-heading);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: var(--ease-noema);
  --t-fast: 350ms var(--ease-noema);
  --t-base: 450ms var(--ease-noema);

  --section-y: clamp(96px, 11vw, 168px);
}

/* =========================================================
   N2 · BASE
   ========================================================= */
html { background-color: var(--bg); }
body { font-family: var(--font-sans); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 500; }

/* Grão do DS (.noise) — neutro, só textura */
.noise {
  position: fixed;
  inset: 0;
  z-index: 90;
  opacity: 0.065;
  pointer-events: none;
  background-image: radial-gradient(circle at 35% 40%, rgba(255, 255, 255, 0.035) 0 1px, transparent 1.5px);
  background-size: 5px 5px;
}

/* Barra de progresso da leitura (DS: .global-progress) */
.global-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  height: 2px;
  pointer-events: none;
}
.global-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent-halo);
  transform: scaleX(var(--progresso, 0));
  transform-origin: left;
}

/* Cursor / mira (DS: .cursor / .cursor-ring) — só com html.tem-cursor,
   que o JS põe quando há ponteiro fino e movimento liberado.
   Ponto de 4px preso ao ponteiro; anel de 30px com quatro marcas
   (retícula) que segue com atraso suave. Posição e escala vêm do
   noema.js por transform; aqui só cor, opacidade e as marcas. */
.cursor,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  display: none;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
.tem-cursor .cursor,
.tem-cursor .cursor-ring { display: block; }

.cursor {
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  background: var(--mira);
  transition: opacity 0.3s var(--ease-noema);
}

.cursor-ring {
  --mira-cor: var(--mira);
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 1.25px solid color-mix(in srgb, var(--mira-cor) 55%, transparent);
  transition: opacity 0.35s var(--ease-noema), background-color 0.35s var(--ease-noema),
              border-color 0.35s var(--ease-noema);
}
/* Marcas da retícula: quatro traços de 5px fora do anel */
.cursor-ring::before {
  content: "";
  position: absolute;
  inset: -8px;
  background:
    linear-gradient(var(--mira-cor), var(--mira-cor)) 50% 0 / 1.25px 5px no-repeat,
    linear-gradient(var(--mira-cor), var(--mira-cor)) 50% 100% / 1.25px 5px no-repeat,
    linear-gradient(var(--mira-cor), var(--mira-cor)) 0 50% / 5px 1.25px no-repeat,
    linear-gradient(var(--mira-cor), var(--mira-cor)) 100% 50% / 5px 1.25px no-repeat;
  opacity: 0.7;
  transition: transform 0.6s var(--ease-noema), opacity 0.35s var(--ease-noema);
}

/* Sobre clicáveis: o anel preenche de leve, a borda firma e as
   marcas giram para a diagonal ("trava" a mira); o ponto recolhe. */
.cursor.is-active { opacity: 0; }
.cursor-ring.is-active {
  background-color: color-mix(in srgb, var(--mira) 12%, transparent);
  border-color: var(--mira-cor);
  box-shadow: 0 0 18px color-mix(in srgb, var(--mira) 28%, transparent);
}
.cursor-ring.is-active::before { transform: rotate(45deg); opacity: 1; }
.cursor-ring.is-solido { --mira-cor: var(--on-accent); background-color: transparent; box-shadow: none; }

/* Fora da janela, e sobre a lente do Hero (que já é a mira) */
.cursor.is-oculto,
.cursor-ring.is-oculto,
.mira-na-lente .cursor-ring { opacity: 0; }

/* =========================================================
   N3 · TIPOGRAFIA
   Títulos de seção (.t-h2/.t-h3/.t-h4), eyebrow, subtítulo
   (.t-body-l) e o cabeçalho de seção (.section-head) seguem o
   design-system/site-antigo: as regras são as de style.css, sem
   sobrescrita aqui. Só a manchete do Hero e os rótulos técnicos
   têm ajuste próprio.
   ========================================================= */
.t-h1 {
  font-family: var(--font-heading);
  letter-spacing: -0.05em;
  line-height: 0.9;
  font-weight: 500;
}

.t-label { font-size: 0.62rem; font-weight: 400; letter-spacing: 0.18em; }

/* =========================================================
   N4 · COMPONENTES EXISTENTES
   ========================================================= */

/* --- Seções: o fio superior "varre" a largura ao entrar em cena
   (.secao__fio + .em-cena, ambos do noema.js) --- */
.section {
  position: relative;
  border-top: 0;
  overflow: clip;
  isolation: isolate;
}
.secao__fio {
  position: absolute;
  top: 0;
  left: var(--borda);
  right: var(--borda);
  height: 1px;
  background: var(--border-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--ease-noema);
  pointer-events: none;
}
.section.em-cena .secao__fio { transform: scaleX(1); }

/* --- Botões: retos, rótulo espaçado e preenchimento que sobe no
   hover (as cores são as mesmas de antes, só a transição muda) --- */
.btn {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
}
.btn:hover { transform: none; }
.btn:active { transform: scale(0.98); }

.btn--primary::after,
.btn--secundario::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--btn-fill-hover);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--btn-t) var(--ease-noema);
}
.btn--secundario::after { background-color: var(--accent-fill); }
.btn--primary:hover::after,
.btn--secundario:hover::after { transform: scaleY(1); }
.btn .lucide { transition: transform var(--btn-t) var(--ease-noema); }
.btn:hover .lucide { transform: translateX(3px); }

/* --- Cabeçalho: flutua sobre o Hero e ganha fundo ao rolar --- */
.header {
  position: fixed;
  left: 0;
  right: 0;
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background-color var(--t-base), border-color var(--t-base);
}
.header.rolado {
  background-color: var(--bg-nav);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
}
.navbar { padding-block: 18px; }
.header.rolado .navbar { padding-block: 10px; }

.logo { gap: 16px; }
/* O arquivo da logo (assets/img/logo.png) tem margem transparente
   larga: o disco ocupa ~47% da imagem. A imagem é ampliada dentro da
   caixa para o disco preencher a medida declarada. */
.logo__icone--lg img { transform: scale(2.14); }
.logo__icone--lg { width: 64px; height: 64px; transition: width var(--t-base), height var(--t-base); }
.header.rolado .logo__icone--lg { width: 50px; height: 50px; }
.logo__nome { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.055em; transition: font-size var(--t-base); }
.header.rolado .logo__nome { font-size: 1.45rem; }

.nav-links > li:not(.nav-cta) > a {
  position: relative;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nav-links > li:not(.nav-cta) > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-base);
}
.nav-links > li:not(.nav-cta) > a:hover::after,
.nav-links > li:not(.nav-cta) > a.ativo-link::after { transform: scaleX(1); transform-origin: left; }
.nav-cta .btn { min-height: 40px; padding-inline: 18px; }
.nav-toggle,
.tema-toggle { width: 40px; height: 40px; }

/* --- Ticker de profissionais → faixa de sinal do DS (.signal-strip) --- */
.profissionais {
  position: relative;
  z-index: 2;
  padding-block: 0;
  border-bottom: 1px solid var(--border);
}
.profissionais__titulo { margin: 0; padding-block: 18px 12px; font-size: 0.6rem; letter-spacing: 0.18em; }
.ticker { border-top: 1px solid var(--border); }
.ticker__track { gap: 0; animation-duration: 48s; }
.profissionais__item,
.profissionais__item:hover {
  gap: 0.75rem;
  padding: 14px 0;
  background: none;
  border: 0;
  box-shadow: none;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* Na faixa os itens não são cartões: sem a sombra do tema claro
   (style.css, :root[data-tema="light"] .profissionais__item) */
:root[data-tema="light"] .profissionais__item { box-shadow: none; }
.profissionais__item::after {
  content: "✦";
  margin-inline: 2rem;
  color: var(--accent);
}
/* Ícone de cada segmento em selo circular cinza: o próprio <svg> do
   Lucide ganha preenchimento, fundo e borda em tons neutros. */
.profissionais__item .lucide {
  flex: none;
  box-sizing: content-box;
  width: 16px;
  height: 16px;
  padding: 8px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--neutral-400) 12%, transparent);
  border: 1px solid var(--border-strong);
  color: var(--neutral-400);
  transition: background-color var(--t-base), color var(--t-base), border-color var(--t-base);
}
.profissionais__item:hover .lucide {
  background-color: color-mix(in srgb, var(--neutral-400) 22%, transparent);
  border-color: var(--neutral-400);
  color: var(--text);
}

/* --- Cartões: cantos retos e inclinação 3D no hover (JS: --tx/--ty) --- */
.card,
.grafico-card,
.demo__player,

#servicos .card__icone,
#cobranca .card__icone,
#equipe .card__icone,
.beneficio__icone { border-radius: 0; }

.card,
.beneficio,
.especialidade,
.plano {
  transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform 0.7s var(--ease-noema), background-color var(--t-base),
              border-color var(--t-base), box-shadow var(--t-base);
}
.card:hover,
.beneficio:hover,
.especialidade:hover,
.especialidade:focus-within,
.plano:hover {
  transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateZ(14px);
}
.card.is-inclinado,
.beneficio.is-inclinado,
.especialidade.is-inclinado,
.plano.is-inclinado { transition-duration: 0.18s, 0.45s, 0.45s, 0.45s; }

/* Anel do DS (.metric::after) crescendo no canto do cartão */
.card,
.beneficio { overflow: hidden; }
.card::after,
.beneficio::after {
  content: "";
  position: absolute;
  right: -38%;
  bottom: -46%;
  width: 70%;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 50%;
  pointer-events: none;
  transition: transform 0.9s var(--ease-noema), border-color var(--t-base);
}
.card:hover::after,
.beneficio:hover::after { transform: scale(1.35); border-color: var(--accent-border); }
.card h3 { letter-spacing: -0.045em; }

/* --- FAQ: linhas de fio, como a lista .capability do DS --- */
.faq__gatilho {
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  letter-spacing: -0.04em;
  font-weight: 400;
  transition: color var(--t-base), padding var(--t-base);
}
.faq__item:hover .faq__gatilho { padding-left: 1rem; }


/* --- Barra fixa de CTA --- */
.cta-fixa { border-radius: 0; }
.cta-fixa__titulo { letter-spacing: -0.04em; }

/* --- Rodapé --- */
.footer__col h4 { font-size: 0.6rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; }
.footer__marca-nome { letter-spacing: -0.055em; }

/* --- Entrada em profundidade (substitui o fadeSlideIn do style.css) --- */
@keyframes noemaProfundidade {
  0% {
    opacity: 0;
    transform: perspective(1200px) translate3d(0, 56px, -160px) rotateX(12deg);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: perspective(1200px) translate3d(0, 0, 0) rotateX(0deg);
    filter: blur(0);
  }
}
.js .animate-on-scroll { animation-name: noemaProfundidade; animation-timing-function: var(--ease-noema); animation-duration: 1.2s; }
.js .card.animate-on-scroll { animation-duration: 1s; }

/* =========================================================
   N5 · HERO EM PROFUNDIDADE
   Dois planos: o campo ao fundo (a grade) e, na frente, o
   palco 3D. A lente que segue o mouse é o raio-X global
   (.raio-x, mais abaixo).
   ========================================================= */
.hero {
  position: relative;
  display: block;
  min-height: max(100svh, 720px);
  padding: 0;
  overflow: clip;
  isolation: isolate;
  --rx: 0;
  --ry: 0;
  --px: 0;
  --py: 0;
}

.hero__campo {
  position: absolute;
  inset: 0;
  z-index: 0;
  perspective: 1400px;
  overflow: hidden;
}
/* Base do Hero escurecida para o texto (no tom do próprio fundo) */
.hero__campo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(0deg, var(--bg), transparent 30%);
  pointer-events: none;
}

.hero__plano {
  position: absolute;
  inset: -6%;
  will-change: transform, opacity;
  transition: opacity 0.9s var(--ease-noema);
}

/* Fundo quase oculto em repouso: a grade só aparece quando o
   mouse entra no Hero (.mouse-dentro, posta pelo noema.js). */
.hero__plano--grade { opacity: 0.12; }
.hero.mouse-dentro .hero__plano--grade { opacity: 0.55; }

/* Grade do DS (.anatomy__grid) deitada em perspectiva */
.hero__plano--grade {
  top: 40%;
  bottom: -40%;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 8.333vw 8.333vw;
  transform: rotateX(68deg) translate3d(calc(var(--px) * -24px), 0, 0);
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(0deg, transparent, #000 70%, transparent);
  mask-image: linear-gradient(0deg, transparent, #000 70%, transparent);
}


/* =========================================================
   RAIO-X: o login por trás do site (noema.js)
   .raio-x__janela é a tela de login (iframe do tamanho da janela)
   recortada em círculo no cursor; .raio-x__anel é a mira em volta,
   na cor do "BPO" da logo (--mira): anel fino com halo, ponto central,
   cruz com o centro aberto e um anel tracejado girando devagar. O JS
   move os dois e dá a escala; aqui só o visual.
   ========================================================= */
.raio-x { display: none; }
.tem-raio-x .raio-x {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 260;
  pointer-events: none;
}
.raio-x__janela {
  position: absolute;
  inset: 0;
  background: #edf2f9;
  clip-path: circle(0 at -999px -999px);
}
.raio-x__janela iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}
.raio-x__anel {
  /* Mesmo raio máximo do JS (raioMax): 7,5% da largura, de 84 a 130px */
  --raio-x: clamp(84px, 7.5vw, 130px);
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--raio-x) * 2);
  height: calc(var(--raio-x) * 2);
  margin: calc(var(--raio-x) * -1) 0 0 calc(var(--raio-x) * -1);
  border: 1px solid color-mix(in srgb, var(--mira) 70%, transparent);
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, var(--mira) 0 1.5px, transparent 2px);
  /* Borda interna escura: a página parece ter um furo, com o login atrás */
  box-shadow: inset 0 0 22px rgba(3, 12, 24, 0.35),
              inset 0 0 0 5px color-mix(in srgb, var(--mira) 10%, transparent),
              0 0 40px color-mix(in srgb, var(--mira) 25%, transparent);
  will-change: transform, opacity;
}
/* Cruz: quatro traços que deixam o centro livre */
.raio-x__anel::before {
  content: "";
  position: absolute;
  inset: -9%;
  background:
    linear-gradient(var(--mira), var(--mira)) 0 50% / 40% 1px no-repeat,
    linear-gradient(var(--mira), var(--mira)) 100% 50% / 40% 1px no-repeat,
    linear-gradient(var(--mira), var(--mira)) 50% 0 / 1px 40% no-repeat,
    linear-gradient(var(--mira), var(--mira)) 50% 100% / 1px 40% no-repeat;
  opacity: 0.4;
}
/* Anel tracejado externo, em rotação lenta */
.raio-x__anel::after {
  content: "";
  position: absolute;
  inset: -12px;
  border: 1px dashed color-mix(in srgb, var(--mira) 55%, transparent);
  border-radius: 50%;
  animation: miraGira 32s linear infinite;
}
@keyframes miraGira { to { rotate: 360deg; } }

/* Sobre o campo o ponteiro some — a lente e o cursor do DS assumem */
.tem-cursor .hero { cursor: none; }
.tem-cursor .hero a { cursor: pointer; }
.tem-cursor .hero .cena { cursor: auto; }

/* --- Conteúdo --- */
.hero__conteudo {
  position: relative;
  z-index: 5;
  display: grid;
  /* Proporção do design-system/site-antigo: texto em 7 e gráfico em 5
     das 12 colunas, com o gap de 16px (gap-4) entre elas. */
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  /* Uma linha só, centrada na altura do Hero; dentro dela o título e
     o gráfico começam na mesma altura (topo com topo). */
  align-content: center;
  align-items: start;
  gap: var(--gap-4);
  min-height: max(100svh, 720px);
  padding-block: 132px 64px;
}

.hero__texto { grid-column: auto; }

/* --- Bloco de texto do Hero: design-system/site-antigo ---
   Eyebrow verde em negrito (o .eyebrow de style.css), manchete em
   Inter com a segunda oração em bloco próprio no verde da marca,
   e subtítulo no corpo de texto. */

/* Mesma escala do site-antigo: até 80px (5rem) */
.hero__titulo {
  max-width: 24ch;
  margin: 0 0 24px;
  font-size: clamp(2.5rem, 6vw, 5rem);
  text-wrap: balance;
}
.hero__destaque {
  display: block;
  margin-top: clamp(20px, 2.2vw, 32px);
  color: var(--grad-text-destaque);
}

.hero__sub {
  max-width: 56ch;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.625;
  font-weight: 500;
  text-align: left;
  text-wrap: pretty;
  color: var(--text-secondary);
}

/* Entrada em cascata, como o delay-1/2/3 do site-antigo */
@keyframes surgir {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: none; }
}
.js .hero__eyebrow { animation: surgir 1.1s var(--ease-noema) 0.1s backwards; }
.js .hero__titulo { animation: surgir 1.1s var(--ease-noema) 0.2s backwards; }
.js .hero__sub { animation: surgir 1.1s var(--ease-noema) 0.35s backwards; }
.js .hero__grafico { animation: surgir 1.4s var(--ease-noema) 0.3s backwards; }

/* =========================================================
   N6 · PALCO 3D — CATEGORIAS FINANCEIRAS
   A inclinação (--rx/--ry) vem do ponteiro; cada camada fica a
   --z px do plano do cartão, então a mesma rotação a desloca mais
   quanto mais longe ela está — é isso que dá a profundidade.
   --abre vai de 0.42 (recolhidas atrás do cartão) a 1 (abertas)
   e é animado pela própria CSS (@property).
   ========================================================= */
.hero__grafico {
  grid-column: auto;
  justify-self: end;
  width: 100%;
  max-width: 600px;
  transition: none;
}
.hero__grafico:hover { transform: none; }

.cena {
  position: relative;
  container-type: inline-size;
  perspective: 1500px;
  perspective-origin: 50% 40%;
  --abre: 0.42;
  transition: --abre 1.1s var(--ease-noema);
}
.cena.is-aberta { --abre: 1; }

.cena__mundo {
  position: relative;
  transform-style: preserve-3d;
  transform: translate3d(0, var(--fy, 0px), 0) rotateX(calc(var(--rx) * 1deg)) rotateY(calc(var(--ry) * 1deg));
  will-change: transform;
}

/* O cartão é opaco (superfície sobre o fundo) para o razão não
   vazar por trás do gráfico. */
.cena__nucleo {
  position: relative;
  z-index: 1;
  transform: translateZ(0);
  background: linear-gradient(var(--surface), var(--surface)), var(--bg);
}

/* "Categorias financeiras" é branco nos dois temas, como as camadas
   do Phoenix em volta: o cartão traz os tokens do tema claro
   (style.css, :root[data-tema="light"]). O share-dataset-chart.js lê
   as cores do próprio elemento, então o gráfico acompanha. */
.cena__nucleo {
  color-scheme: light;
  --surface: #ffffff;
  --surface-soft: #f9fafd;
  --border: #dfe7f1;
  --border-strong: #cdd9e8;
  --text: #0c2036;
  --text-secondary: #5e6e82;
  --neutral-400: #748194;
  --accent-fill: var(--bn-navy);
  --positivo: #00a86b;
  --negativo: #e63757;
  --alerta: #d67d1f;
  --info: #1d6fa5;
  --shadow-card: 0 0.5rem 1.5rem rgba(3, 25, 46, 0.08), 0 0 0 1px rgba(91, 155, 77, 0.12);
  color: var(--text);
}
.grafico-card__cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 18px;
}
.grafico-card__titulo {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.grafico-card__corpo { padding: 14px 16px 10px; }
.grafico-card__grafico { min-height: 400px; }

/* --- Camadas: card "Today $764.39" do Falcon
   (design-system/falcon/design-system.html, #chart-gallery-today-payment:
   card-body.bg-line-chart-gradient). Mesma anatomia — valor em h4
   branco, linha de apoio fs-10 semibold com o valor esmaecido por
   opacity-50 e o gráfico de linha branco com área em degradê — sobre o
   gradiente escuro do Falcon feito com o navy da própria marca. --- */
.camada {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: clamp(168px, 36cqw, 214px);
  padding: 12px 14px 0;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(45deg, var(--bn-navy-mid), var(--bn-navy-deep));
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-family: var(--font-sans);
  pointer-events: none;
  opacity: calc(0.2 + var(--abre) * 0.8);
  /* Recolhidas, todas ficam atrás do cartão (inclusive as da frente,
     que atravessam o plano do gráfico ao abrir). */
  transform:
    translate(-50%, -50%)
    translate3d(
      calc(var(--x) * 1cqw * var(--abre) * var(--espalha, 1)),
      calc(var(--y) * 1cqw * var(--abre)),
      calc(var(--z) * 1px * var(--abre) - (1 - var(--abre)) * 320px)
    );
  transition: box-shadow var(--t-base);
}

/* Cada camada flutua em profundidade no próprio ritmo; a propriedade
   `translate` soma ao `transform` acima sem sobrescrevê-lo. */
@keyframes camadaFlutua {
  0%, 100% { translate: 0 0 0; }
  50% { translate: 0 -7px 26px; }
}
.camada { animation: camadaFlutua calc(4.6s + var(--i, 0) * 0.7s) ease-in-out calc(var(--i, 0) * -0.9s) infinite; }


.cena.is-aberta .camada { box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6), 0 0 32px var(--accent-halo); }

.camada__grafico {
  display: block;
  height: 46px;
  margin: 8px -14px 0;
}

/* --- Camadas com gráfico ECharts do Phoenix (camadas-graficos.js) ---
   Card de exemplo do Phoenix (modules/echarts/*.html):
   .card.shadow-none.border > .card-header.p-4.border-bottom.bg-body
   (h4.text-body) + .card-body > .p-4 com o gráfico. Tokens do tema
   claro do theme.min.css do Phoenix (:root): o card é branco nos dois
   temas do site. Os paddings de 1.5rem viram 12px
   porque o card tem ~250px em vez da coluna inteira do exemplo.
   Abertas, recebem o mouse para o tooltip e o hover do ECharts
   (continuam dentro da .cena, então o palco não fecha). */
.camada--grafico {
  --ph-card-bg: #ffffff;        /* --phoenix-emphasis-bg */
  --ph-cabecalho-bg: #f5f7fa;   /* --phoenix-body-bg */
  --ph-borda: #cbd0dd;          /* --phoenix-border-color */
  --ph-titulo: #31374a;         /* --phoenix-body-color (.text-body) */
  width: clamp(210px, 46cqw, 272px);
  padding: 0;
  border-radius: 0.5rem;
  background: var(--ph-card-bg);
  border: 1px solid var(--ph-borda);
  color: var(--ph-titulo);
}
/* .shadow-none: sem o halo das demais camadas */
.cena.is-aberta .camada--grafico { box-shadow: none; pointer-events: auto; }

.camada__cabecalho {
  display: block;
  padding: 12px;
  border-bottom: 1px solid var(--ph-borda);
  border-radius: calc(0.5rem - 1px) calc(0.5rem - 1px) 0 0;
  background: var(--ph-cabecalho-bg);
}
/* h4 do Phoenix: peso 700, entrelinha 1 */
.camada__titulo {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.camada__corpo { display: block; padding: 10px 12px; }
.camada--grafico .camada__grafico { height: 132px; margin: 0; }
.camada--notas .camada__grafico { height: 150px; }

/* =========================================================
   N9 · JORNADA ("O caminho que cada informação percorre")
   Segue o design-system/site-antigo: sem trilha horizontal, com o
   layout de .jornada/.etapa de style.css/processos.css. Aqui só se
   devolvem os cantos arredondados que a camada NØEMA zera.
   ========================================================= */
#jornada {
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
}

/* --- Trajeto com rolagem (assets/js/trajeto.js) ---
   Na ideia da seção "Scroll" de sstr.tech: a cena fica presa (sticky) por
   --paradas telas de rolagem e a câmera percorre a linha do tempo. Com o trajeto
   ativo, a grade de etapas sai da tela, mas continua para leitores de tela. */
#jornada.com-trajeto { padding-bottom: 0; }
#jornada.com-trajeto .jornada {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.trajeto {
  position: relative;
  height: calc(var(--paradas, 7) * 85vh + 100vh);
  margin-top: clamp(24px, 4vw, 56px);
}
.trajeto[hidden] { display: none; }
.trajeto__palco {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  border-top: 1px solid var(--border);
}
.trajeto__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* a linha do tempo: régua, a linha, o trecho percorrido (verde) e o tempo correndo */
.trajeto__guia { stroke: none; }
.trajeto__tique { stroke: var(--border-strong); stroke-width: 1.5; }
.trajeto__tique--maior { stroke: var(--text-secondary); stroke-width: 2; opacity: 0.6; }
.trajeto__linha { stroke: var(--text-secondary); stroke-width: 3; opacity: 0.55; }
.trajeto__avanco { stroke: var(--accent); stroke-width: 5; stroke-linecap: round; }
.trajeto__particula { fill: var(--accent); }

/* os marcos: anel com centro, haste até o número e o título; o atual acende e pulsa */
.trajeto__haste { stroke: var(--border-strong); stroke-width: 2; stroke-dasharray: 4 5; }
.trajeto__halo { fill: var(--accent); opacity: 0; transform-box: fill-box; transform-origin: center; }
.trajeto__no { fill: var(--bg); stroke: var(--text-secondary); stroke-width: 3; transition: stroke 0.4s var(--ease-noema); }
.trajeto__no-centro { fill: var(--text-secondary); transition: fill 0.4s var(--ease-noema); }
.trajeto__num { font-family: var(--font-mono); font-size: 18px; font-weight: 700; fill: var(--text-secondary); letter-spacing: 0.08em; }
.trajeto__rotulo { font-family: var(--font-sans); font-size: 26px; font-weight: 600; fill: var(--text); letter-spacing: -0.01em; }
.trajeto__estacao.is-feita .trajeto__no { stroke: var(--accent); }
.trajeto__estacao.is-feita .trajeto__no-centro { fill: var(--accent); }
.trajeto__estacao.is-feita .trajeto__haste { stroke: var(--accent); opacity: 0.6; }
.trajeto__estacao.is-ativa .trajeto__no { stroke: var(--accent); fill: var(--accent); filter: url(#trajeto-brilho); }
.trajeto__estacao.is-ativa .trajeto__no-centro { fill: var(--bg); }
.trajeto__estacao.is-ativa .trajeto__haste { stroke: var(--accent); }
.trajeto__estacao.is-ativa .trajeto__num { fill: var(--accent); }
.trajeto__estacao.is-ativa .trajeto__halo { animation: trajeto-pulso 1.8s var(--ease-noema) infinite; }
/* na visão geral aparecem; com a câmera aproximada somem (--rotulos vem do script) */
.trajeto__haste,
.trajeto__num,
.trajeto__rotulo { opacity: var(--rotulos, 1); }
@keyframes trajeto-pulso {
  0% { opacity: 0.35; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.9); }
}

/* legendas: à direita, como no modelo (abertura maior) */
.trajeto__legendas {
  position: absolute;
  left: 50%;
  right: max(150px, 9%);
  top: 50%;
}
.trajeto__legenda {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  transform: translateY(-50%);
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.55s var(--ease-noema), translate 0.7s var(--ease-noema);
  pointer-events: none;
}
.trajeto__legenda.is-ativa { opacity: 1; translate: 0 0; }
.trajeto__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}
.trajeto__eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--accent); }
.trajeto__titulo {
  margin: 18px 0 14px;
  max-width: 20ch;
  font-size: clamp(1.75rem, 3.1vw, 3rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}
.trajeto__legenda--abertura .trajeto__titulo { max-width: 22ch; font-size: clamp(1.9rem, 3.4vw, 3.3rem); }
.trajeto__sub { margin: 0; max-width: 46ch; font-size: 1.0625rem; line-height: 1.6; color: var(--text-secondary); }

/* medidor: a marca "Etapa 0X" desce sobre a grade de pontos */
.trajeto__medidor {
  position: absolute;
  right: var(--pad-x, 32px);
  top: 15%;
  bottom: 24%;
  width: 150px;
}
.trajeto__pontos {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, 7px);
  align-content: space-between;
  gap: 0 7px;
}
.trajeto__pontos span { width: 7px; height: 7px; background: var(--border-strong); transition: background-color 0.3s; }
.trajeto__pontos span.is-acesa { background: var(--accent); }
.trajeto__marca {
  position: absolute;
  right: 44px;
  top: 0;
  transform: translateY(-50%);
  padding: 4px 16px 4px 9px;
  background: var(--accent);
  color: #0b1727;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
}

/* controles: voltar ao início · role · pular */
.trajeto__controles {
  position: absolute;
  left: var(--pad-x, 32px);
  right: var(--pad-x, 32px);
  bottom: 26px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.trajeto__botao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.trajeto__botao:hover { color: var(--accent); }
.trajeto__botao:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.trajeto__role {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: opacity 0.4s;
}
.trajeto__role.is-oculta { opacity: 0; }
.trajeto__setas { display: grid; gap: 2px; }
.trajeto__setas i {
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--text-secondary);
  border-bottom: 2px solid var(--text-secondary);
  transform: rotate(45deg) scale(0.75);
  animation: trajeto-seta 1.6s var(--ease-noema) infinite;
}
.trajeto__setas i:nth-child(2) { animation-delay: 0.15s; }
.trajeto__setas i:nth-child(3) { animation-delay: 0.3s; }
@keyframes trajeto-seta {
  0%, 100% { opacity: 0.2; }
  40% { opacity: 1; }
}

/* cena presa: a barra fixa de CTA e o botão de voltar ao topo saem da frente (voltam no fim da seção) */
html.trajeto-preso .cta-fixa.visivel,
html.trajeto-preso .fab-topo.visivel { opacity: 0; visibility: hidden; transform: translateY(120%); }

@media (max-width: 899.98px) {
  .trajeto__legendas { left: var(--pad-x, 20px); right: var(--pad-x, 20px); top: auto; bottom: 120px; }
  .trajeto__legenda { top: auto; bottom: 0; transform: none; }
  .trajeto__titulo,
  .trajeto__legenda--abertura .trajeto__titulo { font-size: clamp(1.4rem, 6vw, 2rem); max-width: none; }
  .trajeto__medidor { top: 90px; bottom: auto; height: 34%; width: 110px; }
  .trajeto__controles { bottom: 18px; }
}

/* =========================================================
   N10 · RESPONSIVIDADE
   ========================================================= */
@media (max-width: 1023.98px) {

  .hero__conteudo {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 56px;
    padding-top: 116px;
  }
  .hero__texto { align-self: auto; }
  .hero__grafico { justify-self: center; max-width: 620px; }

  .navbar,
  .header.rolado .navbar { padding-block: 12px; }
  .nav-links > li:not(.nav-cta) > a::after { display: none; }
  /* Menu recolhido: o cabeçalho transparente ganha fundo quando abre */
  .header:has(.nav-links.ativo) { background-color: var(--bg-nav); }
}

@media (max-width: 767.98px) {
  .hero__sub { font-size: 1rem; }
  .grafico-card__grafico { min-height: 360px; }
  .camada { --espalha: 0.55; width: 44cqw; padding: 9px 10px 0; }
  .camada__grafico { height: 32px; margin-inline: -10px; }
  .camada--grafico { width: 47cqw; padding: 0; }
  .camada__cabecalho { padding: 9px 10px; }
  .camada__titulo { font-size: 0.75rem; }
  .camada__corpo { padding: 6px; }
  .camada--grafico .camada__grafico,
  .camada--notas .camada__grafico { height: 104px; margin: 0; }
  .logo { gap: 10px; }
  .logo__icone--lg { width: 48px; height: 48px; }
  .header.rolado .logo__icone--lg { width: 42px; height: 42px; }
  .logo__nome,
  .header.rolado .logo__nome { font-size: 1.3rem; }
}

/* =========================================================
   N11 · MENOS MOVIMENTO
   Tudo continua legível e navegável; somem inclinação, parallax,
   lente, cursor, trilha e as entradas animadas.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .cena { --abre: 1; transition: none; }
  .camada { animation: none; }
  .cena__mundo { transform: none !important; }
  .hero__plano--grade { transform: rotateX(68deg) !important; }
  .raio-x { display: none !important; }
  .js .hero__eyebrow,
  .js .hero__titulo,
  .js .hero__sub,
  .js .hero__grafico { animation: none; }
  .card,
  .beneficio,
  .especialidade,
  .plano { transform: none !important; }
  .secao__fio { transform: scaleX(1); transition: none; }
}

/* =========================================================
   BOTÕES NAS CORES DA LOGO
   .btn--verde-logo ("Ver as responsabilidades" e "Solicitar
   proposta"): fundo no verde sólido da logo (#50aa46) com texto navy
   (o mesmo tratamento dos cards no verde da logo); no hover, o
   preenchimento que sobe é o verde claro da logo (#7bbf3d).
   .btn--cor-bpo ("Falar com nossa equipe"): fundo na cor do "BPO" da
   logo (--mira: quase branco no escuro, navy no claro), com o texto no
   fundo da página; no hover sobe o verde da logo.
   ========================================================= */
.btn--verde-logo,
.btn--verde-logo:hover {
  background-color: #50aa46;
  border-color: #50aa46;
  color: #0c2036;
}
.btn--verde-logo::after { background-color: #7bbf3d; }
.btn--verde-logo:hover { box-shadow: 0 10px 22px -12px rgba(80, 170, 70, 0.75); }
.btn--cor-bpo,
.btn--cor-bpo:hover {
  background-color: var(--mira);
  border-color: var(--mira);
  color: var(--bg);
}
.btn--cor-bpo::after { background-color: #50aa46; }
.btn--cor-bpo:hover { color: #0c2036; box-shadow: 0 10px 22px -12px rgba(80, 170, 70, 0.75); }