/* =========================================================
   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 profundidade, 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)
   ========================================================= */
: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);
  transform: scaleX(var(--progresso, 0));
  transform-origin: left;
}

/* =========================================================
   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; }

/* Rótulos do menu: um pouco maiores, mais firmes e mais claros que o
   cinza de apoio (sem chegar ao --text, que fica para hover e ativo) */
.nav-links > li:not(.nav-cta) > a {
  position: relative;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 72%, var(--neutral-400));
}
.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; }

/* --- Cartões: cantos retos e inclinação 3D no hover (JS: --tx/--ty) --- */
.card,
.grafico-card,
#servicos .card__icone,
#cobranca .card__icone,
#equipe .card__icone,
.beneficio__icone { border-radius: 0; }

/* Os cartões de PLANO ficam FORA da inclinação 3D (pedido do usuário): na seção "BPO Financeiro
   sob medida para sua empresa" o cartão não gira com o ponteiro. Sem a regra daqui, vale o hover
   plano de processos.css (translateY(-4px) + sombra), que é o original. */
.card,
.beneficio,
.especialidade {
  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 {
  transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateZ(14px);
}
.card.is-inclinado,
.beneficio.is-inclinado,
.especialidade.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. No site, os dois ficam sobre o filme do Hero
   (assets/css/hero-filme.css).
   ========================================================= */
.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);
}


/* --- 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
   O cartão sozinho no palco; a inclinação (--rx/--ry) vem do
   ponteiro e da órbita lenta do noema.js.
   ========================================================= */
.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%;
}

.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" usa o tema OPOSTO ao do site, para se
   destacar do fundo: claro no tema escuro (padrão) e escuro no tema
   claro. O share-dataset-chart.js lê as cores do próprio elemento e
   se redesenha ao trocar o tema (bn:tema-alterado), então o gráfico
   acompanha. */

/* Tema escuro do site → cartão claro (tokens do tema claro de style.css) */
.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: var(--verde);
  --negativo: #e63757;
  --alerta: #d67d1f;
  --info: #1d6fa5;
  --shadow-card: 0 0.5rem 1.5rem rgba(3, 25, 46, 0.08), 0 0 0 1px rgba(3, 25, 46, 0.06);
  color: var(--text);
}

/* Tema claro do site → cartão escuro (tokens do tema escuro de style.css),
   com a superfície opaca no navy da marca para os marcadores do gráfico,
   pintados com --surface, não ficarem vazados. */
:root[data-tema="light"] .cena__nucleo {
  color-scheme: dark;
  --surface: #0f2137;
  --surface-soft: #0b1a2c;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #eef3f8;
  --text-secondary: #9da9bb;
  --neutral-400: #8b97a8;
  --accent-fill: var(--bn-green-bright);
  --positivo: var(--verde);
  --negativo: #e63757;
  --alerta: #f5803e;
  --info: #27bcfd;
  --shadow-card: 0 18px 40px -16px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08);
  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; }

/* =========================================================
   N9 · JORNADA ("O caminho que cada informação percorre")
   As seis etapas numa linha do tempo vertical, no padrão "Timeline"
   do Falcon (ver abaixo). Aqui também se devolvem os cantos
   arredondados que a camada NØEMA zera, usados pelos cartões.
   ========================================================= */
#jornada {
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
}

/* --- Linha do tempo (padrão "Timeline" do design system:
   design-system/falcon/app/support-desk/contact-details.html) ---
   A linha corre no meio da seção; cada etapa tem o marco com o ícone sobre ela, o número de um
   lado e o cartão do outro, alternando (--inicio = cartão à esquerda; --fim = cartão à direita).
   Abaixo de 992px vira uma coluna só, com a linha e os marcos à esquerda. As medidas vêm do
   Falcon (linha e marco a 1,375rem no celular, seta de 0,8rem a 0,9rem do topo do cartão); as
   cores, as fontes e os cantos são os do site. */
.linha-tempo {
  position: relative;
  list-style: none;
  margin: 0;
  padding-block: 24px;
}

.lt-item {
  position: relative;
  padding-left: 1.8rem;
}
.lt-item + .lt-item { margin-top: 3rem; }

/* A linha que costura as etapas: de um marco ao seguinte (a última etapa não precisa). */
.lt-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.375rem;
  top: 0;
  height: calc(100% + 3rem);
  border-left: 1px solid var(--border-strong);
}

.lt-icone {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-full);
  background-color: var(--bg);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  transition: background-color var(--t-base), box-shadow var(--t-base);
}
.lt-icone .lucide { width: 18px; height: 18px; }
.lt-item:hover .lt-icone {
  background-color: var(--verde);
  color: var(--on-verde);
  box-shadow: var(--shadow-orange-sm);
}

.lt-tempo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 0.25rem;
  padding-left: 2.25rem;
}
.lt-tempo__num {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--neutral-500);
  font-variant-numeric: tabular-nums;
}
.lt-tempo__quem {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.lt-conteudo {
  position: relative;
  margin-top: 12px;
  margin-left: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  z-index: 1;
}
.lt-cartao {
  padding: 20px 22px;
  background-color: var(--surface);
  border-radius: var(--r-md);
}
.lt-cartao__titulo { margin: 0 0 6px; font-size: 0.9375rem; font-weight: 600; }
.lt-cartao__texto {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--neutral-400);
  text-wrap: pretty;
}

@media (min-width: 992px) {
  .lt-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    padding-left: 0;
  }
  .lt-item:not(:last-child)::before { left: 50%; transform: translateX(-50%); }
  .lt-icone { left: 50%; transform: translateX(-50%); }

  .lt-conteudo { margin-top: 0; }
  /* A seta do cartão apontando para a linha: um quadrado girado 45°, atrás do cartão — só a
     ponta que passa da borda aparece (o fundo do .lt-cartao cobre o resto). */
  .lt-conteudo::before {
    content: "";
    position: absolute;
    width: 0.8rem;
    height: 0.8rem;
    top: 0.9rem;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 2px;
    transform: rotate(45deg);
    z-index: -1;
  }

  /* --inicio: o cartão à esquerda da linha e o número à direita dela */
  .lt-item--inicio .lt-tempo { order: 1; padding-left: 2.5rem; }
  .lt-item--inicio .lt-conteudo { margin-left: 0; margin-right: 1.5rem; }
  .lt-item--inicio .lt-conteudo::before { right: -0.375rem; }

  /* --fim: o número à esquerda (encostado na linha) e o cartão à direita */
  .lt-item--fim .lt-tempo {
    align-items: flex-end;
    text-align: right;
    padding-left: 0;
    padding-right: 2.5rem;
  }
  .lt-item--fim .lt-conteudo { margin-left: 1.5rem; }
  .lt-item--fim .lt-conteudo::before { left: -0.375rem; border-width: 0 0 1px 1px; }
}

@media (prefers-reduced-motion: reduce) {
  .lt-icone { transition: none; }
  .lt-item:hover .lt-icone { background-color: var(--bg); box-shadow: none; }
}

/* =========================================================
   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; }
}

/* O mesmo limite do menu recolhido em style.css */
@media (max-width: 1179.98px) {
  .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; }
  .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__mundo { transform: none !important; }
  .hero__plano--grade { transform: rotateX(68deg) !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). O site usa um
   verde só (o da logo), então no hover o botão não troca de tom:
   ganha a sombra verde abaixo.
   .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: var(--verde);
  border-color: var(--verde);
  color: #0c2036;
}
.btn--verde-logo::after { background-color: var(--verde); }
.btn--verde-logo:hover { box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.6); }
.btn--cor-bpo,
.btn--cor-bpo:hover {
  background-color: var(--mira);
  border-color: var(--mira);
  color: var(--bg);
}
.btn--cor-bpo::after { background-color: var(--verde); }
.btn--cor-bpo:hover { color: #0c2036; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.6); }