:root {
  --ti-text: #f8fafc;
  --ti-muted: #cbd5e1;
  --ti-line: rgba(255, 255, 255, 0.12);
  --ti-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
  --ti-radius-xl: 32px;
  --ti-radius-lg: 22px;
  --ti-radius-md: 16px;
  --ti-container: 920px;
}

.tarjeta {
  width: min(100% - 24px, var(--ti-container));
  margin: 0 auto;
  padding: 20px 0 50px;
  color: var(--ti-text);
}

.ti-btn,
.ti-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.25s ease;
}

.ti-btn:hover,
.ti-pill:hover {
  transform: translateY(-2px);
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}