/* =============================================================================
   PAINEL MACRO — DIREÇÃO DE ARTE
   Camada de composição, profundidade e movimento. Depende dos tokens de ds.css
   e nunca inventa cor: só compõe com o que já existe.

   O conceito é "o dado como matéria-prima visual". A personalidade não vem de
   ornamento — vem do próprio conteúdo: numeral tabular grande, linha fina de
   série temporal, grade de papel milimetrado, e a escala editorial de uma
   publicação financeira (número enorme ao lado de rótulo miúdo e preciso).
   ============================================================================= */

/* ------------------------------------------------------- MOTION (tokens) --- */
:root {
  /* Três velocidades, uma curva. Consistência de motion é o que separa
     "tem animação" de "foi coreografado". */
  --m-micro: 160ms;    /* hover, foco, troca de estado */
  --m-normal: 320ms;   /* entrada de elemento, revelação */
  --m-hero: 720ms;     /* abertura da primeira dobra */

  /* Saída rápida, chegada lenta: o olho lê como "peso" e dá sensação física. */
  --m-curva: cubic-bezier(0.16, 1, 0.3, 1);
  --m-curva-suave: cubic-bezier(0.4, 0, 0.2, 1);

  --m-desloca: 18px;   /* distância padrão de entrada */
}

/* ---------------------------------------------------------- PROFUNDIDADE --- */
/* Duas camadas fixas atrás de tudo: uma grade de papel milimetrado e um foco
   de luz. Fixas (não rolam) para funcionarem como "ambiente" e não como
   conteúdo — o fundo nunca pode competir com o dado.
   Opacidades propositalmente no limite do perceptível: o efeito é sentido,
   não visto. Se der para apontar, está forte demais. */
.ambiente {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.ambiente::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgb(var(--c-bor) / 0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--c-bor) / 0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  /* A grade some nas bordas: sem isso ela vira "papel quadriculado", com
     isso vira profundidade. */
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 75%);
}

/* Luz localizada atrás do hero — dá um centro óptico à primeira dobra. */
.ambiente::after {
  content: "";
  position: absolute;
  top: -30vh; left: 50%;
  width: min(1100px, 120vw); height: 80vh;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 50%,
              rgb(var(--c-ace) / 0.10) 0%,
              rgb(var(--c-ace) / 0.04) 35%,
              transparent 68%);
  filter: blur(20px);
}
:root[data-tema="claro"] .ambiente::after {
  background: radial-gradient(circle at 50% 50%, rgb(var(--c-ace) / 0.07) 0%, transparent 65%);
}

/* Conteúdo acima do ambiente. */
.acima { position: relative; z-index: 1; }

/* ------------------------------------------------------------- EDITORIAL --- */
/* Escala tipográfica de display. clamp() para o título respirar do celular ao
   monitor grande sem breakpoint — a tipografia é fluida, não escalonada. */
.display {
  font-size: clamp(2.1rem, 5.2vw, 4.1rem);
  font-weight: var(--peso-max);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--txt-1);
  text-wrap: balance;
}
.display-menor {
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  font-weight: var(--peso-forte);
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--txt-1);
  text-wrap: balance;
}

/* "Kicker": rótulo miúdo acima do título. Recurso editorial clássico — situa
   o leitor antes da manchete e dá um degrau a mais de hierarquia. */
.kicker {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-2xs); font-weight: var(--peso-medio);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ace-txt);
}
.kicker::before {
  content: ""; width: 20px; height: 1px; background: var(--ace-borda);
}

.chamada {
  font-size: clamp(0.95rem, 1.35vw, 1.1rem);
  line-height: var(--entrelinha-solta);
  color: var(--txt-2);
  max-width: 46ch;
  text-wrap: pretty;
}

/* Número em escala editorial: é o protagonista visual do produto. */
.numero-display {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  font-weight: var(--peso-max);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--txt-1);
}

/* --------------------------------------------------------------- MOTION --- */
/* O estado inicial escondido só existe quando o JS está vivo (ele marca
   <html class="motion">). Sem essa trava, uma falha de JS deixaria a página
   inteira invisível — o pior modo de falha possível para uma landing. */
.motion .revelar {
  opacity: 0;
  transform: translateY(var(--m-desloca));
  transition: opacity var(--m-normal) var(--m-curva),
              transform var(--m-normal) var(--m-curva);
  will-change: opacity, transform;
}
.motion .revelar.visivel { opacity: 1; transform: none; }
/* Terminada a entrada, libera a dica de composição para não segurar memória
   de GPU em dezenas de elementos. */
.motion .revelar.pronto { will-change: auto; }

/* Escalonamento em cascata: filhos entram em sequência, não em bloco. É o que
   faz a seção parecer coreografada em vez de "tudo apareceu". */
.motion .cascata > * { transition-delay: calc(var(--i, 0) * 55ms); }

/* Entrada do hero — mais lenta e mais longa que o resto da página. */
.motion .entrada-hero {
  opacity: 0;
  transform: translateY(22px);
  animation: arte-entrar var(--m-hero) var(--m-curva) forwards;
  animation-delay: var(--atraso, 0ms);
}
@keyframes arte-entrar { to { opacity: 1; transform: none; } }

/* Linha de gráfico desenhada da esquerda para a direita. */
.motion .traco-anima {
  stroke-dasharray: var(--comprimento, 1000);
  stroke-dashoffset: var(--comprimento, 1000);
  animation: arte-tracar 1.5s var(--m-curva-suave) forwards;
  animation-delay: var(--atraso, 0ms);
}
@keyframes arte-tracar { to { stroke-dashoffset: 0; } }

/* Botão magnético: o deslocamento vem de variáveis que o JS atualiza. Fica no
   CSS para a transição de volta ao repouso ser suave sem timer no JS. */
.magnetico {
  transition: transform var(--m-micro) var(--m-curva-suave);
  transform: translate(var(--mx, 0px), var(--my, 0px));
}

/* Progresso de leitura da página — fino, no topo, sem moldura. */
.progresso-leitura {
  position: fixed; top: 0; left: 0; height: 2px;
  width: var(--progresso, 0%);
  background: linear-gradient(90deg, var(--ace), var(--marca-azul-claro));
  z-index: var(--z-toast);
  transition: width 90ms linear;
  pointer-events: none;
}

/* ------------------------------------------------------------ HERO --- */
.hero {
  position: relative;
  padding: clamp(3.5rem, 8vh, 6.5rem) 0 clamp(3rem, 7vh, 5.5rem);
}

/* Faixa de dados do hero: o dado real É a arte. Divisórias em vez de cartões
   soltos — vira um instrumento único, não seis caixinhas. */
.faixa-dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border: 1px solid var(--bor-1);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--sup-1) 70%, transparent);
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.faixa-dados > * + * { border-left: 1px solid var(--bor-1); }
@media (max-width: 719px) {
  .faixa-dados { grid-template-columns: repeat(2, 1fr); }
  .faixa-dados > * { border-left: 0 !important; border-top: 1px solid var(--bor-1); }
  .faixa-dados > :nth-child(-n+2) { border-top: 0; }
  .faixa-dados > :nth-child(odd) { border-right: 1px solid var(--bor-1); }
}

/* Todas as células têm a MESMA estrutura vertical, independente de terem
   sparkline ou não: nome no topo, valor, área de gráfico com altura fixa e
   rodapé colado embaixo. Sem isso, a célula com texto longo esticava a faixa
   e a borda inferior ficava serrilhada. */
.dado-hero {
  display: flex; flex-direction: column;
  padding: var(--e-4); min-width: 0; position: relative;
}
.dado-hero-rodape { margin-top: auto; }
.dado-hero-nome {
  font-size: var(--t-3xs); font-weight: var(--peso-medio); color: var(--txt-3);
  text-transform: uppercase; letter-spacing: 0.08em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dado-hero-valor {
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  font-weight: var(--peso-forte); color: var(--txt-1);
  letter-spacing: -0.025em; line-height: 1.15;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  margin-top: var(--e-2);
}
.dado-hero-valor .un {
  font-size: var(--t-3xs); font-weight: var(--peso-normal); color: var(--txt-3);
  margin-left: 0.3em; letter-spacing: 0;
}
.dado-hero-spark { height: 26px; margin-top: var(--e-3); flex-shrink: 0; }
.dado-hero-rodape {
  font-size: var(--t-3xs); color: var(--txt-4);
  padding-top: var(--e-3); line-height: 1.45;
}
/* Nome de fonte é longo ("Instituto Brasileiro de Geografia e Estatística").
   Duas linhas no máximo: a informação é "de onde vem", não a lista completa —
   essa vive na seção de rastreabilidade. */
.dado-hero-lista {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------------------------- SEÇÕES E RITMO --- */
/* As seções deixam de ser todas iguais: a divisória vira um fio que some nas
   pontas, e o espaçamento varia por densidade em vez de ser um py-16 uniforme. */
.secao { position: relative; padding: clamp(4rem, 9vh, 7rem) 0; }
.secao-densa { padding: clamp(3rem, 6vh, 4.5rem) 0; }
.secao-ampla { padding: clamp(5.5rem, 13vh, 9rem) 0; }

.fio {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--bor-2) 18%, var(--bor-2) 82%, transparent);
}

/* Cabeçalho de seção: kicker + título + apoio, alinhado à esquerda por padrão.
   Título centralizado em toda seção é o visual mais genérico que existe. */
.secao-cabecalho { max-width: 46rem; margin-bottom: clamp(2rem, 4vh, 3rem); }
.secao-cabecalho .display-menor { margin-top: var(--e-3); }
.secao-cabecalho .chamada { margin-top: var(--e-3); }

/* Momento editorial: número gigante ocupando a largura, para quebrar o ritmo
   de grades sucessivas e dar respiro à página. */
.momento-editorial {
  display: grid; gap: var(--e-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
@media (min-width: 900px) {
  .momento-editorial { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--e-12); }
}

/* --------------------------------------------------------- CARTÃO VIVO --- */
/* Elevação por luz, não por sombra: um brilho de borda que segue o cursor.
   Sombra grande sobre fundo escuro só suja; luz comunica interatividade sem
   deslocar o elemento. */
.cartao-vivo {
  position: relative;
  background: var(--sup-1);
  border: 1px solid var(--bor-1);
  border-radius: var(--r-lg);
  transition: border-color var(--m-micro) var(--m-curva-suave),
              transform var(--m-normal) var(--m-curva),
              background var(--m-micro) var(--m-curva-suave);
}
.cartao-vivo::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(320px circle at var(--px, 50%) var(--py, 0%),
              rgb(var(--c-ace) / 0.55), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--m-normal) var(--m-curva-suave);
  pointer-events: none;
}
.cartao-vivo:hover { transform: translateY(-2px); background: var(--sup-2); }
.cartao-vivo:hover::before { opacity: 1; }

/* ---------------------------------------------------------- LINK ANIMADO --- */
/* Sublinhado que cresce da esquerda — microinteração barata e muito legível. */
.link-sublinha {
  position: relative; text-decoration: none; color: var(--txt-2);
  transition: color var(--m-micro) var(--m-curva-suave);
}
.link-sublinha::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--m-normal) var(--m-curva);
}
.link-sublinha:hover { color: var(--txt-1); }
.link-sublinha:hover::after { transform: scaleX(1); }

/* -------------------------------------------------------------- PRICING --- */
/* O plano recomendado não é "mais um cartão com selo": ele é maior, tem fundo
   próprio e um anel de acento. A hierarquia precisa ser lida em 1 segundo. */
.plano-destaque {
  background: linear-gradient(180deg, rgb(var(--c-ace) / 0.07), transparent 55%), var(--sup-1);
  border-color: var(--ace-borda);
  box-shadow: 0 0 0 1px rgb(var(--c-ace) / 0.18), var(--sombra-2);
}
@media (min-width: 1024px) {
  .plano-destaque { transform: scale(1.035); z-index: 1; }
  .plano-destaque:hover { transform: scale(1.035) translateY(-2px); }
}

/* --------------------------------------------------- MOVIMENTO REDUZIDO --- */
/* Quem pede menos movimento recebe a página inteira, estática e completa —
   nunca uma página vazia esperando animação que não vem. */
@media (prefers-reduced-motion: reduce) {
  .motion .revelar { opacity: 1 !important; transform: none !important; transition: none !important; }
  .motion .entrada-hero { opacity: 1 !important; transform: none !important; animation: none !important; }
  .motion .traco-anima { stroke-dashoffset: 0 !important; animation: none !important; }
  .magnetico { transform: none !important; }
  .ambiente::after { filter: none; }
  .progresso-leitura { transition: none; }
}

/* ------------------------------------------------------ CABEÇALHO LANDING --- */
/* Transparente sobre o hero (a composição respira) e só ganha fundo quando a
   página sai do topo — a borda fixa desde o começo cortava o hero ao meio. */
.cabecalho-landing {
  position: sticky; top: 0; z-index: var(--z-cabecalho);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--m-normal) var(--m-curva-suave),
              border-color var(--m-normal) var(--m-curva-suave),
              backdrop-filter var(--m-normal) var(--m-curva-suave);
}
.cabecalho-landing.com-fundo {
  background: color-mix(in srgb, var(--sup-0) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--bor-1);
}

/* =============================================================================
   SEÇÃO INTELIGÊNCIA — "anatomia de uma resposta"

   A seção anterior era um mockup de chat: um balão de pergunta e outro com duas
   tabelas. Isso comunica "consulta ao banco", não inteligência — e é o visual
   que qualquer produto com IA colada por cima tem.

   O que diferencia ESTA IA é que ela só usa série do catálogo e cita a fonte de
   cada número. Então em vez de imitar um chat, a composição abre a resposta em
   três passos — consultou, respondeu, citou — e usa dado real em cada um.
   Rastreabilidade vira argumento visual.
   ============================================================================= */
.anatomia {
  position: relative;
  background: var(--sup-1);
  border: 1px solid var(--bor-1);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.anatomia-pergunta {
  display: flex; align-items: flex-start; gap: var(--e-3);
  padding: var(--e-5);
  border-bottom: 1px solid var(--bor-1);
  background: linear-gradient(180deg, rgb(var(--c-ace) / 0.06), transparent);
  font-size: var(--t-sm); color: var(--txt-1); font-weight: var(--peso-medio);
  line-height: var(--entrelinha-padrao);
}

/* Os passos são numerados e ligados por um fio vertical: o olho lê a sequência
   sem precisar de texto explicando que existe uma sequência. */
.anatomia-passos { padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-5); }
.anatomia-passo { display: flex; gap: var(--e-4); position: relative; }
.anatomia-passo:not(:last-child)::before {
  content: ""; position: absolute;
  left: 11px; top: 26px; bottom: calc(var(--e-5) * -1);
  width: 1px; background: var(--bor-1);
}
.anatomia-num {
  flex-shrink: 0; width: 23px; height: 23px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--sup-3); border: 1px solid var(--bor-2);
  font-size: 10px; font-weight: var(--peso-forte); color: var(--txt-2);
  font-variant-numeric: tabular-nums; position: relative; z-index: 1;
}
.anatomia-corpo { flex: 1; min-width: 0; }

/* Linha de série consultada: nome, forma do dado, valor. Os três em uma linha
   só, para o bloco ler como instrumento e não como lista. */
.anatomia-serie {
  display: grid; grid-template-columns: minmax(0, 1fr) 72px auto;
  align-items: center; gap: var(--e-3);
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--bor-1);
}
.anatomia-serie:last-child { border-bottom: 0; }
.anatomia-serie-nome { font-size: var(--t-xs); color: var(--txt-1); font-weight: var(--peso-medio); }
.anatomia-serie-fonte { font-size: var(--t-3xs); color: var(--txt-4); display: block; margin-top: 1px; }
.anatomia-serie-spark { height: 22px; }
.anatomia-serie-valor {
  font-size: var(--t-sm); font-weight: var(--peso-forte); color: var(--txt-1);
  font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right;
}

.anatomia-conclusao {
  font-size: var(--t-xs); color: var(--txt-2); line-height: var(--entrelinha-solta);
  padding: var(--e-3) var(--e-4);
  background: var(--sup-0); border: 1px solid var(--bor-1); border-radius: var(--r-md);
}
.anatomia-conclusao strong { color: var(--txt-1); font-variant-numeric: tabular-nums; }

.anatomia-rodape {
  padding: var(--e-3) var(--e-5);
  border-top: 1px solid var(--bor-1);
  font-size: var(--t-3xs); color: var(--txt-4);
  display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap;
}

/* Perguntas de exemplo: viram alvos com estado, não pílulas decorativas —
   sinalizam que a IA aceita linguagem natural de verdade. */
.pergunta-exemplo {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  background: var(--sup-1); border: 1px solid var(--bor-1); border-radius: var(--r-full);
  font-size: var(--t-2xs); color: var(--txt-3);
  transition: border-color var(--m-micro) var(--m-curva-suave), color var(--m-micro) var(--m-curva-suave);
}
.pergunta-exemplo::before {
  content: ""; width: 5px; height: 5px; border-radius: var(--r-full);
  background: var(--ace); flex-shrink: 0; opacity: 0.55;
}
.pergunta-exemplo:hover { border-color: var(--ace-borda); color: var(--txt-1); }

@media (max-width: 559px) {
  .anatomia-serie { grid-template-columns: minmax(0, 1fr) auto; }
  .anatomia-serie-spark { display: none; }
}

/* =============================================================================
   INDICADOR DE CURSOR
   Um selo pequeno que acompanha o ponteiro em zonas específicas.

   Três decisões que definem o escopo:

   1. NÃO substitui o cursor do sistema. Esconder o ponteiro nativo é o risco
      real de acessibilidade — quebra quem usa lupa, quem tem cursor grande por
      configuração do SO, e quem depende do formato para saber o que é
      clicável. Aqui o nativo continua visível e ainda comunica (grab/pointer);
      o selo só acrescenta a informação que o formato não consegue dar.

   2. Só em zonas marcadas com data-cursor. "Cursor customizado em tudo" é
      exatamente o efeito que envelhece mal e atrapalha o trabalho.

   3. Só em ponteiro fino. No toque não existe hover, e o selo apareceria
      preso no último ponto tocado.
   ============================================================================= */
.cursor-dica {
  position: fixed; top: 0; left: 0;
  z-index: var(--z-popover);
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: 5px var(--e-3);
  background: var(--sup-4); color: var(--txt-1);
  border: 1px solid var(--bor-2); border-radius: var(--r-full);
  box-shadow: var(--sombra-2);
  font-size: var(--t-3xs); font-weight: var(--peso-medio);
  white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate3d(-100px, -100px, 0) scale(0.9);
  transition: opacity var(--m-micro) var(--m-curva-suave), scale var(--m-micro) var(--m-curva-suave);
}
.cursor-dica.visivel { opacity: 1; }
.cursor-dica .ico { width: 12px; height: 12px; color: var(--ace-txt); }

/* Cursor nativo semântico nas zonas — é ele que diz "dá para arrastar". */
[data-cursor="grafico"] { cursor: grab; }
[data-cursor="grafico"]:active { cursor: grabbing; }

/* A instrução em texto continua existindo para quem não tem ponteiro fino
   (toque, teclado). Onde o selo aparece, ela é redundante e sai — era chrome
   permanente embaixo de todo gráfico. */
@media (hover: hover) and (pointer: fine) {
  .dica-toque { display: none; }
}
@media not all and (hover: hover) {
  .cursor-dica { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor-dica { transition: none; }
}