/* ══════════════════════════════════════════════════════════════
   TYPE SCALE V2 — régua do design-system-squad (2026-08-17)
   Reactiva a hierarquia que já existia em design-tokens.css e que
   estava anulada por 120 declarações !important em effects.css.

   Display: Archivo 900 (SIL OFL) — casa com o wordmark sans do
   logotipo M&A. Corpo: Inter, mantida por decisão (numerais
   tabulares para os códigos de processo, e neutralidade para
   deixar a display dominar). Mono: JetBrains, promovida a marcar
   códigos de linha e de processo.

   Carregado DEPOIS de effects.css, por isso usa !important para
   ganhar. Quando a régua for aprovada, o caminho definitivo é
   apagar as sobreposições em effects.css e este ficheiro deixa
   de precisar de !important.
   ══════════════════════════════════════════════════════════════ */

:root {
  --font-display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;

  /* Escala — ratio medido a 1440px: 122px / 16px = 7,6x no hero de
     linha longa, 9,0x nos H2. Ver audit-2026-08-17.md */
  --t-hero:  clamp(38px, 6vw, 100px);
  --t-d1:    clamp(44px, 7vw, 112px);
  --t-d2:    clamp(36px, 4.6vw, 76px);
  --t-d3:    clamp(22px, 2.2vw, 34px);
  --t-lead:  clamp(18px, 1.4vw, 22px);

  --ls-hero: -0.045em;
  --ls-d1:   -0.040em;
  --ls-d2:   -0.035em;
  --ls-d3:   -0.020em;
}

/* ── Hero da homepage ─────────────────────────────────────────── */
body .hero--screen .hero__title,
.hero--screen .hero__title {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: var(--t-hero) !important;
  line-height: 0.86 !important;
  letter-spacing: var(--ls-hero) !important;
  text-transform: none !important;
  max-width: 1360px !important;
  text-wrap: balance;
}

.hero--screen .hero__lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  max-width: 620px;
}

/* ── H1 das páginas internas ──────────────────────────────────── */
body .page-hero h1,
body .page-hero__title,
.page-hero h1,
.page-hero__title {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: var(--t-d1) !important;
  line-height: 0.88 !important;
  letter-spacing: var(--ls-d1) !important;
  max-width: 1120px !important;
  text-wrap: balance;
}

.page-hero h1 em,
.page-hero__title em {
  font-style: normal !important;
  font-weight: 900 !important;
}

/* ── H2 de secção ─────────────────────────────────────────────────
   Especificidade tem de bater `section.section h2` do effects.css
   (0,1,2), por isso o prefixo html body. */
html body section h2,
html body main h2,
html body .spec-edit__h2,
html body .section-intro h2,
html body .page-copy h2,
html body .feature-split__title {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: var(--t-d2) !important;
  line-height: 0.92 !important;
  letter-spacing: var(--ls-d2) !important;
  text-wrap: balance;
}

html body section h2 em,
html body .spec-edit__h2 em {
  font-style: normal !important;
  font-weight: 900 !important;
}

/* ── H3 de card ───────────────────────────────────────────────── */
html body section h3,
html body main h3,
html body .spec-edit__body h3,
html body .role-card h3,
html body .sector-card h3 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: var(--t-d3) !important;
  font-style: normal !important;
  line-height: 1.02 !important;
  letter-spacing: var(--ls-d3) !important;
}

/* ── Mono com papel real: códigos de processo e de linha ──────── */
.spec-edit__sub,
.role-card ul li,
.section-label,
.page-kicker,
.spec-edit__tag,
.sector-card__tag {
  font-family: var(--font-mono) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ── Signature component: a chapa numerada ────────────────────── */
.spec-edit__num,
.process-step__num,
.role-card > span:first-of-type {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: clamp(38px, 3.4vw, 58px) !important;
  line-height: 0.8 !important;
  letter-spacing: -0.04em !important;
  font-style: normal !important;
  color: var(--color-white) !important;
  opacity: 0.92;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

.role-card > span:first-of-type {
  color: var(--accent-spark) !important;
  text-shadow: none;
  display: block;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-line);
  margin-bottom: 14px;
}

/* ── Cantos: 20px é assinatura de template ────────────────────── */
.spec-edit__card,
.role-card,
.sector-card,
.value-item,
.cred-item,
.region-card-v2,
.applications__panel,
.screen-card {
  border-radius: 4px !important;
}

/* ── Sem movimento em loop infinito sem input do utilizador ───── */
.hero--screen .hero__spark,
.page-hero::after {
  animation: none !important;
}

/* ══════════════════════════════════════════════════════════════
   RITMO DE FUNDOS — alternância clara/escura
   A home tinha 9 secções em creme e um único bloco navy. Sem
   alternância, nenhuma tipografia salva o ritmo: a página lê-se
   como um documento único e é isso que dá o ar de template.
   Escurecidas: "como trabalhamos" e "processo de execução".
   ══════════════════════════════════════════════════════════════ */

html body .how-we-work,
html body .process-rail {
  background: var(--color-night, #090C0F) !important;
  color: #fff;
  position: relative;
}

/* Filete industrial a marcar a entrada e a saída do bloco escuro */
html body .how-we-work::before,
html body .process-rail::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-spark) 18%, var(--accent-spark) 82%, transparent);
  opacity: 0.55;
}

html body .how-we-work h2,
html body .process-rail h2,
html body .how-we-work h3,
html body .process-rail h3,
html body .how-we-work .how-we-work__sub {
  color: #fff !important;
}

html body .how-we-work p,
html body .process-rail p {
  color: rgba(255, 255, 255, 0.76) !important;
}

html body .how-we-work .section-label,
html body .process-rail .section-label {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}

/* A chapa numerada sobre fundo escuro: o numeral é a faísca */
html body .how-we-work__num,
html body .process-rail__num {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: clamp(34px, 3vw, 52px) !important;
  line-height: 0.8 !important;
  letter-spacing: -0.04em !important;
  color: var(--accent-spark) !important;
  display: block;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  margin-bottom: 16px;
}

html body .how-we-work__step,
html body .process-rail__step,
html body .process-rail__card {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  box-shadow: none !important;
}

html body .how-we-work__step:hover,
html body .process-rail__step:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(230, 81, 0, 0.45) !important;
}

/* H2 destas secções tem classe própria e vence os selectores genéricos */
html body .how-we-work__h2,
html body .process-rail__h2 {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: var(--t-d2) !important;
  line-height: 0.92 !important;
  letter-spacing: var(--ls-d2) !important;
  color: #fff !important;
}

html body .how-we-work__h2 em,
html body .process-rail__h2 em {
  font-style: normal !important;
  font-weight: 900 !important;
  color: var(--accent-spark) !important;
}

/* Trilho de progresso do processo, sobre escuro */
html body .process-rail__line {
  background: rgba(255, 255, 255, 0.14) !important;
}

html body .process-rail__line-fill {
  background: var(--accent-spark) !important;
}

html body .process-rail__dot {
  color: rgba(255, 255, 255, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

html body .process-rail__dot.is-active {
  color: #fff !important;
  border-color: var(--accent-spark) !important;
}

html body .process-rail__sub {
  color: var(--accent-spark) !important;
}

/* Botões dentro dos blocos escuros */
html body .how-we-work .button--dark,
html body .process-rail .button--dark {
  background: #fff !important;
  color: #0a0a0a !important;
  border-color: #fff !important;
}

/* O numeral tinha gradiente em texto (-webkit-text-fill-color: transparent)
   e um color !important herdado: sobre fundo escuro saía cobre lavado */
html body .how-we-work .how-we-work__num,
html body .process-rail .process-rail__num {
  color: var(--accent-spark) !important;
  -webkit-text-fill-color: var(--accent-spark) !important;
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
}

html body .how-we-work__step,
html body .process-rail__step {
  border-radius: 4px !important;
}

/* Página do formulário: o título tem classe própria em form-styles.css */
html body .form-hero__title {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: var(--t-d1) !important;
  line-height: 0.88 !important;
  letter-spacing: var(--ls-d1) !important;
}