:root { --bg: #0b0b0b; --text: #f6f6f6; --muted: #bdbdbd; --accent: #ffd400; --accent-dark: #d4af00; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif; }
img { display: block; max-width: 100%; height: auto; }

.topbar { position: sticky; top: 0; z-index: 20; background: #111; border-bottom: 1px solid #222; }
.topbar__wrap { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; }
.logo { height: 32px; width: auto; }
.cta { color: #111; background: var(--accent); padding: 8px 12px; border-radius: 999px; font-weight: 600; text-decoration: none; }

.hero { position: relative; }
.hero__img { width: 100%; object-fit: cover; }
.hero__content { padding: 16px; display: grid; gap: 10px; }
.hero h1 { margin: 0; font-size: 1.6rem; }
.hero p { margin: 0; color: var(--muted); }
.hero__actions { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-top: 6px; }
.btn { display: inline-block; text-align: center; text-decoration: none; border-radius: 10px; padding: 10px 12px; font-weight: 600; }
.btn.primary { background: #1a1a1a; color: var(--text); border: 1px solid #2a2a2a; }
.btn.primary:active { transform: scale(0.98); }
.btn.secondary { background: var(--accent); color: #111; }
.hero__note { font-size: .9rem; }

.promo-cards { display: grid; gap: 12px; padding: 16px; }
.card { background: #111; border: 1px solid #1f1f1f; border-radius: 12px; overflow: hidden; }
.card__content { padding: 12px; display: grid; gap: 6px; }
.card h2 { margin: 0; font-size: 1.2rem; }
.card p { margin: 0; color: var(--muted); }
.card .btn { justify-self: start; }

.categories { padding: 16px; }
.categories h2 { margin: 0 0 8px; font-size: 1.2rem; }
.grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.pill { text-decoration: none; text-align: center; padding: 10px; border-radius: 999px; border: 1px solid #2a2a2a; background: #141414; color: var(--text); font-weight: 600; }

.footer { padding: 20px 16px 40px; text-align: center; color: var(--muted); border-top: 1px solid #1f1f1f; }

/* destaque chamativo para os botones principais */
.btn.primary.highlight {
  border-color: var(--accent-dark);
  box-shadow:
    0 0 0 2px rgba(212, 175, 0, 0.25),
    inset 0 0 16px rgba(255, 212, 0, 0.15);
  animation: pulseGlow 1.8s ease-in-out infinite;
}
.btn.primary.highlight:hover {
  box-shadow:
    0 0 0 3px rgba(255, 212, 0, 0.35),
    inset 0 0 22px rgba(255, 212, 0, 0.25);
  transform: translateZ(0) scale(1.02);
}
@keyframes pulseGlow {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(212, 175, 0, 0.25),
      inset 0 0 16px rgba(255, 212, 0, 0.15);
    transform: translateZ(0) scale(1);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(255, 212, 0, 0.35),
      inset 0 0 24px rgba(255, 212, 0, 0.25);
    transform: translateZ(0) scale(1.03);
  }
}

@media (min-width: 768px) {
  .hero__content { padding: 24px; gap: 12px; }
  .hero h1 { font-size: 2rem; }
  .hero__actions { grid-template-columns: repeat(4,1fr); }
  .promo-cards { grid-template-columns: 1fr 1fr; }
}