/* ============================================================
   THAINÁ MARCON — Componentes Reutilizáveis
   Botões, títulos utilitários e elementos UI globais
   ============================================================ */

/* ── UTILITÁRIOS DE TIPOGRAFIA ──────────────────────────── */

.eyebrow {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 12px;
}

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(28.8px, 5vw, var(--fs-section-h));
  font-weight: 700;
  line-height: var(--lh-serif);
  letter-spacing: -0.8px;
  color: var(--color-navy);
  margin-bottom: 0;
}

.section-title--light {
  color: var(--color-cream);
}

/* ── BOTÕES ─────────────────────────────────────────────── */

.btn-primary-dark {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-navy);
  color: var(--color-cream);
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  font-weight: 600;
  padding: 14.4px 32px;
  border-radius: var(--radius-btn);
  border: none;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.15s;
  white-space: nowrap;
}

.btn-primary-dark:hover {
  background-color: var(--color-navy-md);
  color: var(--color-cream);
  transform: translateY(-1px);
}

.btn-primary-gold {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-gold);
  color: var(--color-navy);
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  font-weight: 600;
  padding: 14.4px 32px;
  border-radius: var(--radius-btn);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  white-space: nowrap;
}

.btn-primary-gold:hover {
  opacity: 0.88;
  color: var(--color-navy);
  transform: translateY(-1px);
}

.btn-outline-dark {
  display: inline-flex;
  align-items: center;
  background-color: transparent;
  color: var(--color-navy);
  font-family: var(--font-sans);
  font-size: var(--fs-body-md);
  font-weight: 600;
  padding: 14px 28px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--color-navy);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  white-space: nowrap;
}

.btn-outline-dark:hover {
  background-color: var(--color-navy);
  color: var(--color-cream);
}

/* ── REVEAL ON SCROLL ───────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-left {
  transform: translateX(-24px);
}

.reveal-d1 { transition-delay: 0.05s; }
.reveal-d2 { transition-delay: 0.20s; }
.reveal-d3 { transition-delay: 0.35s; }
.reveal-d4 { transition-delay: 0.50s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}