@import url("reset.css");
@import url("variables.css");
@import url("sections/header.css");
@import url("sections/hero.css");
@import url("sections/hero-sphere.css");
@import url("sections/problems.css");
@import url("sections/gamification.css");
@import url("sections/work.css");
@import url("sections/team.css");
@import url("sections/faq.css");
@import url("sections/cta.css");
@import url("sections/footer.css");
@import url("sections/contact-modal.css");

body {
  background-color: var(--color-bg);
  /* Degradê do header+hero (violet-600 -> violet-800), limitado aos
     primeiros 100vh da página — depois disso volta a mostrar
     --color-bg (fallback) pro resto do site. Header fica sem fundo
     próprio pra deixar esse degradê aparecer por trás dele também. */
  background-image: linear-gradient(to bottom, var(--color-violet-600), var(--color-violet-800));
  background-repeat: no-repeat;
  background-size: 100% 100vh;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
}

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

/* Grid (Figma) — 3 níveis, breakpoints unificados com o header em
   1139px (tablet) e 620px (mobile) — ver header.css pra origem desses
   números (limite de "hug" do conteúdo do header; desktop garantido a
   partir de 1140px, tablet entra em 1139px e abaixo).
   Cada dobra posiciona seu conteúdo com grid-column: <início> / span <colunas>.
   Desktop: 12 colunas, margem 64px, gutter 32px
   Tablet (<=1139px): 8 colunas, margem 32px, gutter 24px
   Mobile (<620px): 4 colunas, margem 24px, gutter 16px */
.grid {
  display: grid;
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  padding-inline: var(--grid-margin);
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  column-gap: var(--grid-gutter);
}

@media (max-width: 1139px) {
  :root {
    --grid-columns: 8;
    --grid-margin: 32px;
    --grid-gutter: 24px;
  }
}

@media (max-width: 620px) {
  :root {
    --grid-columns: 4;
    --grid-margin: 24px;
    --grid-gutter: 16px;
  }
}

/* Sem padding-block por padrão — cada dobra cria seu próprio respiro
   vertical no padding do conteúdo interno (ver .gamification__content),
   não na section. Dobras mais antigas que ainda definem padding-block
   na própria section (.problems) são exceção herdada, não o padrão a
   seguir em dobras novas. */
.section {
  padding-block: 0;
}

/* Botão base — reutilizado em várias dobras */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 12px 24px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  /* Label de botão não segue a escala fluida — sempre 18px, ver
     --fs-btn em variables.css. */
  font-size: var(--fs-btn);
  line-height: var(--lh-btn);
  white-space: nowrap;
  transition: transform var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.btn:active {
  transform: scale(0.98);
}

.btn--accent {
  background-color: var(--color-accent);
  color: var(--color-primary);
}

.btn--accent:hover {
  background-color: #ffffff;
  color: var(--color-primary);
}

.btn--lg {
  padding: 20px 32px;
}

.btn__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Cada dobra do site recebe seus próprios estilos em um arquivo
   dedicado dentro de css/sections/ conforme formos construindo. */

/* Suporte a js/scroll-reveal.js — começa invisível pra não piscar em
   opacidade 1 antes do JS aplicar a animação (GSAP assume a partir
   daqui). Quem prefere menos movimento vê o conteúdo direto, sem
   depender do JS pra restaurar a opacidade. */
[data-reveal],
[data-hero-reveal] {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-hero-reveal] {
    opacity: 1;
  }
}