/* ==========================================================================
   Base, tipografia e ritmo

   Regra de agrupamento: o espaço DENTRO de um grupo é sempre menor que o
   espaço EM VOLTA dele. Onde o espaço já agrupa, não entra borda.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  background: var(--fundo);
  color: var(--txt);
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg,
video { display: block; max-width: 100%; }

img { height: auto; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}

::selection {
  /* Preenchimento, nao texto: aqui vale o lime cheio da marca nos dois temas,
     com o texto preto por cima. */
  background: var(--acento-fundo);
  color: var(--n-950);
}

/* ==========================================================================
   Tipografia
   Hierarquia por escala, peso e espaço. Poppins em 300 e 800 como extremos.
   ========================================================================== */

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* Display do hero. Duas linhas, sempre. A medida em ch controla a quebra,
   nunca <br>. */
.display {
  font-size: var(--t-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  /* Com o hero em 100% da largura, a medida pode crescer: o que segura a
     quebra em duas linhas passa a ser o destaque em bloco, e nao um teto
     estreito que empurrava titulo longo para tres linhas. */
  max-inline-size: 42ch;
  text-wrap: balance;
}

/* Título em duas linhas, uma cor em cima e outra embaixo.
   O trecho em destaque vira BLOCO: a quebra deixa de depender da medida e
   passa a ser estrutural, então nunca sai uma linha com metade de cada cor.
   Pedido do cliente. */
.display .destaque,
.h2 .destaque { display: block; }

.h2 {
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.18;
  max-inline-size: 46ch;
  text-wrap: balance;
}

/* Para seção de apoio, onde o H2 no topo da escala roubaria a cena. */
.h2--menor {
  font-size: var(--t-h2-menor);
  max-inline-size: 52ch;
}

.h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  max-inline-size: 32ch;
  text-wrap: balance;
}

/* A escala caiu, então o subtítulo sai do peso 300: abaixo de 18px o 300
   desaparece. Vai para 400, que é o mínimo legível nesse tamanho. */
.sub {
  font-size: var(--t-sub);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.55;
  color: var(--txt-2);
  max-inline-size: 62ch;
  text-wrap: pretty;
}

.eyebrow {
  display: block;
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--txt-2);
}

/* Só nas seções que carregam a tese. Mantém o lime abaixo de 3% da tela. */
.eyebrow--acento { color: var(--acento); }

.corpo {
  max-inline-size: 68ch;
  text-wrap: pretty;
  color: var(--txt-2);
}

.corpo + .corpo { margin-top: var(--e-2); }

.atenuado { color: var(--txt-2); }

/* Número de impacto. Poppins 500, tabular, nunca mono. */
.impacto {
  font-size: var(--t-impacto);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 0.92;
  font-variant-numeric: tabular-nums;
}

.impacto--menor {
  font-size: var(--t-impacto-menor);
  line-height: 1;
}

strong, b { font-weight: 600; }

/* --- registro técnico: JetBrains Mono, peso 400, três tamanhos ---------- */

.mono {
  font-family: var(--fonte-mono);
  font-weight: 400;
  font-size: var(--t-mono);
  line-height: 1.2;
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
}

.mono--p { font-size: var(--t-mono-p); }
.mono--g { font-size: var(--t-mono-g); }

/* Carimbo de norma: Portaria 671, AFD, SLA. O que prova conformidade. */
.norma {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fonte-mono);
  font-weight: 400;
  font-size: var(--t-mono-p);
  line-height: 1;
  letter-spacing: normal;
  padding: 7px 10px;
  border: 1px solid var(--borda-media);
  color: var(--txt-2);
  white-space: nowrap;
}

/* ==========================================================================
   Layout e ritmo
   ========================================================================== */

/* 70% da largura da tela, com piso e teto. Regra do CLAUDE.md, item 4. */
.container {
  width: var(--container-largura);
  min-width: var(--container-min);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Abaixo de 1100px os 70% deixariam a coluna estreita demais para ler. */
@media (max-width: 1099px) {
  .container { width: 100%; }
}

.secao {
  padding-block: var(--secao-y);
  position: relative;
}

/* Hero de texto: mesma respiração da dobra com mockup, para a primeira
   tela ter o mesmo peso em toda página. */
.secao--tese {
  background: var(--grad-profundidade);
  padding-block: var(--dobra-y);
}
/* Mesmo azul do hero e do CTA: o degradê de profundidade é O azul da marca.
   O site alterna papel e este bloco, e como dois blocos azuis nunca ficam
   colados, usar a mesma receita nos três não achata nada. Pedido do cliente. */
.secao--atmosfera { background: var(--grad-profundidade); }
.secao--linha { border-top: 1px solid var(--borda); }

/* Cabeçalho de seção: eyebrow e título colados, bloco afastado do conteúdo. */
.cabecalho-secao {
  display: grid;
  gap: var(--e-2);
  margin-bottom: var(--e-6);
  max-inline-size: 72ch;
}

@media (min-width: 768px) {
  .cabecalho-secao { margin-bottom: var(--e-8); }
}

/* Duas colunas a partir de 900px.
   Antes o cabeçalho inteiro ficava travado em 72ch e ocupava pouco mais da
   metade do container, deixando a direita vazia em TODA seção do site. O
   título ficando à esquerda e o texto de apoio à direita, alinhados pela
   base, usa a largura e cria uma entrada de leitura em vez de uma coluna
   solta. Seção sem texto de apoio não muda de aparência. */
@media (min-width: 900px) {
  /* Só divide em duas colunas quando EXISTE texto de apoio para ocupar a
     segunda. Sem o :has, cabeçalho de título solto era espremido numa
     coluna de 500px contra uma coluna vazia, e título que cabia em duas
     linhas passava para quatro. Navegador sem :has cai no layout de uma
     coluna, que é o comportamento anterior e continua correto. */
  .cabecalho-secao:has(> .sub) {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    column-gap: var(--e-8);
    max-inline-size: none;
    align-items: end;
  }

  .cabecalho-secao:has(> .sub) > .eyebrow { grid-column: 1; grid-row: 1; }
  .cabecalho-secao:has(> .sub) > .h2 { grid-column: 1; grid-row: 2; }
  .cabecalho-secao:has(> .sub) > .sub {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    max-inline-size: 42ch;
  }
}

.cabecalho-secao .eyebrow { margin-bottom: 4px; }

.pilha-1 { display: grid; gap: var(--e-1); }
.pilha-2 { display: grid; gap: var(--e-2); }
.pilha-3 { display: grid; gap: var(--e-3); }
.pilha-4 { display: grid; gap: var(--e-4); }
.pilha-6 { display: grid; gap: var(--e-6); }

/* Grade responsiva 1 → 2 → 3, gap 24 no mobile e 32 a partir de md. */
.grade-2,
.grade-3 {
  display: grid;
  gap: var(--grade-gap);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Guarda de grade: sem min-width 0 o conteúdo intrínseco de um filho
   (um mockup, uma tabela, uma URL longa) empurra a trilha 1fr e estoura
   o container. É a causa mais comum de scroll horizontal em grid. */
.hero__grade > *,
.split > *,
.receita > *,
.contato > *,
.manifesto__grade > *,
.grade-2 > *,
.grade-3 > *,
.pilares > *,
.quem > *,
.etapas > * { min-width: 0; }

.linha-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  align-items: center;
}

.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pular {
  position: absolute;
  left: var(--e-2);
  top: -100px;
  z-index: 200;
  background: var(--acento-fundo);
  color: var(--n-950);
  font-weight: 600;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--raio-acao);
  transition: top var(--dur-ui) var(--ease);
}

.pular:focus { top: var(--e-2); }

/* --- lockup de produto, regra do pipe ---------------------------------- */

.lockup {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

.lockup__pipe {
  font-weight: 300;
  opacity: 0.45;
  margin-inline: 0.32em;
  transform: scaleY(0.85);
  display: inline-block;
}

@media (max-width: 599px) {
  .lockup--empilha {
    flex-direction: column;
    align-items: flex-start;
    white-space: normal;
  }
  .lockup--empilha .lockup__pipe { display: none; }
}

/* --- o ponto verde ------------------------------------------------------
   Nunca é bullet, nunca é enfeite. Só aparece onde significa o parceiro:
   no símbolo, no selo de estado ativo e no marcador de fonte recorrente. */

.ponto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--acento-fundo);
  /* No papel o lime da 1.38:1 e um ponto de 9px sumiria. O fio escuro so
     existe no tema claro; no bloco invertido --ponto-anel e none. */
  box-shadow: var(--ponto-anel);
  flex: none;
}

/* Marcador neutro de lista. É isto que substitui o ponto verde. */
.lista-marcada {
  display: grid;
  gap: var(--e-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.lista-marcada li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  color: var(--txt-2);
  line-height: 1.6;
}

.lista-marcada li::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--borda-forte);
  margin-top: 0.75em;
}

/* ==========================================================================
   Movimento
   Conteúdo estático no primeiro frame. Sem reveal por scroll, sem contador.
   Movimento só em hover, foco, e nas duas peças onde ele é informação.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

}