/* ============================================================
   IG Engenharia e Gerenciamento — Design System
   Origem: Brand Book IG (2026) + logotipo oficial (SVG)
   Direção aprovada: navy dominante + amarelo cirúrgico
   ============================================================ */

:root {
  /* ---------- MARCA (rastreável) ---------------------------- */
  /* #182138 — navy do logotipo (SVG oficial). O brand book grafa
     #172137 na página "Brand Colors"; adotamos o valor do asset. */
  --navy-800: #182138;
  /* #F3C139 — "amarelo estratégico" do brand book */
  --yellow:   #F3C139;
  /* #FAFAFA — off-white do logotipo (fill do monograma) */
  --off-white:#FAFAFA;

  /* ---------- ESCALA NAVY (derivada de #182138) ------------- */
  --navy-950: #0B111E; /* fundos mais profundos, footer */
  --navy-900: #0F1729; /* seções escuras alternadas */
  --navy-700: #212C48; /* cards sobre navy */
  --navy-600: #2C3A5A; /* bordas fortes, hover de card */
  --navy-500: #3D4C6E; /* linhas divisórias sobre escuro */
  --navy-400: #5A6A8C; /* ícones secundários */
  --navy-300: #8B97B2; /* texto secundário sobre escuro */
  --navy-200: #C3CBDA; /* texto terciário sobre escuro */

  /* ---------- CLAROS ---------------------------------------- */
  --white:    #FFFFFF;
  --paper:    #F4F5F7; /* seções claras */
  --paper-2:  #E7E9EE; /* bordas em seção clara */

  /* ---------- AMARELO: estados ------------------------------ */
  --yellow-hover: #E0AE28;
  --yellow-press: #C89A1F;
  --yellow-dim:   rgba(243, 193, 57, .18); /* filetes, halos */

  /* ---------- PAPÉIS SEMÂNTICOS ---------------------------- */
  --bg:            var(--navy-800);
  --bg-alt:        var(--navy-900);
  --bg-deep:       var(--navy-950);
  --bg-light:      var(--paper);
  --surface:       var(--navy-700);
  --text:          var(--off-white);
  --text-muted:    var(--navy-300);
  --text-on-light: var(--navy-800);
  --muted-on-light:#5B6478;
  --accent:        var(--yellow);
  --line:          rgba(250, 250, 250, .12);
  --line-strong:   rgba(250, 250, 250, .22);
  --line-light:    var(--paper-2);

  /* estados */
  --focus:   var(--yellow);
  --success: #3E8E5A;
  --danger:  #C0483C;

  /* ---------- TIPOGRAFIA ----------------------------------- */
  /* Display: Josefin Sans — a fonte do próprio logotipo IG
     (o descritivo "ENGENHARIA E GERENCIAMENTO" é JosefinSans-Regular).
     Texto: IBM Plex Sans — grotesca técnica, registro de engenharia,
     alta legibilidade em corpo longo, não briga com a geometria da display.
     Mono: IBM Plex Mono — índices, specs e eyebrows (registro técnico). */
  --font-display: 'Josefin Sans', 'Century Gothic', 'Futura', sans-serif;
  --font-text:    'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* escala fluida (clamp) */
  /* CAIXA ALTA + BOLD (padrão do brand book) pede corpo menor que a versão
     light em caixa mista: a mesma frase ocupa muito mais espaço em maiúsculas. */
  --fs-display: clamp(1.95rem, 4.6vw, 3.7rem);  /* H1 hero */
  --fs-h2:      clamp(1.4rem, 2.7vw, 2.15rem);
  --fs-h3:      clamp(1.05rem, 1.5vw, 1.3rem);
  --fs-h4:      clamp(1.06rem, 1.5vw, 1.22rem);
  --fs-lead:    clamp(1.02rem, 1.35vw, 1.22rem);
  --fs-body:    1rem;
  --fs-sm:      .9375rem;
  --fs-xs:      .8125rem;
  --fs-eyebrow: .75rem;

  --lh-display: 1.02;
  --lh-head:    1.22;
  --lh-body:    1.68;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* tracking — em caixa alta a geométrica precisa de respiro, como no brand book */
  --ls-display: 0.012em;
  --ls-head:    0.02em;
  --ls-eyebrow: 0.2em;
  --ls-wordmark:0.34em;

  /* ---------- ESPAÇAMENTO (escala de 4) ------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 40px;  --s-8: 56px;
  --s-9: 72px;  --s-10: 96px; --s-11: 128px;
  --section-y:  clamp(72px, 9vw, 128px);
  --container:  1200px;
  --gutter:     24px;
  --header-h:   84px;

  /* ---------- RAIOS ---------------------------------------- */
  /* o ícone institucional é um quadrado de cantos levemente
     arredondados — o raio da UI espelha isso (sóbrio, não pill) */
  --r-xs: 3px;  --r-sm: 6px;  --r-md: 14px;
  --r-lg: 20px; --r-xl: 28px; --r-full: 999px;

  /* ---------- SOMBRAS -------------------------------------- */
  --sh-sm:  0 1px 2px rgba(11, 17, 30, .28);
  --sh-md:  0 8px 24px rgba(11, 17, 30, .32);
  --sh-lg:  0 24px 64px rgba(11, 17, 30, .44);
  --sh-accent: 0 12px 32px rgba(243, 193, 57, .22);

  /* ---------- MOVIMENTO ------------------------------------ */
  /* scroll nativo + smooth CSS. Sem momentum/inércia. */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --t-fast:    180ms;
  --t-base:    340ms;
  --t-slow:    720ms;
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
  -webkit-text-size-adjust: 100%;
  /* `clip` em vez de `hidden`: evita criar um contêiner de scroll,
     que quebraria o position:sticky dos descendentes (FAQ). */
  overflow-x: clip;
}

/* As superfícies escuras do brand book NÃO são chapadas: têm granulado fino e
   um gradiente suave. `body::before` põe o grão sobre toda a página. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 2; }

body {
  margin: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(61, 76, 110, .30) 0%, transparent 62%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
}

/* height:auto é obrigatório: os atributos width/height do HTML (que evitam
   layout shift) entram como hint de apresentação e, se a altura não for
   liberada, VENCEM o aspect-ratio do CSS e a imagem sai esticada. */
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
/* Padrão do brand book: títulos em BOLD e CAIXA ALTA na geométrica da marca
   (a mesma do logotipo). O corpo continua em caixa mista. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  margin: 0;
  text-wrap: balance;
}
h4 {
  font-family: var(--font-text);
  font-weight: var(--fw-semi);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); letter-spacing: 0; }

p { margin: 0 0 var(--s-4); }
.lead { font-size: var(--fs-lead); color: var(--text-muted); max-width: 62ch; }

/* palavra em destaque dentro de um título, em amarelo — padrão "BRAND BOOK"
   do brand book, onde uma palavra do título recebe o amarelo da marca */
.hl { color: var(--accent); }

/* eyebrow — o único lugar "fixo" do amarelo em texto */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--accent);
  flex: none;
}

/* índice técnico 01 / 06 */
.index-num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  color: var(--navy-400);
}

/* wordmark (rodapé) — espelha o tracking do logotipo */
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-wordmark);
  text-transform: uppercase;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: var(--section-y) 0; }
.section--alt   { background: var(--bg-alt); }
.section--deep  { background: var(--bg-deep); }
.section--light { background: var(--bg-light); color: var(--text-on-light); }
.section--light .lead { color: var(--muted-on-light); }
.section--light h1, .section--light h2, .section--light h3 { color: var(--navy-800); }

.hairline { height: 1px; background: var(--line); border: 0; margin: 0; }

/* filete amarelo curto — separador de respiro */
.rule-accent { width: 56px; height: 2px; background: var(--accent); border: 0; }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: 17px 34px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: .02em;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}

/* primário: o amarelo da marca, texto navy — máximo contraste */
.btn--primary {
  background: var(--accent);
  color: var(--navy-800);
  box-shadow: var(--sh-accent);
}
.btn--primary:hover  { background: var(--yellow-hover); transform: translateY(-2px); }
.btn--primary:active { background: var(--yellow-press); transform: none; }

/* secundário sobre navy */
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

/* sobre fundo claro */
.btn--dark { background: var(--navy-800); color: var(--off-white); }
.btn--dark:hover { background: var(--navy-700); transform: translateY(-2px); }

.btn--lg { padding: 20px 42px; font-size: var(--fs-body); }
.btn--block { width: 100%; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-6);
  transition: border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
}
.card:hover { border-color: var(--navy-600); transform: translateY(-3px); }

/* card com filete amarelo no topo, revelado no hover */
.card--accent { position: relative; overflow: hidden; }
.card--accent::before {
  content: '';
  position: absolute; inset: 0 auto auto 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}
.card--accent:hover::before { transform: scaleX(1); }

/* card de mídia (portfólio) */
.card-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--navy-900);
}
.card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.card-media:hover img { transform: scale(1.06); }

/* ============================================================
   FORMULÁRIOS (módulos LGPD — o CTA é botão, não form)
   ============================================================ */
.field { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.field label { font-size: var(--fs-sm); color: var(--text-muted); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 13px 15px;
  background: var(--navy-900);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  transition: border-color var(--t-fast) var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent);
  outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--navy-400); }

/* ============================================================
   GANCHOS DE ANIMAÇÃO (etapa 7 pluga a camada rica)
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }

.hero-media { will-change: transform; }
[data-underline] { position: relative; }