/* ==========================================================================
   HERO — Home, primeira dobra
   Consome exclusivamente tokens de css/design-system.css. O único valor
   "novo" neste arquivo é o max-width local do H1 e do texto de apoio —
   autorizado explicitamente, não é token do design system (ver nota
   abaixo de .hero__heading).
   ========================================================================== */

.hero {
  background-color: var(--color-bg);
  padding-block: var(--space-section); /* mesmo token fluido usado para respiro de seção (64px–160px) */
}

.hero__inner {
  /* .container já centraliza e limita a 1200px — aqui o conteúdo fica
     alinhado à esquerda dentro dele (não centralizado), para reforçar a
     leitura editorial em vez de "landing page". */
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   EYEBROW
   <p>, não heading — é um rótulo editorial acima do H1, não deve entrar
   na hierarquia de headings da página (o H1 continua sendo o único
   heading da primeira dobra). Usa --tracking-label, que já existia no
   design system sem uso até agora — foi criado pensando exatamente
   nisso. Cor em petróleo, não terracota: terracota fica reservada só
   para os CTAs, mantendo-a como acento único da página.
   -------------------------------------------------------------------------- */
.hero__eyebrow {
  margin: 0 0 var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-secundario);
  font-weight: var(--weight-body-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-accent-secondary);
}

/* --------------------------------------------------------------------------
   H1
   Família, peso, entrelinha, tracking e cor já vêm herdados da regra
   global "h1, h2, h3" do design-system.css — nada disso é redeclarado
   aqui. Este bloco só acrescenta o que é específico deste componente:
   espaçamento e a largura de controle de quebra de linha.

   max-width em `ch` (não em px): o H1 aprovado tem ~90 caracteres e vai
   quebrar em várias linhas em qualquer largura de tela — sem um limite,
   o navegador quebra onde calhar, produzindo linhas de tamanhos muito
   desiguais. `ch` foi escolhido em vez de um valor fixo em px porque
   acompanha o clamp() do H1 (--text-h1, 48–60px): a largura em
   caracteres-por-linha fica proporcional em qualquer ponto da escala
   fluida, então a composição não desequilibra ao redimensionar. 22ch é
   uma estimativa de partida para produzir 3 linhas equilibradas — não
   testei em navegador real neste ambiente; vale conferir visualmente e
   ajustar este único valor se necessário (não é token do design system,
   é uma medida local deste componente, exatamente como autorizado).
   -------------------------------------------------------------------------- */
.hero__heading {
  max-width: 22ch;
  margin: 0 0 var(--space-lg);
}

/* --------------------------------------------------------------------------
   TEXTO COMPLEMENTAR
   --text-body (18px) — mesma escala do corpo de texto do site, não um
   tamanho novo. Cor em --color-text-secundario (grafite aclarado, já
   definido no design system para hierarquia de texto de apoio) em vez
   de --color-text, para diferenciar visualmente do H1 sem depender de
   tamanho. max-width também em `ch`, por consistência com o H1 e para
   não deixar duas frases curtas esticadas pela largura toda do container.
   -------------------------------------------------------------------------- */
.hero__lead {
  max-width: 46ch;
  margin: 0 0 var(--space-xl);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text-secundario);
}

/* --------------------------------------------------------------------------
   CTAs
   Empilhados por padrão (mobile-first); lado a lado a partir de 768px —
   reaproveita o breakpoint que a grid do design system já usa (seção 5),
   não é um valor novo. .btn, .btn-primary e .btn-secondary já existem
   prontos; nenhum estilo de botão novo foi criado aqui.
   -------------------------------------------------------------------------- */
.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.hero__actions .btn {
  width: 100%;
}

@media (min-width: 768px) {
  .hero__actions {
    flex-direction: row;
    gap: var(--space-md);
  }

  .hero__actions .btn {
    width: auto;
  }
}