/* =============================================
   BASE — layout, tipografia, botões, utilitários
   ============================================= */

.container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--space-8); }
section { padding-block: var(--space-24); }

/* Tipografia: títulos 600 com tracking negativo (DESIGN.md Notion) */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--text-hero); line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: var(--text-4xl); line-height: 1.08; letter-spacing: -0.025em; }
h3 { font-size: var(--text-xl); line-height: 1.25; letter-spacing: -0.01em; }
p  { font-size: var(--text-base); line-height: 1.6; color: var(--color-text-muted); max-width: 60ch; }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent);
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }

/* Botões: 8px, não pílula */
.btn-primary, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: var(--space-3) var(--space-6);
  border-radius: var(--radius);
  font-weight: 600; font-size: var(--text-base);
  transition: transform var(--transition), background-color var(--transition), border-color var(--transition);
}
.btn-primary { background: var(--color-primary); color: var(--ink); }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); }
.btn { border: 1px solid var(--ink); color: var(--ink); }
.btn:hover { background: var(--ink); color: var(--paper); }

.link-seta { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); font-weight: 600; border-bottom: 1px solid currentColor; position: relative; }
.link-seta::after { content: ""; position: absolute; inset: -12px 0; } /* área de toque */
.link-seta svg { transition: transform var(--transition); }
.link-seta:hover svg { transform: translateX(4px); }

/* Reveal on scroll (pareia com js/reveal.js) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
[data-atraso="1"] { transition-delay: .08s; }
[data-atraso="2"] { transition-delay: .16s; }
[data-atraso="3"] { transition-delay: .24s; }