/* ==========================================================================
   TYPOGRAPHY.CSS — Sistema Tipográfico Space Grotesk (Headlines & Labels) + Inter (Body)
   ========================================================================== */

/* Body & Leitura Geral em Inter */
body,
p,
li,
input,
textarea,
select {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
}

/* Todos os Títulos / Headlines em Space Grotesk */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
  font-weight: var(--fw-medium);
  line-height: 1.08;
  letter-spacing: -0.034em;
}

/* Headline da Hero alinhada à esquerda (Conforme distribuição da imagem enviada) */
.hero-display-headline {
  font-family: var(--font-headline);
  font-size: clamp(2.65rem, 1.8rem + 4.8vw, 5.85rem);
  font-weight: var(--fw-bold);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-align: left;
  margin-bottom: 28px;
}

.hero-gradient-word {
  background: linear-gradient(90deg, #7C73FF 0%, #9F85FF 48%, #C67AFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.hero-lead-subtitle {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.24rem);
  font-weight: var(--fw-regular);
  line-height: 1.52;
  color: rgba(235, 235, 245, 0.86);
  max-width: 52ch;
  text-align: left;
  margin-bottom: 36px;
}

/* Frase de introdução centralizada abaixo do Slider Infinito */
.nfinite-intro-statement {
  font-family: var(--font-headline);
  font-size: clamp(1.75rem, 1.3rem + 2.1vw, 3.1rem);
  font-weight: var(--fw-medium);
  line-height: 1.12;
  letter-spacing: -0.034em;
  color: var(--text-black);
  max-width: 26ch;
  margin: 0 auto;
  text-align: center;
}

/* Títulos de seção no monólito escuro ("Tecnologia de Posicionamento: SEO & GEO") */
.nfinite-dark-center-title {
  font-family: var(--font-headline);
  font-size: clamp(2.2rem, 1.6rem + 3vw, 4.4rem);
  font-weight: var(--fw-regular);
  line-height: 1.06;
  letter-spacing: -0.038em;
  color: var(--text-white);
  text-align: center;
}

.nfinite-dark-display-left {
  font-family: var(--font-headline);
  font-size: clamp(2.1rem, 1.5rem + 2.8vw, 4.1rem);
  font-weight: var(--fw-regular);
  line-height: 1.08;
  letter-spacing: -0.036em;
  color: var(--text-white);
  max-width: 18ch;
}

/* Títulos de Impacto Centralizados no Branco ("Design que conecta...") */
.nfinite-impact-statement {
  font-family: var(--font-headline);
  font-size: clamp(2rem, 1.5rem + 2.6vw, 3.85rem);
  font-weight: var(--fw-medium);
  line-height: 1.07;
  letter-spacing: -0.036em;
  color: var(--text-black);
  max-width: 20ch;
  margin: 0 auto;
  text-align: center;
}

/* Citação / Manifesto Editorial Grande à Esquerda */
.nfinite-editorial-quote {
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.45rem);
  font-weight: var(--fw-medium);
  line-height: 1.16;
  letter-spacing: -0.032em;
  color: var(--text-black);
  max-width: 32ch;
}

/* Cabeçalho Gigante Dividido ("Nosso ———————— Portfólio") */
.nfinite-split-giant-title {
  font-family: var(--font-headline);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  font-size: var(--text-mega);
  font-weight: var(--fw-medium);
  line-height: 0.92;
  letter-spacing: -0.048em;
  color: var(--text-black);
  padding-bottom: var(--space-8);
}

/* Labels & Micro-labels técnicos em Space Grotesk */
.nfinite-micro-label,
.form-label,
.cyan-tag,
.hero-scrub-label,
.studio-cell-caption {
  font-family: var(--font-label);
}

.nfinite-micro-label {
  font-size: 0.68rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted-grey);
  display: inline-block;
}

.surface-black .nfinite-micro-label {
  color: var(--text-white-muted);
}

.text-cyan-highlight {
  color: var(--color-accent-cyan);
}

/* Suporte a SplitType */
.split-line {
  overflow: hidden;
  display: block;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.split-word,
.split-char {
  display: inline-block;
  will-change: transform, opacity;
}