/* ============================================================
   COMPONENTS — Botões, badges, cards, mockup, tags
   ============================================================ */

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-b);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 12px 22px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s var(--ease), background 0.2s var(--ease),
              border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
              color 0.2s var(--ease);
  white-space: nowrap;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--cyan);
  color: var(--bg);
  font-weight: 600;
  box-shadow: 0 0 0 0 var(--cyan-glow), 0 8px 24px -8px var(--cyan-glow);
}
.btn-primary:hover {
  background: #4DEFFF;
  box-shadow: 0 0 0 4px var(--cyan-dim), 0 14px 32px -10px var(--cyan-glow);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover {
  border-color: var(--cyan-bdr);
  background: var(--cyan-dim);
  color: var(--cyan);
}

.btn-sm { padding: 9px 16px; font-size: 0.88rem; }

/* ---------- Badge animado ---------- */
.badge-pulse {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-m);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--muted-2);
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.badge-pulse .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 var(--green);
  animation: pulse 1.6s var(--ease) infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(57, 255, 20, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(57, 255, 20, 0); }
  100% { box-shadow: 0 0 0 0 rgba(57, 255, 20, 0); }
}

/* ---------- Card base ---------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease),
              background 0.25s var(--ease);
}

.card:hover {
  border-color: var(--cyan-bdr);
  transform: translateY(-2px);
}

/* Step card */
.step .step-num {
  font-family: var(--font-m);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--cyan);
  margin-bottom: 18px;
}
.step h3 { margin-bottom: 10px; }
.step p { color: var(--muted-2); }

.step-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--cyan-dim);
  border: 1px solid var(--cyan-bdr);
  color: var(--cyan);
  margin-bottom: 18px;
}

/* Feature card */
.feature h3 { margin-bottom: 10px; }
.feature p { color: var(--muted-2); }

.tag {
  display: inline-block;
  font-family: var(--font-m);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--cyan-dim);
  color: var(--cyan);
  border: 1px solid var(--cyan-bdr);
  margin-bottom: 16px;
}
.tag.green { background: var(--green-dim); color: var(--green); border-color: rgba(57,255,20,0.25); }
.tag.amber { background: rgba(245,158,11,0.10); color: var(--amber); border-color: rgba(245,158,11,0.25); }
.tag.muted { background: var(--surface2); color: var(--muted-2); border-color: var(--border-hl); }

/* ---------- Mockup do dashboard ---------- */
.mockup {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6),
              0 0 0 1px var(--border) inset;
}

.mockup-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.mockup-bar .dot-r {
  width: 11px; height: 11px; border-radius: 50%;
  background: #ff5f57;
}
.mockup-bar .dot-y { background: #febc2e; }
.mockup-bar .dot-g { background: #28c840; }
.mockup-url {
  margin-left: 14px;
  font-family: var(--font-m);
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--bg);
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.mockup-body { padding: 22px; }

.mockup-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
}
.mockup-title h4 {
  font-family: var(--font-d);
  font-size: 0.95rem;
  color: var(--text);
}
.mockup-title .qtr {
  font-family: var(--font-m);
  font-size: 0.72rem;
  color: var(--muted);
}

.bars { display: grid; gap: 14px; }

.bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 48px;
  gap: 12px;
  align-items: center;
  font-family: var(--font-m);
  font-size: 0.78rem;
}
.bar-row .lab { color: var(--muted-2); }
.bar-row .val { text-align: right; color: var(--text); }

.bar-track {
  height: 10px;
  background: var(--surface2);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  border-radius: 999px;
  transition: width 1.4s var(--ease);
}
.bar-fill.warn { background: linear-gradient(90deg, var(--amber), #fb7185); }

.insight {
  margin-top: 22px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--cyan-bdr);
  background: var(--cyan-dim);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  color: var(--text);
}
.insight .ic { color: var(--amber); flex-shrink: 0; }

/* ---------- WhatsApp link no CTA ---------- */
.cta-alt {
  margin-top: 22px;
  font-size: 0.92rem;
  color: var(--muted-2);
}

.wa-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.wa-link:hover {
  color: #5AFF3A;
  border-bottom-color: currentColor;
}
.wa-link svg { flex-shrink: 0; }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: none;
}