/* =========================================================
   TEMA MARKETPLACES — claro, laranja, venda
   Carregado depois de style.css. Troca os tokens para fundo
   claro e devolve o navy em blocos marcados com .sec-dark.
   ========================================================= */
body.theme-mkt {
  --bg: #F5F7FA;
  --bg-2: #EEF1F5;
  --surface: #FFFFFF;
  --surface-2: #F7F8FA;
  --glass: rgba(10, 14, 26, 0.035);
  --line: rgba(10, 14, 26, 0.09);
  --line-2: rgba(10, 14, 26, 0.16);
  --text: #0F1626;
  --muted: #5B6577;
  --dim: #8A94A6;
  --t0: #2B3547;
  --t1: #3A4557;
  --t2: #4A5568;
  --t3: #5B6577;
  --white: #0F1626;
  --heading: #0A0E1A;
  --well: #F3F5F8;
  --well-2: #F3F5F8;
  --node: #fff;
  --metal-grad: linear-gradient(176deg, #0A0E1A 8%, #2B3547 48%, #0A0E1A 92%);
  --sheen-grad: linear-gradient(105deg, transparent 40%, rgba(255, 181, 71, .85) 50%, transparent 60%);
  --teal-glow: rgba(255, 138, 61, 0.35);
  --teal-soft: rgba(255, 181, 71, 0.12);
  --acc: var(--amber);
  --acc-2: var(--amber-2);
  --acc-glow: var(--amber-glow);
  --acc-soft: var(--amber-soft);
  --acc-ink: #1A0E00;
  background:
    radial-gradient(1100px 700px at 85% -10%, rgba(255, 181, 71, .22), transparent 60%),
    radial-gradient(800px 500px at -10% 30%, rgba(255, 94, 91, .10), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  color: var(--text);
}
body.theme-mkt::after { opacity: .035; }

/* blocos que voltam ao navy, para dar ritmo */
.theme-mkt .sec-dark {
  --bg: #070B14;
  --bg-2: #0A0E1A;
  --surface: #0F1524;
  --surface-2: #131A2C;
  --glass: rgba(255, 255, 255, 0.035);
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --text: #E6EAF0;
  --muted: #8A94A6;
  --dim: #5B6577;
  --t0: #C3CBD6;
  --t1: #B7C0CD;
  --t2: #AEB8C6;
  --t3: #A3ADBB;
  --white: #fff;
  --heading: #F2F5F8;
  --well: rgba(7, 11, 20, .5);
  --well-2: rgba(7, 11, 20, .6);
  --node: #0B111F;
  --metal-grad: linear-gradient(176deg, #FFFFFF 8%, #E4E9EF 34%, #8E9AA7 58%, #D9E0E7 78%, #F7F9FB 96%);
  --sheen-grad: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .95) 50%, transparent 60%);
  color: var(--text);
  background:
    radial-gradient(900px 500px at 90% 0%, rgba(255, 181, 71, .14), transparent 60%),
    linear-gradient(180deg, #0A0E1A 0%, #070B14 100%);
}
.theme-mkt .sec-dark .glass {
  background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012) 50%), var(--surface);
  box-shadow: none;
}
.theme-mkt .sec-dark .btn-ghost { background: var(--glass); }

/* nav clara */
.theme-mkt .nav.is-scrolled .nav-inner {
  background: rgba(255, 255, 255, .78);
  border-color: var(--line);
  box-shadow: 0 10px 40px -20px rgba(10, 14, 26, .25);
}
.theme-mkt .nav-links a:hover { color: var(--text); background: rgba(10, 14, 26, .05); }
.theme-mkt .nav-other { color: var(--muted); border-left: 1px solid var(--line); margin-left: 8px; padding-left: 18px; }

/* botões */
.theme-mkt .btn-teal {
  background: linear-gradient(135deg, var(--amber), var(--amber-2));
  color: #1A0E00;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 12px 30px -10px var(--amber-glow);
}
.theme-mkt .btn-teal:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .3) inset, 0 18px 40px -8px var(--amber-glow); }
.theme-mkt .btn-ghost { background: #fff; border-color: var(--line-2); }
.theme-mkt .btn-ghost:hover { border-color: var(--amber-2); }
.theme-mkt .wa-float { background: #25D366; color: #fff; }

/* cards claros com sombra em vez de vidro */
.theme-mkt .glass {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(10, 14, 26, .04), 0 28px 60px -36px rgba(10, 14, 26, .35);
}
.theme-mkt .tile:hover { box-shadow: 0 1px 2px rgba(10, 14, 26, .04), 0 36px 70px -34px rgba(255, 138, 61, .55); }
.theme-mkt .track .tile .ico { background: linear-gradient(135deg, rgba(255, 181, 71, .25), rgba(255, 138, 61, .15)); color: #C2410C; border-color: rgba(255, 138, 61, .35); }
.theme-mkt .tag.sys { color: #5B6577; }
.theme-mkt .tag.int { color: #2F6FD6; }
.theme-mkt .tag.ia { color: #0E9C8C; }
.theme-mkt .sec-dark .tag.sys { color: var(--t-sys); }
.theme-mkt .sec-dark .tag.int { color: var(--t-int); }
.theme-mkt .sec-dark .tag.ia { color: var(--t-ia); }
.theme-mkt .ad-row.before small { color: #D04848; }
.theme-mkt .ad-row.after small { color: #C2410C; }
.theme-mkt .kpi em { color: #C2410C; }
.theme-mkt .channel .bar { background: rgba(10, 14, 26, .07); }
.theme-mkt .channel .bar span { background: var(--c, var(--amber)); }
.theme-mkt .channel .name { color: var(--t0); }
.theme-mkt .panel { box-shadow: 0 1px 2px rgba(10, 14, 26, .04), 0 50px 100px -50px rgba(255, 138, 61, .55); }
.theme-mkt .panel-tag { color: var(--muted); }
.theme-mkt .mini-prices .bar { background: rgba(10, 14, 26, .07); }

/* cabeçalho: mais agressivo */
.theme-mkt .track-hero { padding-top: clamp(130px, 14vw, 190px); }
.theme-mkt .track-hero::before { background: radial-gradient(circle, rgba(255, 181, 71, .55), transparent 65%); filter: blur(90px); }
.theme-mkt .track-hero::after { background: radial-gradient(circle, rgba(255, 94, 91, .28), transparent 65%); }
.theme-mkt .track-hero .bignum { -webkit-text-stroke: 1px rgba(10, 14, 26, .08); }
.theme-mkt .hero-h { font-size: clamp(54px, 7vw, 118px); }
.theme-mkt .hi { background: linear-gradient(92deg, #FF8A3D, #FF5E5B); -webkit-background-clip: text; background-clip: text; }
.hero-proof-m { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 28px; font-size: 14px; color: var(--muted); }
.hero-proof-m b { color: var(--text); font-weight: 800; }
.hero-proof-m span { display: inline-flex; align-items: center; gap: 8px; }
.hero-proof-m span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: linear-gradient(135deg, var(--amber), var(--amber-2)); transform: rotate(45deg); }
.theme-mkt .track-hero .kpi { background: #F7F8FA; }

/* faixa laranja encosta no bloco navy dos marketplaces */
.theme-mkt .kw-band { margin-bottom: -28px; box-shadow: 0 30px 60px -30px rgba(255, 138, 61, .7); }
.theme-mkt .band-light.sec-dark { padding-top: clamp(110px, 12vw, 170px); }
.theme-mkt .band-light.sec-dark::before { background: radial-gradient(circle, rgba(255, 181, 71, .25), transparent 65%); }
.theme-mkt .band-light.sec-dark::after { background: radial-gradient(circle, rgba(255, 94, 91, .16), transparent 65%); }
.theme-mkt .band-light.sec-dark .eyebrow { color: var(--muted); }
.theme-mkt .band-light.sec-dark .lead { color: var(--t1); }
.theme-mkt .band-light.sec-dark .display.metal { background: var(--metal-grad); -webkit-background-clip: text; background-clip: text; }
.theme-mkt .mkt { box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 30px 60px -30px rgba(0, 0, 0, .7); }
.theme-mkt .mkt.mkt-dark { border-color: rgba(255, 181, 71, .35); }

/* passos no navy */
.theme-mkt .sec-dark .step .dot { box-shadow: 0 0 0 6px #0A0E1A; }

/* formulário claro */
.theme-mkt .field input, .theme-mkt .field textarea { background: #F7F8FA; }
.theme-mkt .field input:focus, .theme-mkt .field textarea:focus { border-color: var(--amber-2); box-shadow: 0 0 0 4px rgba(255, 138, 61, .15); }
.theme-mkt .ci { background: rgba(255, 181, 71, .14); color: #C2410C; border-color: rgba(255, 138, 61, .3); }

/* FAQ */
.theme-mkt .faq details[open] { border-color: rgba(255, 138, 61, .45); }
.theme-mkt .faq details[open] summary .pm { background: var(--amber-2); border-color: var(--amber-2); color: #1A0E00; }
.theme-mkt .faq .ans { color: var(--t2); }

/* números: banda metálica continua escura */
.theme-mkt .numbers { color: #E6EAF0; }
.theme-mkt .numbers .num span { color: #8A94A6; }
.theme-mkt .numbers .num strong { background: linear-gradient(176deg, #FFFFFF 8%, #E4E9EF 34%, #8E9AA7 58%, #D9E0E7 78%, #F7F9FB 96%); -webkit-background-clip: text; background-clip: text; }

/* CTA final no navy */
.theme-mkt .final.sec-dark .glow { background: radial-gradient(closest-side at 50% 50%, rgba(255, 138, 61, .3), transparent 72%); }

.theme-mkt .footer { background: #fff; }

@media (max-width: 760px) {
  .theme-mkt .nav-other { display: none; }
  .theme-mkt .kw-band { margin-bottom: -20px; }
}

/* logo da MC3 é clara: no tema claro vira silhueta escura (CONFIRMAR: usar versão escura oficial da logo) */
.theme-mkt .nav-logo img, .theme-mkt .footer img { filter: brightness(0) opacity(.9); }

/* títulos: sem quebra forçada quando a frase cabe; linhas equilibradas, sem palavra sozinha */
.theme-mkt .display, .theme-mkt h3, .theme-mkt h4 { text-wrap: balance; }
/* teto de 80px para frases curtas caberem numa linha só em tela larga */
.theme-mkt .sec-head h2 { font-size: clamp(40px, 6.4vw, 80px); }

/* frases em sequência no mesmo título: uma por linha, cada uma equilibrada (o <br> impede o equilíbrio) */
.linha { display: block; }

/* ---------- correções só no celular (até 760px); o computador não muda ---------- */
@media (max-width: 760px) {
  /* o painel "Visão por canal" empurrava a coluna do topo para fora da tela */
  .theme-mkt .track-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .theme-mkt .panel { padding: 16px; }
  .theme-mkt .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .theme-mkt .kpi { padding: 10px; }
  .theme-mkt .kpi strong { font-size: 21px; }
  .theme-mkt .channel { grid-template-columns: 78px minmax(0, 1fr) 36px; gap: 10px; }
}

/* celulares estreitos (até 400px): títulos de seção um pouco menores, sem uma palavra por linha */
@media (max-width: 400px) { .theme-mkt .sec-head h2 { font-size: 36px; } }

/* ---------- sem rótulos pequenos acima dos títulos (mesmo padrão da Automação) ---------- */
.theme-mkt .eyebrow { display: none; }
.theme-mkt .sec-head .display { margin-top: 0; }

/* ---------- menu do celular no tema claro ---------- */
@media (max-width: 1080px) {
  .theme-mkt .nav-burger { border-color: rgba(10, 14, 26, .12); background: rgba(255, 255, 255, .7); color: var(--text); }
  .theme-mkt .nav.menu-aberto .nav-links { background: #FFFFFF; border-color: rgba(10, 14, 26, .08); box-shadow: 0 30px 60px -24px rgba(10, 14, 26, .35); }
  .theme-mkt .nav.menu-aberto .nav-links a { color: var(--text); }
}