/* =========================================================
   BPO NEXO — FOLHA DE ESTILO
   Alinhada ao Design System BPO Nexo (ref/design-system.html e
   ref/assets/css/{app,auth}.css): navy + verde de marca, Poppins
   para títulos, Open Sans para o corpo. Cada token abaixo mapeia
   1:1 para um valor documentado ali; os nomes das variáveis foram
   mantidos para que nenhum componente abaixo precise ser reescrito.
   ========================================================= */

/* =========================================================
   01 · DESIGN TOKENS
   ========================================================= */
/* -----------------------------------------------------------
   TEMA CLARO (padrão) — mesma superfície do app/login BPO Nexo.
   Todas as cores dependentes de tema estão neste bloco; o tema
   escuro logo abaixo redefine as MESMAS variáveis, então nenhum
   componente precisa conhecer o tema em que está sendo exibido.
   ----------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* --- Paleta de marca BPO Nexo (ver ref/assets/css/auth.css) —
     mesmos hex nos dois temas; só o PAPEL de cada um muda abaixo.
     Navy = cor estrutural (títulos, botão primário no claro).
     Verde = acento interativo (links, foco, ícones, "destaque"). */
  --bn-navy: #03192e;
  --bn-navy-deep: #021326;
  --bn-navy-mid: #16415a;
  --bn-green: #5b9b4d;
  --bn-green-bright: #68a035;
  --bn-green-light: #75a938;

  /* --- Superfícies — painel de marca do login (gradiente navy) como
     fundo padrão; cartões em vidro translúcido claro sobre ele. --- */
  --bg: #0b1727;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-soft: rgba(255, 255, 255, 0.025);
  --surface-hover: rgba(255, 255, 255, 0.08);
  --glass: rgba(255, 255, 255, 0.08);
  --neutral-950: #081422;
  --neutral-900: #0f2137;

  /* Fundo translúcido da navbar e do menu mobile */
  --bg-nav: rgba(11, 23, 39, 0.82);
  --bg-nav-menu: rgba(8, 17, 29, 0.96);

  /* --- Bordas --- */
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.12);
  --border-accent: rgba(117, 169, 56, 0.5);
  --hairline: rgba(255, 255, 255, 0.2);
  --grid-num: rgba(255, 255, 255, 0.12);

  /* --primary = papel de botão/preenchimento sólido da marca:
     verde-brilhante no escuro, navy no claro (mesma regra do
     .btn-primary em app.css: no escuro o navy perde contraste). */
  --primary: var(--bn-green-bright);

  /* Papéis do acento.
     --accent       texto, ícones, bordas ativas e foco
     --accent-fill  preenchimento sólido de botão/selo
     --on-accent    texto sobre --accent-fill
     --accent-hover realce de hover do link/ícone */
  --accent: var(--bn-green-light);
  --accent-hover: #8ec766;
  --accent-fill: var(--bn-green-bright);
  --on-accent: var(--bn-navy);
  --accent-tint: rgba(117, 169, 56, 0.14);
  --accent-tint-hover: rgba(117, 169, 56, 0.22);
  --accent-border: rgba(117, 169, 56, 0.32);
  --accent-halo: rgba(117, 169, 56, 0.22);
  /* Manchete em destaque: verde sólido da marca, sem gradiente —
     o DS não usa texto em degradê. */
  --grad-text-destaque: var(--accent);

  /* --- Texto --- */
  --text: #eef3f8;
  --text-secondary: #9da9bb;
  --neutral-200: #c7d0da;
  --neutral-400: #8b97a8;
  --neutral-500: #6b7a8d;
  --neutral-600: #4f5d70;

  /* --- Semânticas (Falcon: success/info/warning/danger — mesmos
     tons nos dois temas) --- */
  --positivo: #00d27a;
  --negativo: #e63757;
  --alerta: #f5803e;
  --info: #27bcfd;
  --positivo-bg: rgba(0, 210, 122, 0.14);
  --negativo-bg: rgba(230, 55, 87, 0.14);
  --alerta-bg: rgba(245, 128, 62, 0.14);
  --info-bg: rgba(39, 188, 253, 0.14);

  /* --- Raios (Falcon: --falcon-border-radius 4 · -lg 6 · card 10) --- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-full: 9999px;

  /* --- Botões: uma única medida para toda a interface --- */
  --btn-r: 8px;
  --btn-h: 46px;
  --btn-px: 24px;
  --btn-t: 220ms;
  /* Hover/active do botão primário no escuro = verde mais escuro,
     mesmos tons de .btn-primary em app.css ([data-bs-theme='dark']). */
  --btn-fill-hover: var(--bn-green);
  --btn-fill-active: #4d8a3f;
  --btn-ring: rgba(117, 169, 56, 0.4);
  --btn-shadow: 0 6px 16px -6px rgba(104, 160, 53, 0.5);

  /* --- Sombras --- */
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.45);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 12px 28px -14px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(117, 169, 56, 0.15);
  --shadow-orange: 0 0 14px rgba(104, 160, 53, 0.16), 0 6px 22px rgba(104, 160, 53, 0.12);
  --shadow-orange-hover: 0 0 26px 2px rgba(104, 160, 53, 0.24);
  --shadow-orange-sm: 0 6px 12px -3px rgba(104, 160, 53, 0.2);
  /* Brilho do card em destaque — halo baixo, sem sombra pesada */
  --glow-destaque: 0 0 24px -8px rgba(104, 160, 53, 0.32);
  --glow-destaque-hover: 0 0 32px -6px rgba(104, 160, 53, 0.44);

  /* --- Layout --- */
  --max-w: 1280px;
  --pad-x: 24px;
  --section-y: 96px;

  /* --- Escala de espaçamento --- */
  --gap-4: 16px;
  --gap-6: 24px;
  --gap-8: 32px;
  --gap-12: 48px;

  /* --- Tipografia (Falcon: --falcon-font-base Open Sans ·
     --falcon-font-sans-serif Poppins, usada nos títulos) --- */
  --font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: var(--font-heading);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Movimento --- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 250ms ease;
  --t-base: 300ms ease;
}

/* -----------------------------------------------------------
   TEMA CLARO (padrão do site) — mesma superfície do app/login
   BPO Nexo: fundo --falcon-body-bg, cartões brancos, bordas e
   sombras suaves em vez de qualquer halo colorido.
   ----------------------------------------------------------- */
:root[data-tema="light"] {
  color-scheme: light;

  /* Superfícies (Falcon: --falcon-body-bg / --falcon-card-bg /
     --falcon-tertiary-bg) */
  --bg: #edf2f9;
  --surface: #ffffff;
  --surface-soft: #f9fafd;
  --surface-hover: #eef2f8;
  --glass: rgba(255, 255, 255, 0.82);
  --neutral-950: #ffffff;
  --neutral-900: #f1f4f9;

  --bg-nav: rgba(255, 255, 255, 0.86);
  --bg-nav-menu: rgba(255, 255, 255, 0.97);

  /* Bordas (Falcon: --falcon-border-color #d8e2ef) */
  --border: #dfe7f1;
  --border-strong: #cdd9e8;
  --border-accent: rgba(91, 155, 77, 0.5);
  --hairline: rgba(3, 25, 46, 0.12);
  --grid-num: rgba(3, 25, 46, 0.09);

  /* Acento — botão/selo sólido em navy; ícones, links e foco no
     verde estável da marca (mesma regra de app.css/auth.css). */
  --accent: var(--bn-green);
  --accent-hover: #4a7f40;
  --accent-fill: var(--bn-navy);
  --on-accent: #ffffff;
  --accent-tint: rgba(91, 155, 77, 0.09);
  --accent-tint-hover: rgba(91, 155, 77, 0.16);
  --accent-border: rgba(91, 155, 77, 0.28);
  --accent-halo: rgba(91, 155, 77, 0.16);
  --grad-text-destaque: var(--accent);

  /* Texto (Falcon: --falcon-body-color / --falcon-tertiary-color) */
  --text: #0c2036;
  --text-secondary: #5e6e82;
  --neutral-200: #2c3e50;
  --neutral-400: #748194;
  --neutral-500: #8a97a8;
  --neutral-600: #a7b2c0;

  /* Semânticas — mesmos tons do tema escuro */
  --positivo: #00a86b;
  --negativo: #e63757;
  --alerta: #d67d1f;
  --info: #1d6fa5;
  --positivo-bg: rgba(0, 168, 107, 0.1);
  --negativo-bg: rgba(230, 55, 87, 0.1);
  --alerta-bg: rgba(214, 125, 31, 0.1);
  --info-bg: rgba(29, 111, 165, 0.1);

  /* Sombras (Falcon: --falcon-box-shadow · .card 0 .5rem 1.5rem) */
  --shadow-xl: 0 1px 2px rgba(3, 25, 46, 0.04), 0 10px 20px -6px rgba(3, 25, 46, 0.08);
  --shadow-2xl: 0 1.5rem 3rem rgba(3, 25, 46, 0.14);
  --shadow-card: 0 0.5rem 1.5rem rgba(3, 25, 46, 0.08), 0 0 0 1px rgba(91, 155, 77, 0.12);
  /* Hover/active do botão primário no claro = navy mais escuro,
     mesmos tons de .btn-primary em auth.css/app.css. */
  --btn-fill-hover: #052239;
  --btn-fill-active: #010d18;
  --btn-ring: rgba(91, 155, 77, 0.35);
  --btn-shadow: 0 6px 14px -6px rgba(91, 155, 77, 0.45);
  --shadow-orange: 0 1px 2px rgba(3, 25, 46, 0.06), 0 8px 20px -8px rgba(91, 155, 77, 0.26);
  --shadow-orange-hover: 0 12px 26px -10px rgba(91, 155, 77, 0.38);
  --shadow-orange-sm: 0 4px 10px -3px rgba(91, 155, 77, 0.24);
  --glow-destaque: 0 1px 2px rgba(3, 25, 46, 0.04), 0 10px 24px -16px rgba(91, 155, 77, 0.45);
  --glow-destaque-hover: 0 1px 2px rgba(3, 25, 46, 0.05), 0 14px 30px -14px rgba(91, 155, 77, 0.5);
}

/* Ajustes que não são apenas troca de token no tema claro */

/* Cards e painéis ganham sombra em vez de contarem com o brilho */
:root[data-tema="light"] .card,
:root[data-tema="light"] .beneficio,
:root[data-tema="light"] .profissionais__item,
:root[data-tema="light"] .portal__func,
:root[data-tema="light"] .especialidade { box-shadow: var(--shadow-xl); }

:root[data-tema="light"] .card:hover,
:root[data-tema="light"] .beneficio:hover { box-shadow: var(--shadow-2xl); }

/* A sombra base do tema claro tem especificidade maior que a do
   :hover do componente; sem esta regra ela venceria e o card não
   ganharia elevação nenhuma no claro. */
:root[data-tema="light"] .especialidade:hover,
:root[data-tema="light"] .especialidade:focus-within { box-shadow: var(--shadow-card); }

/* Superfícies internas do player.
   Com o fundo agora branco puro, elas usam o cinza de apoio para não
   sumir dentro do cartão, que também é branco. */
:root[data-tema="light"] .demo__player,
:root[data-tema="light"] .demo__video { background-color: var(--neutral-900); }

/* No claro o player conta com sombra em vez do brilho laranja */
:root[data-tema="light"] .demo__player { box-shadow: var(--shadow-xl); }
:root[data-tema="light"] .demo__player:hover,
:root[data-tema="light"] .demo__player:focus-within { box-shadow: var(--shadow-2xl); }


/* O brilho do card em destaque já vem dos tokens --glow-destaque, que
   o tema claro redefine; a regra genérica de sombra dos .card abaixo
   não deve sobrepô-lo. */
:root[data-tema="light"] .card--destaque { box-shadow: var(--glow-destaque); }
:root[data-tema="light"] .card--destaque:hover { box-shadow: var(--glow-destaque-hover); }

/* =========================================================
   02 · RESET
   ========================================================= */
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--text);
  background-color: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  min-height: 100vh;
}

::selection { background-color: rgba(91, 155, 77, 0.25); }

/* Títulos em Poppins (Falcon: --falcon-font-sans-serif), corpo em
   Open Sans — mesma separação usada no app/login BPO Nexo. */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 500; line-height: 1.2; color: inherit; }

a { text-decoration: none; color: inherit; }
img, svg { max-width: 100%; display: block; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; }

/* Foco visível — padrão para links e controles avulsos. Os botões
   (.btn) e os toggles de ícone têm o próprio anel, que acompanha o
   raio deles; por isso ficam de fora. */
a:not(.btn):focus-visible,
button:not(.btn):not(.nav-toggle):not(.tema-toggle):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Ícones Lucide — stroke-width 1.5 e tamanho herdado do container */
.lucide { width: 20px; height: 20px; stroke-width: 1.5; flex: none; }
.ico-12 .lucide, .lucide.ico-12 { width: 12px; height: 12px; }
.ico-14 .lucide, .lucide.ico-14 { width: 14px; height: 14px; }
.ico-16 .lucide, .lucide.ico-16 { width: 16px; height: 16px; }
.ico-20 .lucide, .lucide.ico-20 { width: 20px; height: 20px; }
.ico-24 .lucide, .lucide.ico-24 { width: 24px; height: 24px; }

/* =========================================================
   03 · CAMADA DE BASE
   ========================================================= */
/* Todo o conteúdo fica no próprio empilhamento da página — sem
   camada de fundo decorativa (o DS não usa nenhuma). */
.page { position: relative; z-index: 1; }

/* =========================================================
   04 · TIPOGRAFIA (DS: Typography — escala exata)
   H1  96/86  tracking-tighter font-medium
   H2  72/76  tracking-tight   font-medium
   H3  48/50  tracking-tight   font-medium
   H4  30/36  leading-tight    font-semibold
   Body L 18/28 · Body M 14/20 · Body S 12/16
   ========================================================= */
.t-h1 {
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-weight: 500;
}

.t-h2 {
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 500;
  text-wrap: balance;
}

.t-h3 {
  font-size: clamp(1.875rem, 3.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 500;
  text-wrap: balance;
}

.t-h4 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.025em;
  font-weight: 600;
}

.t-body-l {
  font-size: 1.125rem;
  line-height: 1.625;
  font-weight: 500;
  color: var(--text-secondary);
}

.t-body-m {
  font-size: 0.875rem;
  line-height: 1.625;
  font-weight: 500;
  color: var(--text-secondary);
}

.t-body-s {
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--neutral-400);
}

/* Texto em destaque — cor sólida da marca, sem degradê: o DS não usa
   texto em gradiente em nenhuma tela de referência. */
.t-gradient { color: var(--text); }
.hero__destaque { color: var(--grad-text-destaque); }

/* DS: Uppercase Label */
.t-label {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-400);
}

/* Destaque tipográfico da marca: Poppins itálico (o DS não usa serifa) */
.t-serif { font-family: var(--font-heading); font-weight: 500; font-style: italic; }

/* Bordão da marca — mesmo tratamento de .bponexo-brand__tagline em
   ref/assets/css/auth.css: Poppins, sem itálico, duas linhas; a
   segunda no verde de destaque. */
.tagline-marca {
  font-family: var(--font-heading);
  font-weight: 500;
  font-style: normal;
}
.tagline-marca__linha1 { display: block; }
.tagline-marca__linha2 { display: block; color: var(--accent); }

/* =========================================================
   05 · LAYOUT (DS: max-w-7xl · px-6 md:px-10 · py-24)
   ========================================================= */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* Seções separadas por border-t border-white/5, como no DS */
.section {
  padding-block: var(--section-y);
  border-top: 1px solid var(--border);
}

/* --- Navegação interna por âncora ---
   A navbar é sticky, então todo alvo de link precisa parar abaixo
   dela: sem esta folga o topo da seção fica escondido atrás do
   header. O scroll-behavior suave está no reset (`html`) e é
   desligado por prefers-reduced-motion. */
:target,
[id] { scroll-margin-top: 96px; }

/* Destaque temporário do alvo, aplicado pelo JS após a rolagem.
   É só um anel que aparece e some — nada muda de tamanho nem de
   posição, para a página não "pular" ao fim da navegação. */
   O anel vive num ::after, e não no próprio elemento: alvos como o
   formulário do Hero já têm uma `animation` própria, e animar o
   elemento a substituiria — ao tirar a classe, aquela animação
   original recomeçaria do zero, com o formulário reentrando na tela. */
.destaque-alvo { position: relative; }

.destaque-alvo::after {
  content: '';
  position: absolute;
  inset: -8px;
  z-index: 2;
  border-radius: 16px;
  border: 2px solid var(--accent);
  /* Só o contorno: um preenchimento aqui cobriria o conteúdo do alvo,
     já que o anel precisa ficar por cima para ser visto. */
  pointer-events: none;
  animation: destaque-alvo 1.8s var(--ease) 1;
}

.section-head { margin-bottom: 64px; }
.section-head h2 { max-width: 22ch; }
/* `pretty` evita órfãs sem reflow agressivo em textos longos */
.section-head p { max-width: 56ch; }

/* `pretty` evita órfãs sem reflow agressivo em textos longos */
.section-head p,
.hero__sub { text-wrap: pretty; }
.section-head h2 { margin-bottom: 16px; }

/* Eyebrow: label maiúsculo de abertura de seção */
.eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 24px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Grids (DS: 12-column · split · gap-4/6) */
.grid { display: grid; gap: var(--gap-6); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* =========================================================
   06 · BOTÕES
   ========================================================= */

/* Base única: todo botão da interface — <a>, <button>, submit — usa
   .btn e herda daqui raio, altura, tipografia, espaçamento e estados.
   As variantes abaixo mudam só a cor. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-h);
  padding-inline: var(--btn-px);
  border: 1px solid transparent;
  border-radius: var(--btn-r);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--btn-t) var(--ease),
              border-color var(--btn-t) var(--ease),
              color var(--btn-t) var(--ease),
              transform var(--btn-t) var(--ease),
              box-shadow var(--btn-t) var(--ease);
}

.btn .lucide { width: 16px; height: 16px; flex: none; }

/* Estados compartilhados — a cor de cada um vem da variante */
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }

/* Anel de foco em vez de outline: acompanha o raio do botão */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--btn-ring);
}

.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* --- Variante primária: preenchimento na marca --- */
.btn--primary {
  background-color: var(--accent-fill);       /* navy no claro · verde no escuro */
  color: var(--on-accent);
}
.btn--primary:hover { background-color: var(--btn-fill-hover); box-shadow: var(--btn-shadow); }
.btn--primary:active { background-color: var(--btn-fill-active); box-shadow: none; }
.btn--primary:disabled:hover,
.btn--primary[disabled]:hover { background-color: var(--accent-fill); }

/* --- Variante secundária: mesma forma, peso visual menor --- */
.btn--secundario {
  background-color: var(--accent-tint);
  border-color: var(--accent-border);
  color: var(--accent);
}
.btn--secundario:hover {
  background-color: var(--accent-fill);
  border-color: transparent;
  color: var(--on-accent);
  box-shadow: var(--btn-shadow);
}
.btn--secundario:active { background-color: var(--btn-fill-active); box-shadow: none; }

/* --- Modificadores de largura e densidade --- */
.btn--bloco { width: 100%; }
.btn--compacto { min-height: 38px; padding-inline: 18px; font-size: 0.875rem; }

/* --- Carregando: spinner alinhado ao texto --- */
.btn.is-loading { pointer-events: none; }
.btn.is-loading::before {
  content: '';
  width: 15px;
  height: 15px;
  flex: none;
  border-radius: var(--r-full);
  border: 2px solid currentColor;
  border-top-color: transparent;              /* a fenda que dá a volta */
  opacity: 0.85;
  animation: spin 700ms linear infinite;
}

/* O <span> interno do markup antigo herda tudo do .btn */
.btn__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: inherit;
  font: inherit;
}

/* Partículas flutuantes: não existem no visual atual.
   O markup .points continua no HTML, mas não renderiza nada. */
.points { display: none; }

/* --- Link secundário (DS: Navigation Links) --- */
.link-sec {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--neutral-400);
  transition: color var(--t-base);
}
.link-sec:hover { color: var(--text); }
.link-sec .lucide { width: 14px; height: 14px; color: var(--accent); transition: color var(--t-base); }

/* Realce do acento no hover: clareia no tema escuro, escurece no
   claro — a matiz da marca é a mesma nos dois casos. */
.link-sec:hover .lucide,
.profissionais__item:hover .lucide { color: var(--accent-hover); }

/* =========================================================
   07 · NAVBAR (sticky · translúcida com blur)
   ========================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--bg-nav);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: padding var(--t-base);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-6);
  padding-block: 24px;
  transition: padding var(--t-base);
}

.header.rolado .navbar { padding-block: 16px; }

/* Logotipo — símbolo oficial BPO Nexo (assets/img/logo.png/.webp), já
   com o disco navy e o "N" bicolor embutidos na própria imagem. */
.logo { display: flex; align-items: center; gap: 10px; }

.logo__icone {
  display: block;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--r-full);
}
.logo__icone img { width: 100%; height: 100%; display: block; object-fit: contain; }

/* Variante maior para o cabeçalho */
.logo__icone--lg { width: 72px; height: 72px; }

.logo__nome {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text);
}
.logo__nome span { color: var(--accent); }

/* Links — text-xs tracking-widest text-neutral-400.
   Sem uppercase: os rótulos vêm em capitalização de sentença direto
   do HTML (desktop e mobile compartilham esta regra). */
.nav-links { display: flex; align-items: center; gap: var(--gap-6); }

/* :not(.nav-cta) preserva o estilo próprio do botão primário no menu */
.nav-links > li:not(.nav-cta) > a {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: none;
  color: var(--neutral-400);
  white-space: nowrap;                        /* rótulo do menu nunca quebra em duas linhas */
  transition: color var(--t-base);
}

.nav-links > li:not(.nav-cta) > a:hover,
.nav-links > li:not(.nav-cta) > a.ativo-link { color: var(--text); }

/* Link de destaque do menu (hoje o "Planos", que leva à página de
   planos e processos). Sai do cinza dos demais e usa a primária. O
   seletor repete o do bloco acima para vencer em especificidade. */
.nav-links > li:not(.nav-cta) > a.nav-destaque {
  color: var(--accent);
  font-weight: 600;
}

.nav-links > li:not(.nav-cta) > a.nav-destaque:hover { color: var(--accent-hover); }

.nav-cta { margin-left: 8px; }

/* Ações à direita: alternador de tema + menu mobile */
.nav-acoes { display: flex; align-items: center; gap: 8px; }

/* Botões só de ícone: quadrados, mas com o mesmo raio, a mesma
   transição e o mesmo anel de foco dos botões de texto. */
.nav-toggle,
.tema-toggle {
  display: grid;
  place-items: center;
  width: var(--btn-h);
  height: var(--btn-h);
  border-radius: var(--btn-r);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--neutral-400);
  cursor: pointer;
  transition: background-color var(--btn-t) var(--ease),
              color var(--btn-t) var(--ease),
              border-color var(--btn-t) var(--ease),
              box-shadow var(--btn-t) var(--ease);
}

.nav-toggle:focus-visible,
.tema-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--btn-ring);
}

.nav-toggle { display: none; }

.nav-toggle:hover,
.tema-toggle:hover {
  background-color: var(--surface-hover);
  border-color: var(--border-accent);
  color: var(--text);
}

.tema-toggle .lucide { width: 16px; height: 16px; }
/* O display: grid acima venceria o [hidden]: sem esta regra o botão de
   tela cheia apareceria onde o navegador não oferece a API. */
.tela-cheia-toggle[hidden] { display: none; }

/* =========================================================
   08 · HERO (DS: grid 12 colunas · pt-24 pb-10)
   ========================================================= */
.hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: var(--gap-4);
  padding-top: 96px;
  padding-bottom: 40px;
}

/* O texto ocupa 7 das 12 colunas e o card do gráfico as 5 restantes.
   O limite de leitura é dado por cada elemento (em `ch`), não pelo
   contêiner. */
.hero__texto { grid-column: span 7; }

/* O H1 mantém o topo da escala do DS, mas com teto reduzido:
   a manchete em português é longa e ocupa apenas 8 colunas.

   A medida em `ch` acompanha o tamanho da fonte, então o número de
   linhas se mantém do desktop ao mobile; `text-wrap: balance`
   distribui as palavras em linhas de comprimento parecido em vez de
   encher a primeira e deixar uma palavra órfã na última. */
.hero__titulo {
  font-size: clamp(2.5rem, 6vw, 5rem);
  max-width: 24ch;
  text-wrap: balance;
  margin-bottom: 24px;
}

/* Cada oração ocupa o próprio bloco e é balanceada em separado.
   O margin-top separa as duas orações da manchete sem mexer no
   line-height, que continua governando as quebras internas. */
.hero__destaque {
  display: block;
  margin-top: clamp(20px, 2.2vw, 32px);
}

.hero__slogan {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.4;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.hero__sub { max-width: 56ch; text-align: justify; }

/* --- Coluna direita do Hero --- */
.hero__grafico {
  grid-column: span 5;
  justify-self: end;
  width: 100%;
  max-width: 560px;
}

/* =========================================================
   CARTÃO DE GRÁFICO — "Share dataset" (Design System Falcon)
   Porta fiel de design-system/falcon/design-system.html
   (#chart-gallery-line-share-dataset): card com cabeçalho
   (título) + corpo num tom levemente diferente do card,
   igual ao par .card-header/.card-body.bg-body-tertiary do
   Falcon. Sem o alternador Preview/Code — é ferramenta da
   própria página de documentação, não do componente em si.
   ========================================================= */
.grafico-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.grafico-card__cabecalho {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.grafico-card__titulo {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.grafico-card__corpo {
  padding: 20px;
  background-color: var(--surface-soft);
}

.grafico-card__grafico { min-height: 500px; }

/* Entrada: roda no load (o Hero está acima da dobra, não depende do
   IntersectionObserver). `backwards` segura o quadro inicial antes do
   delay e solta ao terminar, liberando o transform do :hover. */
@keyframes listaEntrada {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.hero__grafico {
  animation: listaEntrada 600ms var(--ease) 150ms backwards;
  transition: transform 250ms var(--ease);
  will-change: transform;
}

.hero__grafico:hover { transform: translateY(-4px); }

/* =========================================================
   09 · TICKER DE PROFISSIONAIS
   ========================================================= */
.profissionais { padding-block: 40px; border-top: 1px solid var(--border); }
.profissionais__titulo { margin-bottom: 24px; }

.ticker { overflow: hidden; }

.ticker__track {
  display: flex;
  width: max-content;
  gap: var(--gap-4);
  will-change: transform;
  animation: ticker 40s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }

/* Item = card de vidro compacto */
.profissionais__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: background-color var(--t-base), border-color var(--t-base);
}
.profissionais__item:hover { background-color: var(--surface-hover); border-color: var(--border-accent); }
.profissionais__item .lucide { width: 16px; height: 16px; color: var(--accent); }

/* =========================================================
   10 · CARDS (DS: Card Component)
   Padrão: bg-white/5 · border-white/10 · rounded-lg · p-8
   Hover: -translate-y-1 · bg-white/10 · border-orange-500/50
   ========================================================= */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;                                 /* iguala a altura na fileira */
  padding: 28px;
  border-radius: 16px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform 300ms ease, background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

.card:hover {
  transform: translateY(-6px);
  background-color: var(--surface-hover);
  border-color: var(--accent-border);
}

/* Ícone do card — quadrado de vidro com ícone laranja. O raio
   acompanha o do cartão (16px), um passo abaixo. */
.card__icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border-radius: var(--r-md);
  background-color: var(--accent-tint);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  flex: none;
  transition: background-color var(--t-base), border-color var(--t-base);
}
.card:hover .card__icone { background-color: var(--accent-tint-hover); }

/* --- "O que entregamos" (#servicos) e "Cobrança e Faturamento"
   (#cobranca): ícones em selo sólido, cor própria por card, para dar
   variedade e presença visual sem sair dos tokens do DS (mesmas
   cores semânticas do card "Categorias financeiras" e das etiquetas
   .resp). Escopado às duas seções — os demais grupos de .card
   continuam com o selo verde único de sempre. */
#servicos .card__icone,
#cobranca .card__icone,
#equipe .card__icone {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: none;
  color: #ffffff;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
#servicos .card__icone .lucide,
#cobranca .card__icone .lucide,
#equipe .card__icone .lucide { width: 24px; height: 24px; }
#servicos .card:hover .card__icone,
#cobranca .card:hover .card__icone,
#equipe .card:hover .card__icone { transform: translateY(-2px); box-shadow: var(--shadow-card); }

#servicos .card__icone--vermelho,
#equipe .card__icone--vermelho { background-color: var(--negativo); }
#servicos .card__icone--verde,
#equipe .card__icone--verde { background-color: var(--accent); }
#servicos .card__icone--ambar,
#cobranca .card__icone--ambar,
#equipe .card__icone--ambar { background-color: var(--alerta); }
#servicos .card__icone--esmeralda,
#cobranca .card__icone--esmeralda,
#equipe .card__icone--esmeralda { background-color: var(--positivo); }
#servicos .card__icone--azul,
#cobranca .card__icone--azul,
#equipe .card__icone--azul { background-color: var(--info); }

/* Hierarquia: título colado no ícone, descrição afastada dele e a
   lista separada por um respiro maior ainda. */
.card h3 { margin-bottom: 10px; color: var(--text); }
.card p { font-size: 0.875rem; line-height: 1.65; color: var(--neutral-400); margin-bottom: 22px; }
.card p:last-child { margin-bottom: 0; }
/* Link no meio do texto do card (ex.: DEV Contabilidade em #equipe) */
.card p a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-border); text-underline-offset: 3px; transition: color 0.2s, text-decoration-color 0.2s; }
.card p a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }
.card p a strong { color: inherit; }

.card__lista { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }

.card__lista li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.card__lista li .lucide { width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }

/* --- Card em destaque ---
   Mesmo padrão de "superfície ativa" do resto do DS (ex.: card-resumo
   --total em app.css): fundo chapado no tom mais claro do acento,
   borda e sombra na marca — sem véu nem fio de luz em degradê. */
.card--destaque {
  background-color: var(--accent-tint);
  border-color: var(--accent-border);
  box-shadow: var(--glow-destaque);
}

.card--destaque:hover {
  border-color: var(--border-accent);
  box-shadow: var(--glow-destaque-hover);
}

.card--destaque .card__icone {
  background-color: var(--accent-tint-hover);
  border-color: var(--accent-border);
}

/* =========================================================
   10b · ESPECIALIDADES ATENDIDAS
   Card com foto no topo. Reaproveita .grid-4, que já responde
   4 / 2 / 1 colunas nos breakpoints do DS.
   ========================================================= */
/* Grupo (categoria) de especialidades: título + grade própria. Cada
   grupo tem seu próprio .grid-4, então a cascata de entrada e o
   grid-auto-rows recomeçam por grupo — o que já é o efeito desejado. */
.especialidades-grupo + .especialidades-grupo { margin-top: var(--gap-12); }

.especialidades-grupo__titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-strong);
}
.especialidades-grupo__titulo .lucide {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--accent);
}

/* grid-auto-rows: 1fr iguala TODAS as fileiras, não só os cards de uma
   mesma fileira — sem isso a segunda fileira encolhe se os textos dela
   forem mais curtos. */
.especialidades {
  gap: var(--gap-6);
  grid-auto-rows: 1fr;
}

.especialidade {
  display: flex;
  flex-direction: column;
  height: 100%;                               /* preenche a célula do grid */
  overflow: hidden;                           /* recorta a foto e o zoom */
  border-radius: var(--r-sm);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  /* Só transform e opacity animam de fato — as duas propriedades que o
     compositor resolve sem recalcular layout. */
  transition: transform 300ms var(--ease),
              border-color 300ms var(--ease),
              box-shadow 300ms var(--ease);
}

.especialidade:hover,
.especialidade:focus-within {
  transform: translateY(-6px) scale(1.02);
  border-color: var(--accent);                /* verde de marca */
  box-shadow: var(--shadow-card);
}

/* Cascata de entrada: fade-up de 500ms com 80ms entre os cards.
   O ciclo reinicia a cada 4 (a fileira do desktop), então o atraso
   máximo é 240ms — a cascata nunca vira espera. Substitui as classes
   .delay-* do DS, que só cobrem 4 posições. */
.especialidades .especialidade { animation-duration: 500ms; }
.especialidades .especialidade:nth-child(4n + 1) { animation-delay: 0ms; }
.especialidades .especialidade:nth-child(4n + 2) { animation-delay: 80ms; }
.especialidades .especialidade:nth-child(4n + 3) { animation-delay: 160ms; }
.especialidades .especialidade:nth-child(4n)     { animation-delay: 240ms; }

/* Moldura de altura fixa: é ela que padroniza as fotos. Os arquivos
   originais têm resoluções e proporções diferentes (2:3, 1:1, 9:16),
   e o recorte pelo centro os iguala sem redimensionar nem distorcer
   nada — a resolução original é preservada, só o enquadramento muda. */
.especialidade__foto {
  position: relative;
  width: 100%;
  height: 260px;
  flex: none;                                 /* não encolhe quando o card estica */
  background-color: var(--accent-tint);
  border-bottom: 1px solid var(--border);
}

.especialidade__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 350ms var(--ease);
}

.especialidade:hover .especialidade__foto img,
.especialidade:focus-within .especialidade__foto img { transform: scale(1.05); }

/* Sem arquivo de imagem: o JS marca a moldura e o ícone da
   especialidade aparece no lugar, mantendo a altura do card. */
.especialidade__foto--vazia img { display: none; }
.especialidade__foto--vazia { display: grid; place-items: center; }
.especialidade__foto--vazia .lucide {
  width: 40px;
  height: 40px;
  color: var(--accent);
  opacity: 0.5;
}

.especialidade__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
}

/* Título e descrição têm altura reservada em número de linhas, então
   começam e terminam na mesma altura em todos os cards, mesmo quando
   o nome da especialidade quebra em duas linhas. */
.especialidade__titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: calc(2 * 1.3em);
  margin-bottom: 8px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--accent);                       /* verde de marca */
}
.especialidade__titulo .lucide { width: 18px; height: 18px; flex: none; }

.especialidade__corpo p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;                      /* corta em 3 linhas */
  line-clamp: 3;
  overflow: hidden;
  min-height: calc(3 * 1.6em);                /* e reserva as 3 sempre */
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--neutral-400);
  margin-bottom: 16px;
}

/* "Saiba mais" usa .btn .btn--secundario .btn--compacto no HTML —
   mesma forma e mesmos estados dos demais botões, só mais denso para
   caber no card. Aqui fica apenas o posicionamento. */
.especialidade__link {
  align-self: flex-start;
  margin-top: auto;
}
.especialidade__link .lucide { transition: transform var(--btn-t) var(--ease); }
.especialidade__link:hover .lucide { transform: translateX(2px); }

/* =========================================================
   11 · DEMONSTRAÇÃO EM VÍDEO

   O player deixou de dividir a linha com o texto e passou a ocupar
   a largura toda do bloco: dentro de um container de 1232px, uma
   coluna de metade rendia ~600px de vídeo. Empilhado, ele chega a
   1040px — texto e player alinhados pela mesma borda esquerda e
   pela mesma largura, como nas páginas de produto SaaS.
   ========================================================= */
.demo {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
}

.demo__info h2 { max-width: 22ch; margin-bottom: 16px; }
.demo__info > p { max-width: 62ch; margin-bottom: var(--gap-8); text-wrap: pretty; }

/* Destaques — na largura maior cabem três colunas sem apertar */
.demo__destaques {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 20px;
  margin-bottom: var(--gap-8);
  list-style: none;
}

.demo__destaques li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.demo__destaques .lucide {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--accent);
}

.demo__cta { gap: 10px; white-space: normal; }
.demo__cta .lucide { width: 16px; height: 16px; transition: transform var(--t-fast); }
.demo__cta:hover .lucide { transform: translateX(3px); }

/* Player 16:9 — autoplay mudo em loop, controles só no hover/clique.
   O aspect-ratio segura a proporção em qualquer largura, então o
   vídeo cresce sem nunca distorcer nem ser cortado. */
.demo__player {
  position: relative;
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  border: 1px solid var(--border-strong);
  background-color: var(--neutral-950);
  box-shadow: var(--shadow-2xl);
  overflow: hidden;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease), border-color 280ms var(--ease);
}

/* O halo do player fica num wrapper, e não num ::after do próprio
   player: com o overflow: hidden que segura o enquadramento do
   vídeo, qualquer brilho desenhado ali dentro seria recortado. */
.demo__moldura {
  position: relative;
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
}

.demo__moldura::before {
  content: '';
  position: absolute;
  inset: -40px;
  z-index: -1;
  background-color: var(--accent-halo);
  filter: blur(80px);
  opacity: 0.2;
  pointer-events: none;
}

@supports not (aspect-ratio: 16 / 9) {
  .demo__player { height: 0; padding-bottom: 56.25%; }
}

.demo__player:hover,
.demo__player:focus-within {
  transform: scale(1.01);
  border-color: var(--border-accent);
  box-shadow: var(--shadow-orange-hover), var(--shadow-2xl);
}

.demo__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  object-fit: cover;
  background-color: var(--neutral-950);
}

/* =========================================================
   12 · PORTAL DO CLIENTE
   ========================================================= */
.portal {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-12);
}

/* Texto à esquerda e funcionalidades à direita; o dashboard do
   portal (assets/css/portal-cliente.css) ocupa a largura toda embaixo. */
.portal__info {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--gap-12);
  align-items: end;
}
.portal__info h2 { margin-bottom: 16px; }

.portal__funcionalidades {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* Chips derivados do "Step Item" do DS */
.portal__func {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: background-color var(--t-base), border-color var(--t-base), color var(--t-base);
}

.portal__func:hover { background-color: var(--surface-hover); border-color: var(--border-accent); color: var(--text); }
/* Ícone de cada funcionalidade em selo sólido, com cor própria — o
   mesmo tratamento dos ícones de #servicos (tokens semânticos do DS). */
.portal__func .lucide {
  flex: none;
  box-sizing: content-box;
  width: 16px;
  height: 16px;
  padding: 8px;
  border-radius: var(--r-sm);
  background-color: var(--accent);
  color: #ffffff;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.portal__func:nth-child(5n + 2) .lucide { background-color: var(--info); }
.portal__func:nth-child(5n + 3) .lucide { background-color: var(--alerta); }
.portal__func:nth-child(5n + 4) .lucide { background-color: var(--positivo); }
.portal__func:nth-child(5n + 5) .lucide { background-color: var(--negativo); }
.portal__func:hover .lucide { transform: translateY(-1px); box-shadow: var(--shadow-card); }

.portal__mockup { position: relative; }

/* =========================================================
   13 · BENEFÍCIOS
   ========================================================= */
.beneficio {
  padding: var(--gap-6);
  border-radius: var(--r-sm);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform var(--t-base), background-color var(--t-base), border-color var(--t-base);
}

.beneficio:hover {
  transform: translateY(-4px);
  background-color: var(--surface-hover);
  border-color: var(--border-accent);
}

/* Selo sólido com cor própria por benefício — mesmo tratamento e
   mesmos tokens dos ícones de #servicos, para a página falar uma
   única linguagem visual. */
.beneficio__icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 12px;
  background-color: var(--accent);
  color: #ffffff;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.beneficio__icone .lucide { width: 22px; height: 22px; }
.beneficio:hover .beneficio__icone { transform: translateY(-2px); box-shadow: var(--shadow-card); }

.beneficio__icone--vermelho { background-color: var(--negativo); }
.beneficio__icone--verde { background-color: var(--accent); }
.beneficio__icone--ambar { background-color: var(--alerta); }
.beneficio__icone--esmeralda { background-color: var(--positivo); }
.beneficio__icone--azul { background-color: var(--info); }

.beneficio h4 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 8px;
}

.beneficio p { font-size: 0.875rem; line-height: 1.6; color: var(--neutral-400); }

/* =========================================================
   13a · EQUIPE DO BPO
   Reaproveita .card e o selo sólido de #servicos; o que é próprio
   da seção é o tempo de experiência ao lado do selo.
   ========================================================= */
/* O título da seção é mais longo que os demais (50 caracteres): com
   os 22ch padrão do .section-head ele iria para três linhas. */
#equipe .section-head h2 { max-width: 26ch; }

#equipe .card p strong { font-weight: 600; color: var(--text); }

/* Selo à esquerda, experiência à direita, na mesma linha */
.equipe__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.equipe__topo .card__icone { margin-bottom: 0; }

/* .card p:last-child zera a margem; aqui o <p> é o último do
   .equipe__topo, então a regra acima não pode valer para ele. */
#equipe .card .equipe__anos {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-400);
  text-align: right;
}
#equipe .card .equipe__anos strong {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: none;
  color: var(--accent);
}


/* =========================================================
   13b · PERGUNTAS FREQUENTES (acordeão)

   O painel anima apenas `max-height` e `opacity` — nada de
   layout por quadro, então a abertura roda no compositor.
   A altura exata é escrita pelo JS (main.js, bloco "FAQ"),
   que mede o conteúdo antes de abrir; sem JS os painéis
   ficam todos visíveis pela regra de fallback no fim.
   ========================================================= */
.faq {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq__item {
  border-radius: var(--r-md);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  overflow: hidden;
  transition: border-color var(--t-base), background-color var(--t-base);
}

.faq__item:hover { border-color: var(--border-accent); }

/* Item aberto — borda e leve halo na primária */
.faq__item.aberto {
  border-color: var(--border-accent);
  background-color: var(--surface-hover);
  box-shadow: var(--shadow-orange-sm);
}

.faq__cabecalho { margin: 0; }

.faq__gatilho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 20px 24px;
  background: none;
  border: 0;
  text-align: left;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--text);
  cursor: pointer;
  transition: color var(--t-fast);
}

.faq__gatilho:hover { color: var(--accent); }
.faq__item.aberto .faq__gatilho { color: var(--accent); }

/* Foco visível apenas para navegação por teclado */
.faq__gatilho:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--r-md);
}

.faq__pergunta { flex: 1; }

/* --- Ícone "+" que vira "−" ---
   Duas barras cruzadas: a vertical desaparece por escala ao abrir,
   e o conjunto gira 180° para o movimento ficar contínuo. */
.faq__icone {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: var(--r-full);
  color: var(--neutral-400);
  transition: transform 280ms var(--ease), color var(--t-fast);
}

.faq__icone::before,
.faq__icone::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  border-radius: 2px;
  background-color: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 280ms var(--ease);
}

.faq__icone::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq__gatilho:hover .faq__icone { color: var(--accent); }

.faq__item.aberto .faq__icone { transform: rotate(180deg); color: var(--accent); }
.faq__item.aberto .faq__icone::after { transform: translate(-50%, -50%) rotate(90deg) scaleX(0); }

/* --- Painel da resposta --- */
.faq__painel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 280ms var(--ease), opacity 200ms ease;
}

.faq__item.aberto > .faq__painel {
  opacity: 1;
  transition: max-height 280ms var(--ease), opacity 260ms ease 40ms;
}

.faq__resposta {
  padding: 0 24px 22px;
  border-top: 1px solid var(--border);
  margin-top: 2px;
  padding-top: 18px;
}

.faq__resposta p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--neutral-400);
}

.faq__resposta a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-fast);
}
.faq__resposta a:hover { color: var(--accent-hover); }

/* Sem JavaScript o acordeão não fecha nada: todo o conteúdo
   permanece acessível em vez de ficar preso em max-height 0. */
html:not(.js) .faq__painel { max-height: none; opacity: 1; }

/* =========================================================
   15 · RODAPÉ
   ========================================================= */
.footer { border-top: 1px solid var(--border); padding-top: 64px; }

/* --- Assinatura de marca: bloco próprio, bem maior que o lockup do
   header, para funcionar como ponto focal do rodapé. Alinhado à
   esquerda, na mesma margem do container — mesmo eixo do logo do
   header e dos títulos de seção, só numa escala muito maior. --- */
.footer__marca {
  padding-bottom: var(--gap-8);
  margin-bottom: var(--gap-12);
  border-bottom: 1px solid var(--border);
}

.footer__marca-logo {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
}

.footer__marca-icone {
  display: block;
  width: clamp(64px, 7vw, 96px);
  height: clamp(64px, 7vw, 96px);
  flex: none;
  border-radius: var(--r-full);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
/* O disco navy ocupa só 140 dos 300px do logo.png (o resto é margem
   transparente). Ampliado 2,14x dentro da moldura redonda, ele a
   preenche: um círculo só, em vez do disco pequeno dentro de outro. */
.footer__marca-icone img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transform: scale(2.14);
}

.footer__marca-nome {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.footer__marca-nome span { color: var(--accent); }

.footer__marca-tagline {
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.35;
  max-width: 34ch;
}

.footer__marca-desc {
  margin-top: 16px;
  max-width: 56ch;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--neutral-400);
}


.footer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-8);
  padding-bottom: var(--gap-12);
}

.footer__col h4 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-500);
  margin-bottom: 20px;
}

.footer__col p { font-size: 0.875rem; line-height: 1.625; color: var(--neutral-400); margin-bottom: 14px; }

.footer__col ul { display: flex; flex-direction: column; gap: 12px; }

.footer__col ul li a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--neutral-400);
  transition: color var(--t-base);
}
.footer__col ul li a:hover { color: var(--text); }

.footer__social { display: flex; gap: 12px; margin-top: 4px; }

.footer__social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background-color: var(--surface);
  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), transform var(--t-base);
}
.footer__social a:hover {
  background-color: var(--surface-hover);
  border-color: var(--border-accent);
  color: var(--text);
  transform: translateY(-2px);
}
.footer__social .lucide { width: 16px; height: 16px; }

.footer__contato-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--neutral-400);
  margin-bottom: 14px;
}
.footer__contato-item .lucide { width: 16px; height: 16px; color: var(--accent); }

/* A folga extra embaixo é o espaço da barra fixa de CTA. Fica sempre
   reservada, e não só quando a barra aparece: assim o rodapé nunca
   "pula" no meio da rolagem por causa de um padding que muda. */
.footer__bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  padding-bottom: 108px;
  text-align: center;
}

.footer__bottom span { color: var(--accent); font-weight: 600; }

/* =========================================================
   16 · BARRA FIXA DE CTA

   Some no topo da página e sobe quando o Hero sai de cena. Toda a
   transição é transform + opacity; `visibility` entra junto só para
   tirar a barra do fluxo de interação enquanto ela está fora da
   tela (o botão também recebe tabindex="-1" pelo JS).
   ========================================================= */
.cta-fixa {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  padding-block: 14px;
  border-top: 1px solid var(--border-strong);
  border-radius: 16px 16px 0 0;
  background-color: var(--bg-nav-menu);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 -12px 32px -18px rgba(0, 0, 0, 0.55);

  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: transform 340ms var(--ease), opacity 340ms var(--ease), visibility 340ms;
}

.cta-fixa.visivel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cta-fixa__conteudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-8);
  width: 100%;
  max-width: var(--max-w);
  min-height: 50px;                             /* 78px com o padding */
  /* Mesma geometria do .container, para o texto da barra nascer na
     mesma coluna do conteúdo da página. */
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.cta-fixa__titulo {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}

.cta-fixa__sub {
  margin-top: 2px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--neutral-400);
}

.cta-fixa__botao { flex: none; }

/* O botão "voltar ao topo" sobe para não encostar na barra */
.cta-fixa.visivel ~ .fab-topo { transform: translateY(-88px); }
.cta-fixa.visivel ~ .fab-topo:hover { transform: translateY(-90px); }

/* =========================================================
   16b · BOTÃO FLUTUANTE — voltar ao topo
   ========================================================= */
.fab-topo {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: grid;
  place-items: center;
  border-radius: var(--btn-r);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  width: 44px;
  height: 44px;
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--neutral-400);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
}
.fab-topo.visivel { opacity: 1; visibility: visible; transform: translateY(0); }
.fab-topo:hover { color: var(--text); border-color: var(--border-accent); transform: translateY(-2px); }
.fab-topo .lucide { width: 16px; height: 16px; }

/* =========================================================
   17 · ANIMAÇÕES (DS: Motion & Interaction)
   ========================================================= */

/* fadeSlideIn — opacidade + deslocamento + desfoque */
@keyframes fadeSlideIn {
  0%   { opacity: 0; transform: translateY(30px); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0);    filter: blur(0);   }
}

@keyframes floating-points {
  0%   { transform: translateY(0); }
  85%  { opacity: 0; }
  100% { transform: translateY(-55px); opacity: 0; }
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Anel do status "Online" — expande e some, sem deslocar nada */
@keyframes pulso-status {
  0%   { transform: scale(1);   opacity: 0.6; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Destaque do alvo de uma navegação interna: o anel entra rápido e
   sai devagar, deixando claro onde a rolagem parou. */
@keyframes destaque-alvo {
  0%   { opacity: 0;    transform: scale(0.99); }
  20%  { opacity: 1;    transform: scale(1);    }
  60%  { opacity: 0.85; transform: scale(1);    }
  100% { opacity: 0;    transform: scale(1);    }
}

/* Varredura da faixa de sincronização */
@keyframes sinc-varredura {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}


@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Reveal on scroll — pausado até o IntersectionObserver liberar.
   Condicionado a .js: sem JavaScript (ou se o script falhar) o
   conteúdo permanece visível em vez de ficar preso em opacity 0.

   fill-mode `backwards` (e não `both`): segura o estado inicial
   enquanto a animação está parada e o solta ao terminar. Com `both`,
   o `transform: translateY(0)` do último quadro continuava valendo
   depois do fim e vencia qualquer transform de :hover — os cards
   ficavam sem a elevação. O quadro 100% já é o estado natural do
   elemento, então soltar não muda nada visualmente. */
.js .animate-on-scroll {
  animation: fadeSlideIn 1s var(--ease) backwards;
  animation-play-state: paused;
}
.js .animate-on-scroll.animate { animation-play-state: running; }

/* Nos cards a entrada é mais curta que o 1s padrão da página: com três
   ou quatro na mesma fileira, o escalonamento dos delays já estica
   bastante a sequência — 600ms mantém o conjunto vivo. */
.js .card.animate-on-scroll { animation-duration: 600ms; }

/* Escalonamento de entrada, como os delays do DS */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.35s; }
.delay-4 { animation-delay: 0.5s; }

/* =========================================================
   18 · PREFERÊNCIA POR MENOS MOVIMENTO
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .ticker__track { animation: none; }
  .animate-on-scroll { animation: none; opacity: 1; transform: none; filter: none; }

  .hero__grafico { animation: none; transform: none; }

  /* O acordeão continua abrindo e fechando, só que sem transição:
     a troca é instantânea em vez de animada. */
  .faq__painel,
  .faq__icone,
  .faq__icone::before,
  .faq__icone::after { transition: none; }

  /* A barra de CTA continua entrando e saindo, mas sem deslizar. */
  .cta-fixa { transition: opacity 0.001ms, visibility 0.001ms; transform: none; }
  .cta-fixa.visivel { transform: none; }
  .destaque-alvo::after { animation-duration: 900ms !important; }
}

/* =========================================================
   19 · RESPONSIVIDADE
   Breakpoints do DS: md 768px · lg 1024px
   ========================================================= */
@media (min-width: 768px) {
  :root { --pad-x: 40px; }
}

@media (max-width: 1023.98px) {
  /* Abaixo de 1024px o formulário desce para debaixo do texto */
  /* minmax(0, 1fr), e não 1fr: o tamanho mínimo automático de uma
     faixa de grid é o min-content do conteúdo, então um título longo
     ou uma palavra grande alargaria a coluna para além da tela. Com
     o mínimo em 0 a faixa nunca passa da largura disponível e o texto
     quebra normalmente. Vale para todos os grids abaixo. */
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 64px; gap: var(--gap-8); }
  .hero__texto { grid-column: auto; }
  .hero__grafico { grid-column: auto; justify-self: start; }

  /* Abaixo de 1024px o texto fica sobre as funcionalidades */
  .portal__info { grid-template-columns: minmax(0, 1fr); gap: var(--gap-8); }
  .portal__funcionalidades { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Tablet: o player já é empilhado; aqui só encurta o respiro e
     reduz o halo, que num espaço menor pesava demais. */
  .demo { gap: var(--gap-8); }
  .demo__moldura::before { inset: -24px; opacity: 0.14; }
  .demo__destaques { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Tablet: a barra de CTA mantém o layout, só aperta os espaços */
  .cta-fixa__conteudo { gap: var(--gap-6); }
  .cta-fixa__sub { max-width: 46ch; }

  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* -----------------------------------------------------------
     MENU RECOLHIDO A PARTIR DAQUI

     O limite é 1024px, e não 768px, porque abaixo disso a régua
     não fecha: sobram ~940px de container e a fila de links mais
     o logo, o botão e os dois toggles pedem mais do que isso.
     Em vez de deixar os rótulos apertados ou quebrados em duas
     linhas, o menu inteiro vai para o painel recolhido.
     ----------------------------------------------------------- */
  .nav-toggle { display: grid; }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px var(--pad-x) 20px;
    background-color: var(--bg-nav-menu);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
  }

  .nav-links.ativo { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-links > li:not(.nav-cta) > a { display: block; padding: 12px 4px; }
  .nav-cta { margin: 8px 0 0; }
  .nav-cta .btn { width: 100%; }
}

@media (max-width: 767.98px) {
  :root { --section-y: 64px; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .portal__funcionalidades { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--gap-8); }

  /* No celular o ícone encolhe e o gap aperta, mas o lockup continua em
     linha — só empilha se a marca for maior que a tela (400px abaixo). */
  .footer__marca-logo { gap: 14px; }
  .footer__marca-icone { width: 56px; height: 56px; }

  /* Logo do cabeçalho também recua abaixo de 768px, onde o menu já foi
     para o painel recolhido e a régua fica mais apertada. */
  .logo__icone--lg { width: 44px; height: 44px; }
  .logo__nome { font-size: 1.1875rem; }

  .hero__grafico { max-width: none; }

  .card, .beneficio { padding: var(--gap-6); }

  #equipe .card .equipe__anos strong { font-size: 1.625rem; }


  /* Barra de CTA no celular: texto menor, subtítulo fora (a altura
     dobraria) e botão compacto, sem tomar a tela toda. */
  .cta-fixa { padding-block: 12px; }
  .cta-fixa__conteudo { gap: 14px; min-height: 46px; }
  .cta-fixa__titulo { font-size: 0.875rem; line-height: 1.3; }
  .cta-fixa__sub { display: none; }
  .cta-fixa__botao { min-height: 44px; padding-inline: 18px; font-size: 0.875rem; }
  .cta-fixa.visivel ~ .fab-topo { transform: translateY(-80px); }
  .cta-fixa.visivel ~ .fab-topo:hover { transform: translateY(-82px); }

  .faq { gap: 10px; }
  .faq__gatilho { padding: 16px 18px; gap: 14px; font-size: 0.9375rem; }
  .faq__resposta { padding: 16px 18px 18px; }
  .demo__destaques { grid-template-columns: minmax(0, 1fr); }
  .demo__cta { width: 100%; }

  /* No celular o player ocupa a largura toda, com raio menor */
  .demo__player { border-radius: 16px; }
  .demo__moldura::before { display: none; }
}

/* ---------------------------------------------------------
   CELULARES ESTREITOS (≤ 400px)

   Faixa dos aparelhos de 320–390px, onde a régua de 24px de
   respiro lateral mais o logo, os dois toggles e a barra de CTA
   deixam de caber. Aqui só se aperta a métrica — nenhum bloco
   muda de forma nem some.
   --------------------------------------------------------- */
@media (max-width: 400px) {
  :root { --pad-x: 18px; }

  /* O cabeçalho é o ponto mais apertado: 24px de gap entre o logo
     e as ações estourava a linha em 320px. */
  .navbar { gap: 12px; }
  .logo { min-width: 0; }
  .logo__nome { font-size: 1.0625rem; }
  .nav-acoes { flex: none; gap: 6px; }

  /* 42px continua acima do alvo mínimo de toque recomendado */
  .nav-toggle,
  .tema-toggle { width: 42px; height: 42px; }

  /* Na barra fixa o título passa a caber em uma linha ao lado do
     botão, em vez de quebrar e dobrar a altura da barra. */
  .cta-fixa__titulo { font-size: 0.8125rem; }
  .cta-fixa__conteudo { gap: 10px; }
  .cta-fixa__botao { padding-inline: 14px; }

  /* O botão flutuante encosta menos na borda e no texto do rodapé */
  .fab-topo { right: 14px; bottom: 14px; }
}