/* =========================================================
   RESET
   ========================================================= */

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

html {
  /*
   * Sem scroll-behavior: smooth aqui de propósito. O scroll suave é
   * responsabilidade do Lenis (assets/js/main.js) e as duas coisas brigam
   * entre si: o Lenis escreve scrollTop a cada frame e o smooth nativo
   * tenta animar cada uma dessas escritas, o que trava a rolagem.
   *
   * overflow-x: clip (não hidden) blinda contra vazamento lateral sem
   * quebrar position: sticky.
   */
  overflow-x: clip;
  background: var(--color-black);
}

/* CSS exigido pelo Lenis. */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: clip;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

body {
  min-height: 100vh;
  background: var(--color-black);
  color: var(--color-off-white);
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

button {
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

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

ul,
ol {
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--color-gold-light);
  outline-offset: 4px;
}


/* =========================================================
   VARIÁVEIS DE COR
   ========================================================= */

:root {
  --color-black: #0A0A0A;
  --color-surface: #131313;
  --color-graphite: #1E1E1E;
  --color-line: #2C2C2C;

  --color-gray: #8C8C8C;
  --color-gray-muted: #5F5F5F;
  --color-off-white: #F4F4F2;
  --color-white: #FFFFFF;

  /*
   * Cor de leitura para eyebrows, descrições e demais textos que eram
   * cinza e viraram brancos a pedido do Rodrigo (2026-08-19). Valor
   * distinto (mas quase idêntico) de --color-off-white de propósito —
   * ele pediu esse hex específico. Rótulos funcionais (form label, dt de
   * definição, stepper de progresso, ícones) continuam em --color-gray,
   * ver CLAUDE.md.
   */
  --color-body: #F4F4F4;

  --color-gold: #C9A14A;
  --color-gold-light: #E0C588;
  --color-gold-dark: #8A6C2C;

  --font-family: "Archivo", sans-serif;

  /* Escala tipográfica */
  --text-xs: clamp(0.65rem, 0.62rem + 0.08vw, 0.72rem);
  --text-sm: clamp(0.75rem, 0.70rem + 0.12vw, 0.84rem);
  --text-base: clamp(0.875rem, 0.82rem + 0.16vw, 1rem);
  --text-lg: clamp(1rem, 0.92rem + 0.28vw, 1.2rem);
  --text-xl: clamp(1.25rem, 1.08rem + 0.55vw, 1.6rem);
  --text-2xl: clamp(1.6rem, 1.25rem + 1.1vw, 2.4rem);
  --text-3xl: clamp(2rem, 1.5rem + 1.8vw, 3.4rem);
  --text-4xl: clamp(2.6rem, 1.8rem + 3vw, 5rem);
  --text-display: clamp(3.4rem, 2.2rem + 5.5vw, 8.5rem);

  /* Espaçamentos */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Estrutura */
  --container-max: 1440px;
  --container-wide: 1600px;
  --container-padding: 1.25rem;

  /*
   * Header mais alto para acomodar o logotipo circular sem miniaturizá-lo.
   * O hero calcula a própria altura a partir desta variável.
   */
  --header-height: 72px;
  --hero-trust-height: 72px;

  --border-width: 1px;
  --radius: 0;

  /* Transições discretas */
  --transition-fast: 180ms ease;
  --transition-base: 280ms ease;
}


/* =========================================================
   UTILITÁRIOS DE CONTAINER
   ========================================================= */

.container {
  width: min(100%, var(--container-max));
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--wide {
  width: min(100%, var(--container-wide));
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--narrow {
  width: min(100%, 1080px);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}


/* =========================================================
   UTILITÁRIOS DE GRID
   ========================================================= */

.grid {
  display: grid;
}

.grid--12 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.grid--2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.grid--3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.grid--4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}


/* =========================================================
   UTILITÁRIOS TIPOGRÁFICOS
   ========================================================= */

.display {
  font-family: var(--font-family);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.88;
  text-transform: uppercase;
}

.text-label {
  color: var(--color-gray);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.text-muted {
  color: var(--color-gray);
}

.text-dark-muted {
  color: var(--color-gray-muted);
}

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


/* =========================================================
   BREAKPOINT — 768px
   ========================================================= */

@media (min-width: 768px) {

  :root {
    --container-padding: 2rem;
    --header-height: 84px;
  }

  .grid--12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* =========================================================
   BREAKPOINT — 1200px
   ========================================================= */

@media (min-width: 1200px) {

  :root {
    --container-padding: 3rem;
    --header-height: 96px;
  }
}


/* =========================================================
   REDUÇÃO DE MOVIMENTO — GLOBAL
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}