/* =========================================================
   BPO NEXO — CAMADA CANVAS
   Integração do design system "Canvas" (design-system/
   canvas-visual.aura.build) ao site, carregada depois de style.css,
   processos.css e noema.css.

   O site já vem da mesma linhagem do Canvas — entrada fadeSlideIn
   (30px + blur 8px) com .animate-on-scroll, escala de títulos (H2
   4.5rem), rótulos em caixa-alta, grade de 12 colunas, cantos retos e
   bordas brancas de 5–10% — então isso fica como está. Esta camada
   só acrescenta o que faltava, nas cores da marca:

   - tipografia Inter (tokens em noema.css) com o tracking e a
     entrelinha do Canvas, e rótulos técnicos em mono;
   - fundo em grade com máscara radial (.grid-bg) nas seções;
   - "beam": luz correndo pelo fio superior de cada seção;
   - botões com cantos que se encaixam no hover (Primary Action);
   - feixe girando na borda do CTA do cabeçalho (Gradient Beam Button);
   - cards de benefícios como "Callout/System Card": trama de pontos,
     título que acende no hover e brilho de fundo;
   - manchete do Hero na escala Display H1 (até 7.5rem);
   - cards de serviços/equipe como "System Card", com beam no hover;
   - rodapé do Canvas: frase de impacto, bordão e marca d'água gigante;
   - manifesto (#contato) com expressões-chave acesas sobre texto apagado;
   - largura total, como as seções do Canvas (w-full, px-6 lg:px-12):
     sem coluna máxima, margem lateral de 24px e 48px a partir de 1024px.

   O acento laranja do Canvas (#F97316) é o verde da logo (#50aa46);
   o fundo continua o navy da marca. Ícones seguem na Lucide (o Canvas
   usa Solar via Iconify — não é preciso uma segunda biblioteca), e
   nada aqui depende do Tailwind do Canvas.
   ========================================================= */
:root {
  --canvas-acento: #50aa46;
  --canvas-acento-claro: #7bbf3d;
  --canvas-grade: rgba(255, 255, 255, 0.03);
  --canvas-ponto: rgba(255, 255, 255, 0.05);
}
:root[data-tema="light"] {
  --canvas-grade: rgba(12, 32, 54, 0.045);
  --canvas-ponto: rgba(12, 32, 54, 0.07);
}

/* Largura total (Canvas: seções w-full com px-6 lg:px-12). O .container,
   a barra de CTA e o --borda do NØEMA leem estes dois tokens, então o
   layout inteiro acompanha sem mexer em cada componente. */
:root { --max-w: 100%; --pad-x: 24px; }
@media (min-width: 1024px) {
  :root { --pad-x: 48px; }
}
@media (max-width: 400px) {
  :root { --pad-x: 18px; }   /* mantém o ajuste dos celulares estreitos */
}

/* =========================================================
   1 · TIPOGRAFIA (Canvas: Inter, display com entrelinha < 1 e
   tracking negativo; rótulos em mono, caixa-alta, tracking largo)
   ========================================================= */
.t-h1 { letter-spacing: -0.045em; line-height: 0.92; }
/* Títulos de seção na escala Display H2 do Canvas: 4.5rem com
   entrelinha 0.95, fluida até 2.25rem no celular */
.t-h2 {
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
}
.t-h3 { line-height: 1.02; letter-spacing: -0.03em; }
.t-h4 { letter-spacing: -0.02em; }

/* Label / UI do Canvas: 0.75rem, mono, tracking widest */
.t-label,
.grafico-card__titulo,
.plano__nivel,
.plano__rotulo,
.matriz__plano-tag,
.matriz__secao th,
.etapa__num,
.footer__col h4 {
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
}

/* =========================================================
   2 · FUNDO EM GRADE (Canvas .grid-bg): linhas de 60px com máscara
   radial, discretas, atrás do conteúdo de cada seção
   ========================================================= */
.section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--canvas-grade) 1px, transparent 1px),
    linear-gradient(to bottom, var(--canvas-grade) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 72%);
}

/* =========================================================
   3 · BEAM (Canvas .beam-border-h): depois que o fio superior da seção
   se desenha (.em-cena), uma luz verde corre por ele de tempos em
   tempos
   ========================================================= */
.secao__fio { overflow: hidden; }
.secao__fio::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent, var(--canvas-acento), transparent);
  opacity: 0;
  transform: translateX(-100%);
}
.section.em-cena .secao__fio::after {
  animation: canvasBeam 7s cubic-bezier(0.4, 0, 0.2, 1) 2.5s infinite;
}
@keyframes canvasBeam {
  0% { transform: translateX(-100%); opacity: 0; }
  10% { opacity: 0.85; }
  90% { opacity: 0.85; }
  100% { transform: translateX(100%); opacity: 0; }
}

/* =========================================================
   4 · BOTÕES (Canvas Primary Action): no hover, dois cantos em "L"
   se encaixam nas quinas — na cor do texto do botão, para ter
   contraste em qualquer preenchimento
   ========================================================= */
.btn::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(currentColor, currentColor) top left / 9px 1px no-repeat,
    linear-gradient(currentColor, currentColor) top left / 1px 9px no-repeat,
    linear-gradient(currentColor, currentColor) bottom right / 9px 1px no-repeat,
    linear-gradient(currentColor, currentColor) bottom right / 1px 9px no-repeat;
  opacity: 0;
  transition: inset 0.3s ease, opacity 0.3s ease;
}
.btn:hover::before,
.btn:focus-visible::before { inset: 2px; opacity: 0.85; }

/* =========================================================
   5 · CTA DO CABEÇALHO (Canvas Gradient Beam Button): um feixe gira
   em volta do "Área do cliente", numa moldura de 1px
   ========================================================= */
.nav-cta {
  position: relative;
  isolation: isolate;
  padding: 1px;
  overflow: hidden;
}
.nav-cta::before {
  content: "";
  position: absolute;
  inset: -150%;
  z-index: -1;
  background: conic-gradient(from 0deg, transparent 0deg, var(--canvas-acento-claro) 70deg, transparent 90deg, transparent 360deg);
  animation: canvasGiro 3.2s linear infinite;
}
@keyframes canvasGiro { to { transform: rotate(360deg); } }

/* =========================================================
   6 · CARDS DE BENEFÍCIOS (Canvas Callout / System Card): trama de
   pontos, brilho verde de fundo e título que acende no hover
   ========================================================= */
.beneficio {
  position: relative;
  isolation: isolate;
  background-image: radial-gradient(circle, var(--canvas-ponto) 1px, transparent 1.5px);
  background-size: 18px 18px;
}
.beneficio::before {
  content: "";
  position: absolute;
  top: -30%;
  left: 50%;
  width: 70%;
  z-index: -1;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(80, 170, 70, 0.22), transparent);
  filter: blur(18px);
  opacity: 0;
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.beneficio:hover::before { opacity: 1; }
.beneficio h4 { transition: color 0.3s ease; }
.beneficio:hover h4 { color: var(--accent); }

/* =========================================================
   7 · MANCHETE DO HERO (Canvas Display H1: até 7.5rem, entrelinha
   0.9). O teto em cqw mede pela coluna do texto: "Simplificamos", a
   palavra mais longa, tem 6,14em em Inter com este tracking, então
   16cqw a deixa sempre dentro da coluna (120px a partir de ~1440px).
   ========================================================= */
.hero__texto { container-type: inline-size; }
.hero__titulo {
  font-size: min(clamp(2.75rem, 8.4vw, 7.5rem), 16cqw);
  line-height: 0.9;
}

/* =========================================================
   9 · CARDS (Canvas System Card + beam): trama de pontos, brilho
   verde vindo de baixo e um beam correndo pela borda superior no hover
   ========================================================= */
.card {
  background-image: radial-gradient(circle, var(--canvas-ponto) 1px, transparent 1.5px);
  background-size: 18px 18px;
}
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--canvas-acento), transparent);
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
}
.card:hover::before { animation: canvasBeam 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.card:hover { box-shadow: inset 0 -90px 90px -80px rgba(80, 170, 70, 0.28); }
:root[data-tema="light"] .card:hover { box-shadow: var(--shadow-2xl), inset 0 -90px 90px -80px rgba(80, 170, 70, 0.2); }

/* =========================================================
   10 · RODAPÉ (Canvas footer)
   - beam correndo pela borda superior;
   - topo com a assinatura de marca e a frase na escala Section Heading
     (até 3rem);
   - redes sociais apagadas que acendem no hover;
   - marca d'água "BPO NEXO" em 18vw, quase transparente e sumindo em
     degradê, com o copyright (na fonte padrão do texto) por cima.
   ========================================================= */
.footer { position: relative; overflow: hidden; }
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--canvas-acento), transparent);
  opacity: 0;
  transform: translateX(-100%);
  animation: canvasBeam 7s cubic-bezier(0.4, 0, 0.2, 1) 1s infinite;
  pointer-events: none;
}

.footer__topo {
  padding-bottom: var(--gap-12);
  margin-bottom: var(--gap-12);
  border-bottom: 1px solid var(--border);
}
.footer__topo .footer__marca { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }

.footer__marca-tagline {
  max-width: none;
  margin-top: 24px;
  /* Section Heading do Canvas: 3rem, entrelinha justa */
  font-size: clamp(1.75rem, 3.2vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
}
.footer__marca-desc { margin-top: 28px; }

.footer__social { opacity: 0.55; filter: grayscale(1); transition: opacity 0.5s ease, filter 0.5s ease; }
.footer__social:hover,
.footer__social:focus-within { opacity: 1; filter: none; }

/* Navegação do rodapé em colunas de no máximo 4 links, preenchidas de
   cima para baixo (com 11 links: 4, 4 e 3) */
.footer__col--nav ul {
  display: grid;
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  column-gap: var(--gap-8);
  row-gap: 12px;
}
/* Espaço para as três colunas de links: a partir de 1200px a Navegação
   tem o dobro da largura das outras; abaixo disso ocupa a linha toda;
   no celular estreito, onde três colunas não cabem, ficam duas (6 e 5). */
@media (min-width: 1200px) {
  .footer__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1199.98px) {
  .footer__col--nav { grid-column: 1 / -1; }
}
@media (max-width: 479.98px) {
  .footer__col--nav ul { grid-template-rows: repeat(6, auto); }
}

/* Bordão no padrão "Build. Ship. Iterate." do Canvas: três palavras
   em escala de 6rem, entrelinha 0.9, a do meio apagada */
.footer__bordao {
  margin: var(--gap-12) 0 0;
  font-family: var(--font-heading);
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--text);
}
.footer__bordao span { color: var(--neutral-600); }
.footer__bordao em { font-style: normal; color: var(--canvas-acento); }

/* Marca d'água */
.footer__marca-dagua {
  position: relative;
  margin-top: var(--gap-8);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  text-align: center;
}
.footer__marca-dagua span {
  display: block;
  font-family: var(--font-heading);
  font-size: 18vw;
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.05em;
  white-space: nowrap;
  color: color-mix(in srgb, var(--text) 6%, transparent);
}
.footer__marca-dagua::after {
  content: "";
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(to bottom, transparent, var(--bg));
}

/* Rodapé final por cima da parte que some da marca d'água */
.footer__marca-dagua + .container { position: relative; z-index: 1; margin-top: -7vw; }
.footer__marca-dagua + .container .footer__bottom { border-top: 0; }

/* =========================================================
   11 · MANIFESTO (#contato — Canvas "We are a creative intelligence
   engine…"): o texto inteiro na escala Display H2 (até 4.5rem, entrelinha
   0.95), em cinza apagado, com as expressões-chave em peso médio na cor
   do texto. Elas acendem quando a seção entra em cena (.em-cena, do
   noema.js). Ao fundo, só um brilho neutro difuso.
   ========================================================= */
.manifesto__brilho {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.manifesto__brilho span {
  position: absolute;
  border-radius: 50%;
  top: 20%;
  left: 10%;
  width: 40vw;
  height: 40vw;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  filter: blur(120px);
  opacity: 0.4;
}

.manifesto__box { max-width: 72rem; }
.manifesto__texto {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.875rem, 4.5vw, 4.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: pretty;
  color: color-mix(in srgb, var(--text) 30%, var(--bg));
}
.manifesto__texto b {
  font-weight: 500;
  color: color-mix(in srgb, var(--text) 30%, var(--bg));
  transition: color 0.7s ease;
}
.manifesto.em-cena .manifesto__texto b { color: var(--text); }
.manifesto__texto b:nth-of-type(2) { transition-delay: 0.25s; }
.manifesto__texto b:nth-of-type(3) { transition-delay: 0.5s; }

@media (min-width: 1024px) {
  .manifesto__texto { line-height: 0.95; }
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

/* =========================================================
   MENOS MOVIMENTO
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .section.em-cena .secao__fio::after,
  .nav-cta::before,
  .card:hover::before,
  .footer::before { animation: none; }
}