/* ===== vendzapp — Design System ===== */

:root {
  /* Brand principal (verde/emerald, mantido por consistência com tudo que já existe) */
  --brand-50:  #ecfdf5;
  --brand-100: #d1fae5;
  --brand-500: #10b981;
  --brand-600: #059669;
  --brand-700: #047857;
  /* Acento azul profissional (para CTAs alternativos e foco de ação) */
  --accent-500:#2563eb;
  --accent-600:#1d4ed8;
  --accent-50: #eff6ff;
  /* Neutros */
  --bg:        #f9fafb;
  --surface:   #ffffff;
  --text-1:    #111827;
  --text-2:    #6b7280;
  --ink-900:   #0b0f0d;
  --ink-800:   #111817;
  --ink-700:   #1a2320;
  --ink-500:   #64748b;
  --ink-400:   #94a3b8;
  --line:      #e5e7eb;
  /* Raios / sombras */
  --r-card:    12px;
  --r-modal:   16px;
  --shadow-card: 0 2px 12px -2px rgba(15,23,42,.08);
  --shadow-soft: 0 10px 30px -10px rgba(16,185,129,.25);
}

* { box-sizing: border-box; }

/* ===== Gradientes & fundo ===== */
.bg-hero-gradient {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(16,185,129,.18), transparent 60%),
    radial-gradient(800px 400px at 100% 0%, rgba(52,211,153,.12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f6fffb 100%);
}

.bg-grid-subtle {
  background-image:
    linear-gradient(rgba(16,185,129,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,185,129,.06) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center center;
}

.text-gradient-brand {
  background: linear-gradient(90deg, #10b981, #047857);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===== Botões ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; font-weight: 600; border-radius: 12px;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(180deg, #10b981, #059669);
  color: #fff; padding: .85rem 1.25rem;
  box-shadow: 0 10px 24px -12px rgba(16,185,129,.55), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(16,185,129,.65); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  background: #fff; color: var(--ink-900);
  border: 1px solid var(--line); padding: .85rem 1.25rem;
}
.btn-ghost:hover { border-color: var(--brand-500); color: var(--brand-700); }

/* ===== Card ===== */
.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 2px 12px -2px rgba(15,23,42,.06);
}
.card-hover { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(16,185,129,.25); border-color: #bbf7d0; }

/* ===== Chips / badges ===== */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600;
  background: var(--brand-50); color: var(--brand-700);
  border: 1px solid #a7f3d0;
}
.chip-dark {
  background: #0b0f0d; color: #a7f3d0; border: 1px solid #065f46;
}

/* ===== Sidebar (dashboard) ===== */
.sidebar-link {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .85rem; border-radius: 10px;
  color: #334155; font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.sidebar-link:hover { background: #f1f5f9; color: var(--ink-900); }
.sidebar-link.active { background: var(--brand-50); color: var(--brand-700); }
.sidebar-link.active i { color: var(--brand-600); }
.sidebar-link.locked { opacity: .65; cursor: not-allowed; }

/* ===== Mockup phone (hero - legado, mantido para compat) ===== */
.phone-frame {
  width: 290px; height: 585px;
  border-radius: 42px; background: #0b0f0d;
  padding: 12px; box-shadow:
    0 30px 60px -20px rgba(16,185,129,.35),
    0 0 0 1px rgba(0,0,0,.04);
  position: relative;
}
.phone-screen {
  width: 100%; height: 100%; border-radius: 32px; overflow: hidden;
  background: linear-gradient(180deg,#f6fffb, #ffffff);
  position: relative;
}
.phone-notch {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 22px; border-radius: 999px; background: #0b0f0d; z-index: 5;
}

/* ===== Mockups modernos mobile-first (hero novo) ===== */
.mockup-stack {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: 1rem 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 460px;
}

/* Mockup principal (navegador/catálogo) */
.mockup-phone {
  width: 100%;
  max-width: 300px;
  background: #fff;
  border-radius: 1.25rem; /* rounded-2xl */
  box-shadow:
    0 20px 50px -15px rgba(15, 23, 42, .25),
    0 8px 20px -10px rgba(16, 185, 129, .15),
    0 0 0 1px rgba(15, 23, 42, .04);
  overflow: hidden;
  position: relative;
  z-index: 2;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease;
}
.mockup-phone:hover {
  transform: translateY(-4px);
  box-shadow:
    0 28px 60px -18px rgba(15, 23, 42, .3),
    0 10px 24px -10px rgba(16, 185, 129, .25),
    0 0 0 1px rgba(15, 23, 42, .04);
}
.mockup-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 10px;
}
.mockup-bar-dots {
  display: inline-flex;
  gap: 4px;
}
.mockup-bar-dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: block;
}
.mockup-bar-url {
  flex: 1;
  text-align: center;
  color: #64748b;
  font-size: 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mockup-screen {
  background: linear-gradient(180deg, #f6fffb 0%, #ffffff 100%);
  min-height: 360px;
}

/* Cards flutuantes — só aparecem no desktop (md+) para não poluir mobile */
.mockup-card {
  display: none;
  position: absolute;
  background: #fff;
  border-radius: 1rem;
  padding: .75rem;
  box-shadow:
    0 12px 30px -10px rgba(15, 23, 42, .18),
    0 0 0 1px rgba(15, 23, 42, .04);
  z-index: 3;
  min-width: 160px;
  max-width: 200px;
}
.mockup-card-whats {
  top: 10%;
  right: -10%;
  animation: floaty 5s ease-in-out infinite;
}
.mockup-card-stats {
  bottom: 8%;
  left: -12%;
  animation: floaty 4.5s ease-in-out infinite .6s;
}
@media (min-width: 1024px) {
  .mockup-card { display: block; }
  .mockup-stack { min-height: 520px; max-width: 360px; }
  .mockup-phone { max-width: 320px; }
}

/* Animação fade-in + translateY para mockups */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(24px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.reveal-up { animation: revealUp .6s cubic-bezier(.4, 0, .2, 1) both; }

/* ===== Feedback visual extra =====
   Sutil pulse vermelho para alertas de perda de clientes. */
@keyframes pulseWarn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, .35); }
  50%      { box-shadow: 0 0 0 8px rgba(244, 63, 94, 0); }
}
.pulse-warn { animation: pulseWarn 2.4s ease-in-out infinite; }

/* Destaque no card "Quase compraram" quando tem valor */
@keyframes pulseAmber {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .25); }
  50%      { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}
.pulse-amber { animation: pulseAmber 2.6s ease-in-out infinite; }

/* Tap/active feedback universal para qualquer <button> sem classe especial */
button:not(.btn):not(.hamburger-btn):active { transform: scale(.97); transition: transform .08s ease; }

/* ===== Sequência de mockups realistas (Catálogo → Carrinho → WhatsApp) =====
   Mobile: empilhados verticalmente, centralizados, cada um com no máx 300px.
   Desktop (lg+): alinhados em linha com setas conectando, levemente escalonados. */
.mockup-sequence {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: .5rem 0;
}
.phone-mock {
  width: 100%;
  max-width: 300px;
  background: #fff;
  border-radius: 1.25rem; /* rounded-2xl */
  box-shadow:
    0 20px 50px -15px rgba(15, 23, 42, .25),
    0 8px 20px -10px rgba(16, 185, 129, .12),
    0 0 0 1px rgba(15, 23, 42, .04);
  overflow: hidden;
  position: relative;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease;
}
.phone-mock:hover {
  transform: translateY(-4px);
  box-shadow:
    0 28px 60px -18px rgba(15, 23, 42, .3),
    0 10px 24px -10px rgba(16, 185, 129, .2),
    0 0 0 1px rgba(15, 23, 42, .04);
}
.phone-mock-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.phone-mock-bar-whats {
  background: linear-gradient(90deg, #075e54, #128c7e);
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  padding: .6rem .75rem;
}
.phone-mock-dots {
  display: inline-flex;
  gap: 4px;
}
.phone-mock-dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: block;
}
.phone-mock-url {
  flex: 1;
  text-align: center;
  color: #64748b;
  font-size: 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phone-mock-screen {
  background: linear-gradient(180deg, #f8fffb 0%, #ffffff 100%);
  min-height: 320px;
}
.phone-mock-whats-bg {
  background:
    linear-gradient(rgba(230, 221, 212, .85), rgba(230, 221, 212, .85)),
    repeating-linear-gradient(45deg, #e6ddd4 0 4px, #d9d0c5 4px 8px);
  min-height: 320px;
}
.phone-mock-label {
  position: absolute;
  top: .5rem;
  right: .5rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(11, 15, 13, .88);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: .3rem .55rem;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  letter-spacing: .02em;
  z-index: 2;
}
.phone-mock-step {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand-500);
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
}

/* Conector entre mockups — setas (só aparecem no desktop em linha) */
.phone-mock-arrow {
  display: none;
  color: var(--brand-500);
  font-size: 1.25rem;
  align-self: center;
  animation: nudgeRight 1.8s ease-in-out infinite;
}
@keyframes nudgeRight {
  0%, 100% { transform: translateX(0); opacity: .55; }
  50%      { transform: translateX(4px); opacity: 1; }
}

/* Mobile: sequência vertical, sem setas entre telas (empilhamento suficiente) */
@media (min-width: 1024px) {
  .mockup-sequence {
    max-width: 1100px;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem 0;
  }
  .phone-mock { max-width: 280px; }
  .phone-mock-arrow { display: inline-flex; padding-top: 10rem; }
  /* Leve escalonamento visual para dar profundidade */
  .phone-mock.phase-catalog { transform: translateY(8px); }
  .phone-mock.phase-cart    { transform: translateY(-6px); }
  .phone-mock.phase-whats   { transform: translateY(12px); }
  .phone-mock.phase-catalog:hover,
  .phone-mock.phase-cart:hover,
  .phone-mock.phase-whats:hover { transform: translateY(-4px); }
}

/* ===== Notificação leve em tempo real (seção "Em tempo real") ===== */
.notif-mock {
  width: 100%;
  max-width: 260px;
  background: #fff;
  border-radius: 1rem;
  box-shadow:
    0 14px 36px -12px rgba(15, 23, 42, .18),
    0 4px 10px -4px rgba(16, 185, 129, .15),
    0 0 0 1px rgba(15, 23, 42, .04);
  overflow: hidden;
  padding: .85rem 1rem;
  animation: pop-in .5s ease-out both, notifPulse 2.6s ease-in-out infinite;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease;
}
.notif-mock:hover {
  transform: translateY(-3px);
  box-shadow:
    0 20px 44px -12px rgba(15, 23, 42, .22),
    0 6px 12px -4px rgba(16, 185, 129, .2),
    0 0 0 1px rgba(15, 23, 42, .05);
}
.notif-mock-header {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .7rem;
  font-weight: 700;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .55rem;
}
.notif-mock-header .live-dot { flex-shrink: 0; }
.notif-mock-time {
  margin-left: auto;
  color: #94a3b8;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: .68rem;
}
.notif-mock-body {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}
.notif-mock-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #047857);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .85rem;
  flex-shrink: 0;
}
.notif-mock-content {
  min-width: 0;
  flex: 1;
}
.notif-mock-title {
  font-size: .82rem;
  line-height: 1.3;
  color: #0f172a;
}
.notif-mock-title strong { font-weight: 700; }
.notif-mock-meta {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .7rem;
  color: #64748b;
  margin-top: .25rem;
}
@keyframes notifPulse {
  0%, 100% { box-shadow: 0 14px 36px -12px rgba(15, 23, 42, .18), 0 0 0 0 rgba(16, 185, 129, .35), 0 0 0 1px rgba(15, 23, 42, .04); }
  50%      { box-shadow: 0 14px 36px -12px rgba(15, 23, 42, .18), 0 0 0 10px rgba(16, 185, 129, 0),   0 0 0 1px rgba(15, 23, 42, .04); }
}

/* ===== Prevenção de overflow horizontal ===== */
html, body { overflow-x: hidden; max-width: 100%; }

/* ===== Animações ===== */
@keyframes floaty { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
.animate-floaty { animation: floaty 4s ease-in-out infinite; }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(.98) } to { opacity: 1; transform: none } }
.pop-in { animation: pop-in .5s ease-out both; }
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(16,185,129,.45); }
  70% { box-shadow: 0 0 0 14px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.pulse-ring { animation: pulse-ring 2s infinite; }

/* ===== Scrollbar suave ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

/* ===== Inputs ===== */
.input {
  width: 100%; padding: .85rem 1rem; border-radius: 12px;
  border: 1px solid var(--line); background: #fff;
  font-size: 1rem; color: var(--ink-900);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus {
  outline: none; border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(16,185,129,.15);
}
.label { font-size: .85rem; font-weight: 600; color: #334155; margin-bottom: .4rem; display: block; }

/* ===== Progress bar (onboarding) ===== */
.progress-bar {
  height: 6px; background: #e5e7eb; border-radius: 999px; overflow: hidden;
}
.progress-bar > div {
  height: 100%; background: linear-gradient(90deg,#10b981,#34d399);
  transition: width .3s ease;
}

/* ===== Floating CTA (catálogo) ===== */
.cart-fab {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: #10b981; color: #fff; font-weight: 700;
  padding: .9rem 1.4rem; border-radius: 999px;
  box-shadow: 0 18px 40px -10px rgba(16,185,129,.55);
  display: inline-flex; align-items: center; gap: .6rem;
  z-index: 50; border: none; cursor: pointer;
}
.cart-fab .count {
  background: #fff; color: #065f46; font-weight: 800;
  border-radius: 999px; min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem;
}

/* ===== Modal ===== */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(2,6,12,.55);
  backdrop-filter: blur(4px); z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
}
.modal-sheet {
  background: #fff; width: 100%; max-width: 560px;
  border-radius: 20px 20px 0 0; padding: 1.25rem;
  max-height: 92vh; overflow: auto;
}
@media (min-width: 640px) {
  .modal-backdrop { align-items: center; }
  .modal-sheet { border-radius: 20px; }
}

/* ===== Utilidades ===== */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }
.divider { height: 1px; background: var(--line); width: 100%; }

/* ===== Wordmark (marca em TEXTO — sem imagem) ===== */
.brand-wordmark {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  display: inline-block;
  transition: transform .3s ease, opacity .3s ease;
}
.brand-wordmark:hover { opacity: .9; }

/* ===== Reveal on scroll (fade + slide-up) ===== */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .animate-floaty, .pulse-ring, .pop-in { animation: none !important; }
}

/* ===== Tilt-on-hover leve (cards premium) ===== */
.card-premium { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-premium:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -20px rgba(15,23,42,.25); border-color: #bbf7d0; }

/* ===== Proof / notificações animadas ===== */
@keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
.slide-in-right { animation: slideInRight .5s ease-out both; }
@keyframes tickerUp { 0%{opacity:0;transform:translateY(18px)} 10%,85%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(-18px)} }
.ticker-item { animation: tickerUp 4s ease-in-out infinite; }

/* Dot de notificação (live) */
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 999px; background: #10b981; display: inline-block; }
.live-dot::after {
  content: ''; position: absolute; inset: -4px; border-radius: 999px;
  background: rgba(16,185,129,.35); animation: pulse-ring 1.6s infinite;
}

/* ===== Contagem animada placeholder ===== */
.count-up { font-variant-numeric: tabular-nums; }

/* ===== Accent (alternativa azul) ===== */
.btn-accent {
  background: linear-gradient(180deg, #2563eb, #1d4ed8);
  color: #fff; padding: .85rem 1.25rem;
  box-shadow: 0 10px 24px -12px rgba(37,99,235,.55), inset 0 1px 0 rgba(255,255,255,.25);
  border-radius: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  transition: transform .15s ease, box-shadow .2s ease;
}
.btn-accent:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(37,99,235,.65); }

/* ===== Mockup "notebook" (prova visual) ===== */
.browser-frame {
  border-radius: 14px; background: #ffffff; border: 1px solid var(--line);
  box-shadow: 0 30px 60px -20px rgba(15,23,42,.22), 0 0 0 1px rgba(15,23,42,.04);
  overflow: hidden;
}
.browser-bar {
  background: #f1f5f9; padding: .6rem .85rem; display: flex; align-items: center; gap: .4rem;
  border-bottom: 1px solid var(--line);
}
.browser-dots { display: inline-flex; gap: 6px; }
.browser-dots span { width: 10px; height: 10px; border-radius: 999px; }
.browser-url { flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 3px 10px; font-family: ui-monospace, monospace; font-size: .72rem; color: #475569; }

/* Botão bolha flutuante animada (CTA) */
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }
.bob { animation: bob 2.4s ease-in-out infinite; }

/* ===== Catálogo — produto com hover refinado ===== */
.product-card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  cursor: pointer;
}
.product-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -20px rgba(15,23,42,.22); border-color: #bbf7d0; }
.product-card .product-image { aspect-ratio: 1/1; overflow: hidden; background:#f1f5f9; }
.product-card .product-image img { width:100%; height:100%; object-fit: cover; transition: transform .4s ease; }
.product-card:hover .product-image img { transform: scale(1.05); }

/* ===== Modal slide-up animation ===== */
@keyframes modalSlideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.modal-sheet { animation: modalSlideUp .28s ease-out both; }
@keyframes modalFade { from { opacity: 0 } to { opacity: 1 } }
.modal-backdrop { animation: modalFade .2s ease-out both; }

/* ===== FAB pulse ao adicionar item ===== */
@keyframes cartBump { 0%,100% { transform: translate(-50%, 0) scale(1); } 35% { transform: translate(-50%, -4px) scale(1.06); } 70% { transform: translate(-50%, 0) scale(.98); } }
.cart-bump { animation: cartBump .45s ease-out; }

/* ===== Skeleton shimmer (opcional em grids) ===== */
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.skeleton { background: linear-gradient(90deg,#eef2f7 0%,#f8fafc 50%,#eef2f7 100%); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; }

/* ===== Microinterações globais =====
   Transições suaves (300ms) em botões, links e cards para dar sensação de produto premium. */
a, button, .btn, .sidebar-link, .pay-btn, .cat-btn, .badge-btn, .card, .card-hover, .product-card {
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.btn { transition: transform .15s ease, box-shadow .3s ease, background .3s ease, color .3s ease; }
.btn-primary:hover { transform: translateY(-1px) scale(1.01); }
.btn-primary:active { transform: translateY(0) scale(.99); }
.btn-ghost:hover { transform: translateY(-1px); }

/* Hover mais vivo em botões que somem com sidebar */
.sidebar-link:not(.locked):hover { transform: translateX(2px); }

/* Animação de "empurra suave" no hover de produtos do catálogo */
.product-card { will-change: transform; }

/* Foco acessível em elementos interativos */
a:focus-visible, button:focus-visible, .input:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

/* Badge-btn (seletor de destaque no dashboard) - estado selecionado */
.badge-btn {
  cursor: pointer;
  border: 1px solid var(--line);
}
.badge-btn:hover { border-color: var(--brand-500); }

/* Pequena animação para countup ficar legível */
.count-up { display: inline-block; font-variant-numeric: tabular-nums; }

/* ===== MOBILE-FIRST: touch targets, spacing, tipografia ===== */

/* Botões: mínimo 44px de altura clicável (padrão WCAG/Apple HIG) */
.btn { min-height: 44px; }
.btn-primary, .btn-ghost, .btn-accent { min-height: 48px; padding: .9rem 1.35rem; font-size: 1rem; }

/* Em telas muito pequenas, botões primários ocupam a largura toda e ficam mais altos */
@media (max-width: 480px) {
  .btn-primary, .btn-ghost, .btn-accent { width: 100%; padding: 1rem 1.25rem; font-size: 1.02rem; }
  /* Exceção: botões dentro de grid/flex com gap podem manter comportamento do container */
  .btn-inline, .btn.btn-inline { width: auto; }
}

/* Header sticky: no mobile, reduz a altura mas aumenta touch area dos links */
header .btn { min-height: 40px; }

/* Sidebar links: touch alvo confortável */
.sidebar-link { min-height: 44px; }

/* Inputs: altura confortável para dedos */
.input { min-height: 48px; font-size: 1rem; }

/* ===== Drawer (menu mobile) ===== */
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(2,6,12,.5);
  backdrop-filter: blur(2px); z-index: 55; opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.drawer-panel {
  position: fixed; top: 0; left: 0; bottom: 0; width: 82%; max-width: 320px;
  background: #fff; z-index: 56; transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: 18px 0 40px -10px rgba(15,23,42,.25);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.drawer-panel.open { transform: translateX(0); }

/* Hamburger button */
.hamburger-btn {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid var(--line); background: #fff;
  color: var(--ink-900); font-size: 1.1rem;
  transition: background .2s ease, transform .2s ease;
}
.hamburger-btn:hover { background: #f1f5f9; }
.hamburger-btn:active { transform: scale(.96); }

/* Impede scroll do body quando drawer está aberto */
body.drawer-open { overflow: hidden; }

/* ===== Ajustes tipográficos mobile ===== */
@media (max-width: 640px) {
  h1, .h1 { letter-spacing: -0.02em; }
  .phone-frame { width: 260px; height: 520px; border-radius: 36px; }
  .phone-screen { border-radius: 28px; }

  /* Reduz padding de cards em mobile */
  .card { border-radius: 14px; }
  .modal-sheet { padding: 1rem; }

  /* Gaps menores entre seções densas */
  section { scroll-margin-top: 64px; }
}

/* ===== Catalog: botão de adicionar maior no mobile ===== */
.product-card .add-btn {
  min-width: 40px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
}

/* ===== Cart FAB: mais proeminente no mobile ===== */
@media (max-width: 640px) {
  .cart-fab { padding: 1rem 1.4rem; font-size: 1rem; bottom: 16px; }
}

/* ===== Scroll smooth + safe-area iOS ===== */
body { padding-bottom: env(safe-area-inset-bottom); }

/* ===== Tags/badges do produto (Mais vendido, etc) — consistentes ===== */
.product-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .02em;
  padding: .28rem .55rem; border-radius: 999px;
  background: #fff; border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 2px 8px -2px rgba(15,23,42,.15);
}
.product-badge.badge-best { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.product-badge.badge-last { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.product-badge.badge-today { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }

/* ===== Dashboard: alerta de perda ===== */
.alert-loss {
  background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 100%);
  border: 1px solid #fecaca; color: #7f1d1d;
  border-radius: 14px; padding: 1rem 1.1rem;
  display: flex; align-items: flex-start; gap: .75rem;
  animation: popInSoft .4s ease-out both;
}
@keyframes popInSoft { from { opacity: 0; transform: scale(.97) } to { opacity: 1; transform: none } }
.alert-loss .alert-icon { color: #dc2626; font-size: 1.25rem; flex-shrink: 0; margin-top: 2px; }

.alert-empty {
  background: linear-gradient(135deg, var(--brand-50) 0%, #fff 100%);
  border: 2px dashed var(--brand-200, #a7f3d0);
  border-radius: 18px; padding: 2rem 1.25rem;
  text-align: center;
}

/* ===== Plano Master em destaque (visual) ===== */
.plan-master-highlight {
  position: relative;
  background: linear-gradient(180deg, #0b0f0d 0%, #111817 100%);
  color: #fff;
  transform: none;
}
@media (min-width: 768px) {
  .plan-master-highlight { transform: scale(1.03); z-index: 5; }
}
.plan-master-highlight .text-slate-600 { color: #94a3b8; }
.plan-master-highlight .text-slate-700 { color: #e2e8f0; }
.plan-master-highlight h3 { color: #fff; }
.plan-master-highlight .chip { background: var(--brand-500); color: #fff; border-color: var(--brand-600); }

/* ===== Top-bar mobile: botão compacto ===== */
@media (max-width: 480px) {
  header .btn { font-size: .85rem; padding: .55rem .85rem; }
}

/* Utilitário: esconder elementos apenas no mobile/desktop (complementa Tailwind) */
.only-mobile { display: none; }
.only-desktop { display: inline-flex; }
@media (max-width: 768px) {
  .only-mobile { display: inline-flex; }
  .only-desktop { display: none; }
}

/* ===== MELHORIAS v2 ===== */

/* Barra de anúncio (urgência) */
.announce-bar {
  background: linear-gradient(90deg, #0b0f0d 0%, #111817 100%);
  color: #d1fae5;
  text-align: center;
  font-size: .78rem;
  font-weight: 600;
  padding: .55rem 1rem;
  letter-spacing: .01em;
  display: flex; align-items: center; justify-content: center;
  gap: .5rem; flex-wrap: wrap;
}
.announce-bar a {
  color: #10b981; text-decoration: underline; font-weight: 700;
  white-space: nowrap; transition: color .2s;
}
.announce-bar a:hover { color: #34d399; }
.countdown-unit {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(16,185,129,.18); border: 1px solid rgba(16,185,129,.3);
  border-radius: 5px; padding: .1rem .4rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800; font-size: .82rem;
  min-width: 2ch;
}

/* ===== Testimonials ===== */
.testi-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: 0 4px 16px -6px rgba(15,23,42,.08);
  display: flex; flex-direction: column; gap: .75rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.testi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -10px rgba(16,185,129,.2);
  border-color: #a7f3d0;
}
.testi-stars { color: #f59e0b; font-size: .9rem; letter-spacing: .1rem; }
.testi-quote { color: #334155; font-size: .95rem; line-height: 1.65; font-style: italic; flex: 1; }
.testi-author { display: flex; align-items: center; gap: .75rem; border-top: 1px solid var(--line); padding-top: .75rem; }
.testi-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: .85rem;
  color: #fff; flex-shrink: 0;
}
.testi-name { font-weight: 700; font-size: .85rem; color: var(--ink-900); line-height: 1.2; }
.testi-role { font-size: .75rem; color: var(--text-2); }
.testi-result {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--brand-50); color: var(--brand-700);
  border: 1px solid #a7f3d0; border-radius: 999px;
  font-size: .7rem; font-weight: 700; padding: .2rem .6rem;
}

/* ===== Dashboard: card de ação do dia ===== */
.action-today {
  border-radius: 18px;
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #10b981, #059669) border-box;
  padding: 1.25rem 1.5rem;
  display: flex; align-items: flex-start; gap: 1rem;
  box-shadow: 0 4px 20px -8px rgba(16,185,129,.3);
  animation: popInSoft .35s ease-out both;
  margin-bottom: 1.25rem;
}
.action-today-icon {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff; display: grid; place-items: center; font-size: 1.2rem;
}
.action-today-body { flex: 1; min-width: 0; }
.action-today-title {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand-600); margin-bottom: .25rem;
}
.action-today-text {
  font-size: 1rem; font-weight: 700; color: var(--ink-900); line-height: 1.4;
}
.action-today-sub {
  font-size: .8rem; color: var(--text-2); margin-top: .25rem; line-height: 1.5;
}
.action-today-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .75rem;
  background: linear-gradient(180deg, #10b981, #059669);
  color: #fff; border-radius: 10px;
  padding: .55rem 1rem; font-size: .82rem; font-weight: 700;
  box-shadow: 0 4px 12px -4px rgba(16,185,129,.45);
  transition: transform .15s ease, box-shadow .2s ease;
}
.action-today-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 16px -6px rgba(16,185,129,.55); }

/* ===== Shop: botão "Comprar" com label no card ===== */
.product-card .add-btn-v2 {
  display: inline-flex; align-items: center; gap: .35rem;
  background: linear-gradient(180deg, #10b981, #059669);
  color: #fff; border-radius: 10px;
  padding: .4rem .7rem; font-size: .75rem; font-weight: 700;
  box-shadow: 0 4px 10px -4px rgba(16,185,129,.4);
  transition: transform .15s ease, box-shadow .2s ease;
  min-height: 36px;
}
.product-card .add-btn-v2:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -4px rgba(16,185,129,.5); }
.product-card .add-btn-v2:active { transform: scale(.97); }

/* ===== Pulse suave no card de ação ===== */
@keyframes borderPulse {
  0%, 100% { box-shadow: 0 4px 20px -8px rgba(16,185,129,.3); }
  50% { box-shadow: 0 4px 28px -4px rgba(16,185,129,.5); }
}
.action-today.pulse-action { animation: borderPulse 2.5s ease-in-out infinite; }

/* ============================================================
   ── [DASHBOARD PRO · MODULES 1-5] BEGIN ──
   Additions only. No existing rule modified.
   ============================================================ */

/* ── [MODULE 1 · METRIC TRENDS] ── */
.vz-trend { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; line-height:1; }
.vz-trend-up   { color:#047857; background:#ecfdf5; }
.vz-trend-down { color:#be123c; background:#fff1f2; }
.vz-trend-flat { color:#64748b; background:#f1f5f9; }
.vz-metric-sub { font-size:12px; color:#64748b; margin-top:6px; line-height:1.35; }
.vz-conv-good  { color:#047857; }
.vz-conv-mid   { color:#b45309; }
.vz-conv-bad   { color:#be123c; }
.vz-help-ico { display:inline-block; margin-left:4px; color:#94a3b8; cursor:help; font-size:12px; }

/* ── [MODULE 2 · 30-DAY CHART] ── */
.vz-chart-scroll { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
.vz-chart-scroll::-webkit-scrollbar { height:6px; }
.vz-chart-scroll::-webkit-scrollbar-thumb { background:#e2e8f0; border-radius:3px; }
#chart-bars { min-width:100%; }
#chart-bars.vz-chart-30 { min-width: 760px; gap:4px; }
#chart-bars.vz-chart-30 > div { min-width:22px; }
.vz-chart-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:144px; text-align:center; color:#64748b; padding:0 16px; }
.vz-chart-empty i { font-size:28px; color:#cbd5e1; margin-bottom:8px; }

/* ── [MODULE 3 · SIDEBAR ENHANCED] ── */
.sidebar-link.active { position:relative; }
.sidebar-link.active::before {
  content:""; position:absolute; left:-4px; top:10%; bottom:10%; width:3px;
  background:#10b981; border-radius:2px;
}
.vz-nav-section-title {
  padding:16px 8px 6px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; color:#94a3b8;
}

/* ── [MODULE 4 · PROFILE PANEL] ── */
.vz-logo-dropzone {
  width:120px; height:120px; border-radius:50%;
  border:2px dashed #e2e8f0; cursor:pointer; position:relative;
  display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
  transition:border-color .2s ease, transform .2s ease;
}
.vz-logo-dropzone:hover { border-color:#10b981; transform:translateY(-1px); }
.vz-logo-dropzone.vz-drag { border-color:#10b981; background:#ecfdf5; }
.vz-logo-dropzone img { width:100%; height:100%; object-fit:cover; display:block; }
.vz-logo-dropzone .vz-logo-placeholder {
  color:#10b981; font-size:36px; display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
}
.vz-logo-dropzone .vz-logo-edit-pill {
  position:absolute; bottom:4px; right:4px;
  background:#10b981; color:#fff; border-radius:999px;
  width:30px; height:30px; display:grid; place-items:center;
  box-shadow:0 4px 10px -2px rgba(16,185,129,.5); font-size:12px;
}
.vz-counter-char { font-size:11px; color:#94a3b8; text-align:right; margin-top:4px; font-variant-numeric:tabular-nums; }
.vz-counter-char.vz-counter-warn { color:#b45309; font-weight:600; }
.vz-danger-zone summary {
  cursor:pointer; padding:12px 16px; border:1px solid #fecaca; border-radius:12px;
  background:#fef2f2; color:#991b1b; font-weight:600; font-size:14px;
  display:flex; align-items:center; gap:8px; list-style:none;
}
.vz-danger-zone summary::-webkit-details-marker { display:none; }
.vz-danger-zone[open] summary { border-bottom-left-radius:0; border-bottom-right-radius:0; }
.vz-danger-zone .vz-danger-body {
  border:1px solid #fecaca; border-top:0;
  border-bottom-left-radius:12px; border-bottom-right-radius:12px;
  padding:16px; background:#fff;
}
.vz-btn-danger {
  background:#dc2626; color:#fff; font-weight:700; border-radius:10px;
  padding:10px 16px; font-size:14px; transition:background .2s ease;
  display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer;
}
.vz-btn-danger:hover { background:#b91c1c; }

/* ── [MODULE 5 · INSIGHT ENGINE] ── */
.vz-conv-insight {
  margin-top:16px; padding:14px 16px; border-radius:14px;
  border:1px solid #e2e8f0; background:#fff; font-size:14px; color:#334155;
  display:flex; gap:12px; align-items:flex-start;
}
.vz-conv-insight.vz-ci-bad  { border-color:#fecaca; background:linear-gradient(135deg,#fef2f2,#fff); color:#7f1d1d; }
.vz-conv-insight.vz-ci-mid  { border-color:#fde68a; background:linear-gradient(135deg,#fffbeb,#fff); color:#78350f; }
.vz-conv-insight.vz-ci-good { border-color:#a7f3d0; background:linear-gradient(135deg,#ecfdf5,#fff); color:#064e3b; }
.vz-conv-insight .vz-ci-icon { flex-shrink:0; width:32px; height:32px; border-radius:8px; display:grid; place-items:center; background:rgba(255,255,255,.6); }

.vz-best-card {
  margin-top:16px; padding:16px; border-radius:14px;
  background:linear-gradient(135deg,#ecfdf5,#fff);
  border:1px solid #a7f3d0;
  display:flex; gap:14px; align-items:center;
}
.vz-best-card .vz-best-thumb {
  width:64px; height:64px; border-radius:12px; object-fit:cover; flex-shrink:0;
  background:#d1fae5; display:grid; place-items:center; color:#047857; font-size:22px;
}
.vz-best-card .vz-best-label {
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#047857;
}
.vz-best-card .vz-best-name  { font-weight:800; color:#0b0f0d; margin-top:2px; }
.vz-best-card .vz-best-price { font-weight:900; color:#047857; font-size:18px; margin-top:4px; }

.vz-goal-card {
  margin-top:16px; padding:16px; border-radius:14px;
  border:1px solid #e2e8f0; background:#fff;
}
.vz-goal-head {
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;
}
.vz-goal-title { font-weight:700; color:#0b0f0d; display:flex; align-items:center; gap:8px; }
.vz-goal-edit  {
  background:transparent; border:0; color:#10b981; cursor:pointer; font-size:13px;
  padding:4px 8px; border-radius:6px;
}
.vz-goal-edit:hover { background:#ecfdf5; }
.vz-goal-bar {
  height:10px; background:#f1f5f9; border-radius:999px; overflow:hidden; margin:8px 0;
}
.vz-goal-bar > div {
  height:100%; background:linear-gradient(90deg,#10b981,#059669); border-radius:999px;
  transition:width .8s cubic-bezier(.2,.8,.2,1);
}
.vz-goal-bar > div.vz-goal-done { background:linear-gradient(90deg,#059669,#047857); }
.vz-goal-sub { font-size:13px; color:#64748b; }
.vz-goal-sub strong { color:#0b0f0d; }
.vz-goal-edit-row {
  display:flex; gap:6px; align-items:center; margin-top:6px;
}
.vz-goal-edit-row input {
  width:80px; padding:6px 10px; border:1px solid #e2e8f0; border-radius:8px; font-size:14px;
}

/* ============================================================
   ── [DASHBOARD PRO · MODULES 1-5] END ──
   ============================================================ */