/* Salll Shopper Experience
   Tema compartilhado pelas demonstracoes interativas em /assets/experiencias/.
   Claro por padrao (Experiencias v2). O visual escuro original sobrevive como tema
   sazonal: document.documentElement.dataset.xpTema = 'black' (via ?tema=black).
   Dono: Agente A — nao editar sem atualizar tambem raspadinha/roleta-premios/monte-seu-kit. */
:root {
  --bg: #f6f4ef;
  --surf: #ffffff;
  --surf-2: #f3f0ea;
  --line: rgba(23, 23, 27, .10);
  --line-h: rgba(23, 23, 27, .18);
  --ink: #17171b;
  --muted: rgba(23, 23, 27, .64);
  --faint: rgba(23, 23, 27, .42);
  /* familia laranja: mantida vibrante (fundos/gradientes/botoes, sempre com texto proprio
     escuro) — nao varia por tema. Texto solto sobre o fundo da pagina usa --champ-text /
     --champ-hi-text, que SIM trocam por tema (ver bloco black abaixo). */
  --champ: #fe7021;
  --champ-hi: #fba839;
  --champ-deep: #e95619;
  --champ-text: #b8430c;
  --champ-hi-text: #b8430c;
  --gold-ink: #231207;
  --ok: #0e7c73;
  --warn: #b7791f;
  --warn-text: #8a5c17;
  --err: #c62e3e;
  --premium: #fe7021;
  --select: #fba839;
  --performance: #7f61a4;
  --essencial: #5e50c1;
  --sec: #7f61a4;
  --sec-hi: #a991c5;
  --sec-deep: #5e50c1;
  --radius: 16px;
  --gold-grad: linear-gradient(118deg, #fba839 0%, #fe7021 54%, #e95e28 100%);
  --serif: 'Outfit', 'Inter', system-ui, sans-serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* rgb "puro" do tom de superficie, para compor rgba() de overlays sutis (chips, contadores,
     trilhos) sem duplicar regra por tema: rgba(var(--tint), .08) etc. */
  --tint: 23, 23, 27;
}

[data-xp-tema="black"] {
  --bg: #0e0e10;
  --surf: #17171b;
  --surf-2: #202027;
  --line: rgba(255, 255, 255, .12);
  --line-h: rgba(255, 255, 255, .2);
  --ink: #f8f7f4;
  --muted: rgba(248, 247, 244, .68);
  --faint: rgba(248, 247, 244, .46);
  --champ-text: var(--champ);
  --champ-hi-text: var(--champ-hi);
  --ok: #17a398;
  --warn: #fba839;
  --warn-text: var(--warn);
  --err: #e4384a;
  --tint: 255, 255, 255;
}

html {
  color-scheme: light;
  background: var(--bg);
}

[data-xp-tema="black"] {
  color-scheme: dark;
}

html::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  z-index: 9999;
  height: 4px;
  pointer-events: none;
  background: linear-gradient(90deg,
    #fe7021 0 24%,
    #fba839 24% 43%,
    #e4384a 43% 59%,
    #7f61a4 59% 78%,
    #5e50c1 78% 100%);
}

body {
  font-family: var(--sans);
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 10% -10%, rgba(254, 112, 33, .07), transparent 34rem),
    radial-gradient(circle at 95% 18%, rgba(127, 97, 164, .06), transparent 32rem),
    linear-gradient(rgba(23, 23, 27, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 23, 27, .028) 1px, transparent 1px);
  background-size: auto, auto, 34px 34px, 34px 34px;
}

[data-xp-tema="black"] body {
  background-color: #0e0e10;
  background-image:
    radial-gradient(circle at 10% -10%, rgba(254, 112, 33, .18), transparent 34rem),
    radial-gradient(circle at 95% 18%, rgba(127, 97, 164, .16), transparent 32rem),
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: auto, auto, 34px 34px, 34px 34px;
}

::selection {
  color: #0e0e10;
  background: #fba839;
}

:focus-visible {
  outline-color: #b8430c !important;
}

[data-xp-tema="black"] :focus-visible {
  outline-color: #fe7021 !important;
}

.wm,
.wm-top,
.wm-l,
.wm-m {
  color: var(--ink) !important;
  font-family: 'Outfit', var(--sans) !important;
  font-style: normal !important;
  font-weight: 900 !important;
  letter-spacing: -.045em !important;
  line-height: .82 !important;
  text-transform: lowercase !important;
}

.wm-sub,
.wm-bot,
.wm-s {
  margin-top: 6px !important;
  color: var(--muted) !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

h1,
h2,
h3,
.title,
.ttl {
  font-family: 'Outfit', var(--sans) !important;
  font-style: normal !important;
  font-weight: 800 !important;
  letter-spacing: -.035em !important;
}

h1 em,
h2 em,
h3 em,
.title em,
.ttl em {
  color: var(--champ-text) !important;
  font-family: inherit !important;
  font-style: normal !important;
}

[data-xp-tema="black"] h1 em,
[data-xp-tema="black"] h2 em,
[data-xp-tema="black"] h3 em,
[data-xp-tema="black"] .title em,
[data-xp-tema="black"] .ttl em {
  color: #fe7021 !important;
}

.seal,
.pill-bf,
.bds {
  border-color: rgba(184, 67, 12, .35) !important;
  border-radius: 999px !important;
  color: var(--champ-hi-text) !important;
  background: rgba(254, 112, 33, .10) !important;
  box-shadow: none;
  font-family: 'Space Mono', monospace !important;
  letter-spacing: .08em !important;
}

[data-xp-tema="black"] .seal,
[data-xp-tema="black"] .pill-bf,
[data-xp-tema="black"] .bds {
  border-color: rgba(254, 112, 33, .48) !important;
  color: #ffd4bd !important;
  background: rgba(254, 112, 33, .12) !important;
  box-shadow: inset 0 0 0 1px rgba(251, 168, 57, .06);
}

.card,
.panel,
.sheet,
.modal,
.product,
.prod,
.ticket,
.quiz-card,
.chat {
  border-color: var(--line) !important;
}

[data-xp-tema="black"] .card,
[data-xp-tema="black"] .panel,
[data-xp-tema="black"] .sheet,
[data-xp-tema="black"] .modal,
[data-xp-tema="black"] .product,
[data-xp-tema="black"] .prod,
[data-xp-tema="black"] .ticket,
[data-xp-tema="black"] .quiz-card,
[data-xp-tema="black"] .chat {
  border-color: rgba(255, 255, 255, .12) !important;
}

button.primary,
.btn-primary,
.btn.primary,
.btn-p,
.cta,
.cta-main,
.btn-go,
.spin-btn {
  border-color: transparent !important;
  border-radius: 11px !important;
  color: #231207 !important;
  background: var(--gold-grad) !important;
  box-shadow: 0 12px 34px rgba(254, 112, 33, .18) !important;
  font-family: 'Outfit', var(--sans) !important;
  font-weight: 800 !important;
}

button.primary:hover,
.btn-primary:hover,
.btn.primary:hover,
.btn-p:hover,
.cta:hover,
.cta-main:hover,
.btn-go:hover,
.spin-btn:hover {
  filter: brightness(1.07) saturate(1.04);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}