/* DashCoins — visual novo (protótipo, 2026-10-15). Claro, uma cor de destaque, uma fonte só. */
:root {
  --bg: #FFFFFF; --card: #FFFFFF; --ink: #0E1726; --muted: #5B6080; --line: #E3E6F1; --soft: #F2F5FA;
  --primary: #1F4FE0; --primary-2: #1A3FB8; --primary-soft: #EAF0FF; --on-primary: #FFFFFF;
  --coin: #F2A900; --ok: #0E9F6E; --ok-soft: #E6F7F0;
  --r: 16px; --r-s: 10px; --sombra: 0 1px 2px rgba(18, 20, 58, .06), 0 8px 24px -12px rgba(18, 20, 58, .18);
  --fonte: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --largura: 1180px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--fonte); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.embrulho { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { margin: 0; letter-spacing: -.02em; line-height: 1.1; }
h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; }
.sub { color: var(--muted); font-size: 17px; margin: 12px 0 0; }
.centro { text-align: center; }
.secao { padding: 88px 0; }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 12px; border: 1px solid transparent;
       font: 700 15px/1 var(--fonte); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; white-space: nowrap; }
.btn-p { background: var(--primary); color: var(--on-primary); box-shadow: 0 8px 20px -10px rgba(58, 54, 240, .8); }
.btn-p:hover { background: var(--primary-2); }
.btn-c { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn-c:hover { border-color: var(--primary); color: var(--primary); }
.btn-b { background: #fff; color: var(--primary); }
.btn:focus-visible, button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid rgba(58, 54, 240, .35); outline-offset: 2px; }

/* topo */
.topo { position: sticky; top: 0; z-index: 20; background: rgba(245, 246, 251, .97); border-bottom: 1px solid transparent; }
.topo.rolou { border-bottom-color: var(--line); }
.topo .embrulho { display: flex; align-items: center; gap: 28px; height: 72px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.marca img { width: 36px; height: 36px; border-radius: 50%; }
.marca b { color: var(--primary); }
.menu { display: flex; gap: 6px; margin-left: 12px; }
.menu a { text-decoration: none; font-weight: 600; font-size: 15px; color: var(--muted); padding: 8px 12px; border-radius: 8px; }
.menu a:hover { color: var(--ink); background: var(--soft); }
.topo .lado { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.vivo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none; padding: 8px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: #EF3D4E; box-shadow: 0 0 0 4px rgba(239, 61, 78, .15); }

/* hero */
.hero { padding: 56px 0 72px; }
.hero .embrulho { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.selo { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--primary); background: var(--primary-soft); padding: 6px 12px; border-radius: 999px; }
.hero h1 { font-size: clamp(40px, 5.2vw, 64px); font-weight: 800; margin-top: 18px; }
.hero h1 em { font-style: normal; color: var(--primary); }
.hero .sub { max-width: 520px; }

/* calculadora */
.calc { margin-top: 28px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--sombra); padding: 18px; max-width: 560px; }
.abas { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--soft); border-radius: 12px; padding: 4px; }
.abas button { height: 42px; border: 0; border-radius: 9px; background: transparent; font: 700 15px var(--fonte); color: var(--muted); cursor: pointer; }
.abas button[aria-selected="true"] { background: var(--card); color: var(--primary); box-shadow: 0 1px 3px rgba(18, 20, 58, .12); }
.campos { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: end; gap: 10px; margin-top: 16px; }
.campo label { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.caixa { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: #FBFBFE; height: 56px; padding: 0 14px; gap: 8px; }
.caixa:focus-within { border-color: var(--primary); background: #fff; }
.caixa input { flex: 1; min-width: 0; border: 0; background: transparent; font: 800 22px var(--fonte); color: var(--ink); outline: none; font-variant-numeric: tabular-nums; }
.caixa span { font-weight: 700; color: var(--muted); font-size: 14px; white-space: nowrap; }
.caixa .moeda-tc { display: inline-flex; align-items: center; gap: 6px; }
.caixa .moeda-tc img { width: 20px; height: 20px; image-rendering: pixelated; }
.troca { width: 40px; height: 40px; margin-bottom: 8px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; color: var(--primary); }
.metodos { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.metodos button { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font: 700 13.5px var(--fonte); color: var(--muted); cursor: pointer; }
.metodos button[aria-pressed="true"] { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.calc-pe { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.calc .info { font-size: 13px; color: var(--muted); }
.calc .info b { color: var(--ok); }

/* lado direito do hero: a prova (a live) */
.palco { position: relative; }
.palco .tela { border-radius: 24px; overflow: hidden; background: linear-gradient(135deg, #3A36F0, #7B5CFF); padding: 14px; box-shadow: 0 30px 60px -30px rgba(58, 54, 240, .55); }
.palco .quadro { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0F1030 center / cover no-repeat; }
.palco .quadro .tag { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 7px; background: rgba(15, 16, 48, .78); color: #fff; font: 800 12px var(--fonte); letter-spacing: .06em; padding: 7px 10px; border-radius: 999px; }
.palco .quadro .play { position: absolute; inset: 0; display: grid; place-items: center; text-decoration: none; }
.palco .quadro .play span { background: #fff; color: var(--primary); font-weight: 800; padding: 12px 18px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.palco .legenda { color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 6px 4px; font-size: 14px; }
.palco .legenda b { font-size: 16px; }
.flutua { position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sombra); padding: 12px 14px; display: flex; gap: 10px; align-items: center; font-size: 13.5px; }
.flutua .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; }
.flutua.f1 { left: -28px; bottom: 54px; } .flutua.f1 .ic { background: var(--ok-soft); color: var(--ok); }
.flutua.f2 { right: -18px; top: -18px; } .flutua.f2 .ic { background: var(--primary-soft); color: var(--primary); }
.flutua small { display: block; color: var(--muted); font-size: 12px; }

/* faixa de cotação */
.faixa { background: var(--primary); color: #fff; }
.faixa .embrulho { display: grid; grid-template-columns: auto repeat(3, 1fr) auto; align-items: center; gap: 24px; min-height: 76px; }
.faixa .rot { font-weight: 800; font-size: 16px; line-height: 1.2; }
.faixa .item { display: flex; align-items: center; gap: 10px; border-left: 1px solid rgba(255, 255, 255, .2); padding-left: 24px; }
.faixa .item img { width: 28px; height: 28px; image-rendering: pixelated; }
.faixa .item small { display: block; opacity: .75; font-size: 12.5px; }
.faixa .item b { font-size: 18px; }

/* formas de pagamento */
.alterna { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px; margin: 0 10px; vertical-align: middle; }
.alterna button { height: 40px; padding: 0 18px; border: 0; border-radius: 9px; background: transparent; font: 800 15px var(--fonte); color: var(--muted); cursor: pointer; }
.alterna button[aria-pressed="true"] { background: var(--primary); color: #fff; }
.cartoes { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 20px; margin-top: 48px; align-items: center; }
.cartao { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; text-align: center; box-shadow: var(--sombra); }
.cartao .ico { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 18px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-weight: 800; font-size: 22px; }
.cartao h3 { font-size: 22px; font-weight: 800; }
.cartao p { color: var(--muted); font-size: 15px; margin: 10px 0 0; }
.etiqueta { display: inline-block; margin-top: 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--soft); color: var(--primary); }
.cartao.destaque { background: var(--primary); color: #fff; padding: 40px 30px; border-color: var(--primary); box-shadow: 0 30px 60px -30px rgba(58, 54, 240, .7); }
.cartao.destaque .ico { background: rgba(255, 255, 255, .16); color: #fff; }
.cartao.destaque p { color: rgba(255, 255, 255, .85); }
.cartao.destaque .etiqueta { background: #fff; color: var(--primary); }
.cartao.destaque .btn { margin-top: 22px; width: 100%; }

/* tabela de pacotes */
.tabela { margin-top: 44px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--sombra); overflow: hidden; }
.tabela table { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 800; padding: 16px 24px; background: #FAFAFE; border-bottom: 1px solid var(--line); }
.tabela td { padding: 16px 24px; border-bottom: 1px solid var(--line); font-weight: 600; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: #FAFAFF; }
.tabela .qtd { display: flex; align-items: center; gap: 12px; font-weight: 800; }
.tabela .qtd img { width: 28px; height: 28px; image-rendering: pixelated; }
.tabela .qtd small { display: block; color: var(--muted); font-weight: 600; font-size: 12.5px; }
.tabela .eco { color: var(--ok); font-size: 13px; font-weight: 700; }
.tabela td:last-child { text-align: right; }
.tabela .btn { height: 40px; padding: 0 18px; }
.tabela .pe { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 24px; background: #FAFAFE; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; flex-wrap: wrap; }

/* como funciona */
.passos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; counter-reset: p; }
.passo { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }
.passo::before { counter-increment: p; content: counter(p); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); font-weight: 800; margin-bottom: 14px; }
.passo h3 { font-size: 18px; font-weight: 800; }
.passo p { color: var(--muted); font-size: 15px; margin: 8px 0 0; }

/* confiança */
.provas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }
.prova { padding: 24px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.prova b { display: block; font-size: 17px; margin-bottom: 6px; }
.prova span { color: var(--muted); font-size: 15px; }

/* comunidade */
.comunidade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.comu { display: block; text-decoration: none; padding: 24px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); transition: border-color .15s, transform .15s; }
.comu:hover { border-color: var(--primary); transform: translateY(-2px); }
.comu b { display: block; font-size: 18px; } .comu span { color: var(--muted); font-size: 15px; } .comu em { display: block; margin-top: 12px; font-style: normal; color: var(--primary); font-weight: 700; }

/* dúvidas */
.faq { max-width: 820px; margin: 36px auto 0; display: grid; gap: 10px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 4px 20px; }
.faq summary { cursor: pointer; font-weight: 700; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: '+'; color: var(--primary); font-weight: 800; }
.faq details[open] summary::after { content: '−'; }
.faq p { margin: 0 0 16px; color: var(--muted); }

/* chamada final + rodapé */
.final { background: var(--primary); color: #fff; border-radius: 28px; padding: 48px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.final h2 { font-size: 32px; } .final p { margin: 8px 0 0; opacity: .85; }
.final .acoes { display: flex; gap: 12px; flex-wrap: wrap; }
.final .btn-c2 { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .5); }
.rodape { background: #0F1036; color: #C9CBE6; margin-top: 88px; padding: 48px 0 32px; font-size: 14px; }
.rodape .embrulho { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 32px; }
.rodape .marca { color: #fff; }
.rodape h4 { margin: 0 0 12px; color: #fff; font-size: 14px; }
.rodape a { display: block; text-decoration: none; padding: 4px 0; color: #C9CBE6; } .rodape a:hover { color: #fff; }
.rodape .aviso { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 20px; color: #8D90B5; font-size: 12.5px; }

/* telas médias */
@media (max-width: 1020px) {
  .hero .embrulho { grid-template-columns: 1fr; gap: 40px; }
  .faixa .embrulho { grid-template-columns: 1fr 1fr; padding: 16px 24px; }
  .faixa .rot, .faixa .embrulho > .btn { display: none; }
  .faixa .item { border-left: 0; padding-left: 0; }
  .cartoes, .passos, .provas, .comunidade { grid-template-columns: 1fr 1fr; }
  .menu { display: none; }
  .rodape .embrulho { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn, .comu { transition: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* 2026-10-15: área de SUPORTE */
.suportes { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 20px; margin-top: 40px; }
.sup { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.sup:hover { border-color: var(--primary); transform: translateY(-2px); }
.sup .sico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.sup b { font-size: 18px; } .sup > span:not(.sico) { color: var(--muted); font-size: 15px; } .sup em { font-style: normal; font-weight: 700; color: var(--primary); margin-top: 4px; }
.sup.destaque { background: #12143A; border-color: #12143A; color: #fff; } .sup.destaque .sico { background: #25D366; color: #fff; }
.sup.destaque > span:not(.sico) { color: rgba(255, 255, 255, .78); } .sup.destaque em { color: #7CF0A8; }
.sup-info { display: flex; justify-content: center; gap: 10px 28px; flex-wrap: wrap; margin-top: 22px; color: var(--muted); font-size: 14.5px; }
.sup-info b { color: var(--ink); }
@media (max-width: 1020px) { .suportes { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .sup { transition: none; } }

/* ── 2026-10-15 v2: TOPO FOCADO EM COMPRAR (texto à esquerda, caixa de compra à direita) ── */
body { background: #F6F8FB; }
.topo { background: rgba(255, 255, 255, .92); }
.hero { background: linear-gradient(180deg, #FFFFFF 0%, #F6F8FB 100%); border-bottom: 1px solid var(--line); padding: 64px 0 72px; }
.hero .embrulho { grid-template-columns: minmax(0, 1fr) 470px; gap: 64px; }
.hero h1 { font-size: clamp(40px, 4.6vw, 58px); font-weight: 800; line-height: 1.08; margin-top: 18px; letter-spacing: -.03em; }
.tc { color: var(--primary); white-space: nowrap; }
.tc img { display: inline-block; width: .9em; height: .9em; vertical-align: -.08em; margin-right: .12em; image-rendering: pixelated; }
.hero .sub { font-size: 18px; max-width: 540px; }
.checks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; }
.checks li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.checks li::before { content: '✓'; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); font-weight: 800; font-size: 13px; flex-shrink: 0; }
.vender-link { display: inline-flex; margin-top: 28px; font-weight: 700; color: var(--muted); text-decoration: none; border-bottom: 1px dashed var(--line); padding-bottom: 2px; }
.vender-link:hover { color: var(--primary); border-color: var(--primary); }
.vender-link b { color: var(--ink); margin: 0 4px; }
.calc { margin-top: 0; max-width: none; padding: 24px; border-radius: 22px; box-shadow: 0 1px 2px rgba(14, 23, 38, .05), 0 24px 48px -24px rgba(14, 23, 38, .28); border-color: var(--line); }
.calc-tit { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0 12px; }
.calc-tit b { font-size: 18px; } .calc-tit span { color: var(--muted); font-size: 13.5px; }
.pacotes-rap { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pacotes-rap button { height: 44px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font: 700 14px var(--fonte); color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.pacotes-rap button:hover { border-color: var(--primary); }
.pacotes-rap button[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.campos { grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
.troca { display: none; }
.caixa { height: 60px; } .caixa input { font-size: 24px; }
.total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.total span { color: var(--muted); font-weight: 600; } .total b { font-size: 30px; letter-spacing: -.02em; }
.calc-pe { display: block; margin-top: 12px; }
.calc-pe .btn { width: 100%; height: 56px; font-size: 17px; margin-top: 12px; }
.calc .info { display: block; text-align: center; }
.abas { grid-template-columns: 1fr 1fr; }
/* faixa de cotação clara */
.faixa { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); }
.faixa .item { border-left-color: var(--line); } .faixa .item small { color: var(--muted); opacity: 1; }
.faixa .btn-b { background: var(--primary); color: #fff; }
/* seção da live */
.ao-vivo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.ao-vivo .palco .tela { background: linear-gradient(135deg, #1F4FE0, #4F7BFF); }
@media (max-width: 1020px) { .hero .embrulho, .ao-vivo { grid-template-columns: 1fr; } }
.vender-link { display: inline-block; }
/* celular: título → caixa de compra → confiança → link de venda */
.hero-m { display: flex; flex-direction: column; }
.hero-m .selo { align-self: flex-start; }
.hero-m .calc { order: 3; } .hero-m .checks { order: 4; margin-top: 18px; } .hero-m .vender-link { order: 5; }

/* ── 2026-10-15 v3: POUCO TEXTO. Título, três pilares e a caixa de compra. ── */
.hero h1 { font-size: clamp(44px, 5.4vw, 68px); max-width: 620px; }
.hero h1 .tc { display: inline-block; }
.pilares { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pilares li { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(14, 23, 38, .04); }
.pilares .pic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.pilares b { font-size: 15.5px; }
.vender-link { margin-top: 26px; }
.pacotes-rap { margin-top: 18px; }
.faixa .embrulho { grid-template-columns: repeat(3, 1fr); }
.faixa .item:first-child { border-left: 0; padding-left: 0; }
.passos.tres { grid-template-columns: repeat(3, 1fr); }
.passo p { margin-top: 4px; }
.suportes { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin-left: auto; margin-right: auto; }
.sup { align-content: center; }
.faq { margin-top: 0; }
.final { justify-content: center; text-align: center; flex-direction: column; }
.final h2 { font-size: 34px; }
.ao-vivo h2 { font-size: 40px; }
/* celular */
.hero-m h1 { font-size: 34px; line-height: 1.1; }
.hero-m .pilares { gap: 8px; margin-top: 16px; } .hero-m .pilares li { padding: 6px 12px 6px 6px; } .hero-m .pilares .pic { width: 30px; height: 30px; } .hero-m .pilares .pic svg { width: 18px; height: 18px; } .hero-m .pilares b { font-size: 13.5px; }
.hero-m .vender-link { margin-top: 14px; font-size: 14px; }
@media (max-width: 1020px) { .passos.tres, .suportes { grid-template-columns: 1fr; } }
.hero h1 { font-size: clamp(40px, 4.4vw, 60px); max-width: none; }

/* título com impacto: duas linhas grandes, o prazo com marca-texto dourado (a cor da moeda) */
h1.impacto { display: grid; gap: .02em; font-weight: 800; letter-spacing: -.04em; line-height: 1.02; }
.hero h1.impacto { font-size: clamp(52px, 6vw, 84px); }
.hero-m h1.impacto { font-size: 46px; }
h1.impacto .l1, h1.impacto .l2 { white-space: nowrap; }
h1.impacto .tc img { width: .78em; height: .78em; vertical-align: -.06em; margin-right: .1em; }
h1.impacto mark { color: var(--ink); background: linear-gradient(transparent 58%, #FFD23F 58%, #FFD23F 92%, transparent 92%); padding: 0 .06em; }
.hero h1.impacto + .pilares { margin-top: 34px; }
.hero h1.impacto { font-size: clamp(40px, 4.6vw, 72px); }
.hero-m h1.impacto { font-size: clamp(32px, 9.4vw, 42px); }

/* proporção: título domina, caixa mais estreita, selos pequenos numa linha */
.hero .embrulho { grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; }
.hero h1.impacto { font-size: clamp(40px, 5.1vw, 76px); }
.hero .pilares { flex-wrap: nowrap; gap: 8px; margin-top: 28px; }
.hero .pilares li { padding: 7px 14px 7px 7px; gap: 8px; }
.hero .pilares .pic { width: 30px; height: 30px; } .hero .pilares .pic svg { width: 17px; height: 17px; }
.hero .pilares b { font-size: 14px; white-space: nowrap; }
.calc { padding: 20px; } .caixa { height: 54px; } .caixa input { font-size: 22px; } .calc-pe .btn { height: 52px; font-size: 16px; }
.hero-m h1.impacto { font-size: clamp(34px, 10.4vw, 46px); }
@media (max-width: 1180px) { .hero .pilares { flex-wrap: wrap; } }
.hero-m h1.impacto { font-size: clamp(32px, 9.6vw, 44px); }

/* "Tibia Coins" é a peça principal: bem maior e mais alto que a segunda linha */
h1.impacto .l1 { font-size: 1.34em; line-height: .92; letter-spacing: -.05em; }
h1.impacto .l2 { font-size: .72em; letter-spacing: -.03em; margin-top: .12em; }

/* "menos de 5 min": faixa azul clara no lugar do amarelo, no tom da página */
h1.impacto mark { background: linear-gradient(transparent 60%, #D6E1FF 60%, #D6E1FF 92%, transparent 92%); color: inherit; }

/* 4 formas de pagamento (PIX, Binance, Revolut, Cartão) numa linha só */
.metodos:has(> :nth-child(4)) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metodos:has(> :nth-child(4)) button { padding: 0 6px; white-space: nowrap; }
.metodos button[hidden] { display: none; }
.metodos:has(> button[hidden]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── BREAKPOINTS (final, vence as regras de cima) ─────────────────────────
   > 1100 desktop · 1021–1100 calculadora um pouco menor · 761–1020 tablet (iPad) em 2 colunas compactas
   ≤ 760 uma coluna, no máximo 600 px (não estica em tablet pequeno nem em celular deitado) */
@media (max-width: 1100px) { .hero .embrulho { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; } }
@media (min-width: 761px) and (max-width: 1020px) {
  .hero .embrulho { grid-template-columns: minmax(0, 1fr) 350px; gap: 28px; }
  .hero h1.impacto { font-size: clamp(34px, 5.4vw, 52px); }
  .hero .pilares { gap: 8px; }
  .ao-vivo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; }
  .ao-vivo h2 { font-size: 32px; }
  .passos.tres, .suportes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 760px) {
  .embrulho { max-width: 600px; }
  .hero .embrulho, .ao-vivo { grid-template-columns: 1fr; gap: 32px; }
  .passos.tres, .suportes { grid-template-columns: 1fr; }
  .hero h1.impacto { font-size: clamp(34px, 9vw, 56px); }
}

/* ── ARENA (convite, sem tirar o foco da compra) ─────────────────────────
   Sprites reais da arena (64 px por quadro): Ferumbras 9 quadros; roupas com 4 cores intercaladas. */
.arena { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; background: #0F1036; color: #fff; border-radius: 24px; overflow: hidden; }
.arena .txt { padding: 36px 40px; position: relative; z-index: 2; }
.arena h2 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 0; color: #fff; }
.arena p { color: #C9CBE6; margin: 6px 0 20px; }
.arena .btn { background: #fff; color: #0F1036; }
.arena .btn:hover { background: #EAF0FF; }
.cena { position: relative; height: 260px; overflow: hidden;
  background: radial-gradient(60% 70% at 70% 60%, rgba(79, 123, 255, .35), transparent 70%),
              repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 32px),
              repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 32px); }
.spr { position: absolute; image-rendering: pixelated; background-repeat: no-repeat; }
.boss { width: 192px; height: 192px; right: 9%; top: 34px; background-image: url(img/arena/ferumbras.png); background-size: 1728px 768px; animation: boss-anda 1.1s steps(9) infinite, boss-dano 2.4s ease-in-out infinite; }
@keyframes boss-anda { from { background-position: 0 0; } to { background-position: -1728px 0; } }
@keyframes boss-dano { 0%, 70%, 100% { filter: none; } 75% { filter: brightness(2.2) saturate(0); } 80% { filter: none; } }
.heroi { width: 96px; height: 96px; background-image: url(img/arena/assassin_m.png); background-size: 1536px 384px; animation: heroi-anda .8s infinite; }
.heroi.h1 { left: 12%; top: 40px; --c: 0px; }
.heroi.h2 { left: 26%; top: 120px; --c: -192px; animation-delay: -.3s; }
.heroi.h3 { left: 6%; top: 150px; --c: -96px; animation-delay: -.55s; background-image: url(img/arena/barbarian_f.png); }
@keyframes heroi-anda {
  0%   { background-position: calc(var(--c) - 0px)   -96px; }
  25%  { background-position: calc(var(--c) - 384px) -96px; }
  50%  { background-position: calc(var(--c) - 768px) -96px; }
  75%  { background-position: calc(var(--c) - 1152px) -96px; }
  100% { background-position: calc(var(--c) - 0px)   -96px; }
}
.heroi { animation-timing-function: steps(1, end); }
.dano { position: absolute; font: 800 20px var(--fonte); color: #FFD23F; text-shadow: 0 2px 0 #8A3B00; opacity: 0; animation: dano-sobe 2.4s ease-out infinite; }
.dano.d1 { right: 18%; top: 70px; }
.dano.d2 { right: 30%; top: 100px; color: #FF6B6B; text-shadow: 0 2px 0 #6B0000; animation-delay: .8s; }
.dano.d3 { right: 12%; top: 120px; animation-delay: 1.6s; }
@keyframes dano-sobe { 0% { opacity: 0; transform: translateY(10px) scale(.8); } 12% { opacity: 1; transform: none; } 55% { opacity: 1; } 75%, 100% { opacity: 0; transform: translateY(-34px); } }
@media (max-width: 760px) {
  .arena { grid-template-columns: 1fr; }
  .arena .txt { padding: 26px 22px 6px; order: 2; }
  .arena .txt { padding-bottom: 24px; }
  .cena { height: 180px; order: 1; }
  .boss { width: 144px; height: 144px; background-size: 1296px 576px; top: 28px; right: 12%; animation-name: boss-anda-m, boss-dano; }
  @keyframes boss-anda-m { from { background-position: 0 0; } to { background-position: -1296px 0; } }
  .heroi.h1 { top: 24px; } .heroi.h2 { top: 96px; left: 30%; } .heroi.h3 { top: 110px; }
}
@media (prefers-reduced-motion: reduce) { .boss, .heroi, .dano { animation: none; } .dano { opacity: 1; } }

/* logo: o gato vetorizado do Neko, na cor da marca */
.marca .logo { width: 30px; height: 30px; color: var(--primary); flex-shrink: 0; }
.rodape .marca .logo { color: #8FB0FF; }

/* ── ARENA v2: "snippet" da arena de verdade (topo, vida do boss, campo, time, log) ── */
.arena { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); background: #0B0D24; }
.arena .txt { padding: 32px 36px; }
.aa { margin: 18px 0 18px 18px; border-radius: 16px; overflow: hidden; background: #12142E; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .7); display: grid; grid-template-columns: minmax(0, 1fr) 168px; grid-template-rows: auto auto 1fr auto; color: #E6E8FF; font-size: 12.5px; }
.aa-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: rgba(255, 255, 255, .04); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.aa-top b { font-weight: 800; letter-spacing: .02em; color: #F2D78A; }
.aa-vivo { display: inline-flex; align-items: center; gap: 5px; background: #E5484D; color: #fff; font-weight: 800; font-size: 10.5px; padding: 3px 7px; border-radius: 6px; letter-spacing: .04em; }
.aa-vivo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: aa-pisca 1.2s infinite; }
@keyframes aa-pisca { 50% { opacity: .3; } }
.aa-top .aa-tempo { margin-left: auto; font-variant-numeric: tabular-nums; color: #9AA0D0; font-weight: 700; }
.aa-boss { grid-column: 1 / -1; padding: 9px 12px 10px; display: grid; gap: 6px; }
.aa-boss-nome { display: flex; align-items: baseline; gap: 8px; font-weight: 800; font-size: 13.5px; }
.aa-boss-nome small { color: #9AA0D0; font-weight: 700; }
.aa-boss-nome span { margin-left: auto; color: #FF8A8A; font-variant-numeric: tabular-nums; }
.aa-hp { height: 10px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.aa-hp i { display: block; height: 100%; width: var(--hp, 100%); background: linear-gradient(90deg, #E5484D, #FF8A5C); border-radius: 6px; transition: width .6s ease; }
.aa-campo { position: relative; min-height: 196px; overflow: hidden;
  background: radial-gradient(70% 80% at 72% 55%, rgba(229, 72, 77, .18), transparent 70%),
              repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 28px),
              repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 28px), #161936; }
.aa-campo .boss { right: 8%; top: 18px; width: 160px; height: 160px; background-size: 1440px 640px; animation: aa-boss 1.1s steps(9) infinite, boss-dano 2.4s ease-in-out infinite; }
@keyframes aa-boss { from { background-position: 0 0; } to { background-position: -1440px 0; } }
.aa-h { position: absolute; width: 80px; height: 80px; image-rendering: pixelated; background-repeat: no-repeat; background-size: 1280px 320px; animation: aa-heroi .9s steps(1, end) infinite; }
@keyframes aa-heroi { 0% { background-position-y: 0; } 25% { background-position-y: -80px; } 50% { background-position-y: -160px; } 75% { background-position-y: -240px; } }
.aa-h.k { left: 6%;  top: 18px;  background-image: url(img/arena/knight_m.png); background-position-x: 0; }
.aa-h.p { left: 22%; top: 70px;  background-image: url(img/arena/hunter_m.png); background-position-x: -80px; animation-delay: -.2s; }
.aa-h.s { left: 4%;  top: 112px; background-image: url(img/arena/mage_m.png);   background-position-x: -160px; animation-delay: -.45s; }
.aa-h.d { left: 26%; top: 128px; background-image: url(img/arena/druid_f.png);  background-position-x: -240px; animation-delay: -.65s; }
.aa-campo .dano { font-size: 17px; }
.aa-campo .dano.d1 { right: 22%; top: 40px; } .aa-campo .dano.d2 { right: 34%; top: 82px; } .aa-campo .dano.d3 { right: 14%; top: 112px; }
.aa-time { grid-row: 3 / 5; grid-column: 2; border-left: 1px solid rgba(255, 255, 255, .06); padding: 10px; display: grid; gap: 8px; align-content: start; background: rgba(0, 0, 0, .18); }
.aa-time h4 { margin: 0; font-size: 10.5px; letter-spacing: .08em; color: #9AA0D0; font-weight: 800; }
.aa-p { display: grid; grid-template-columns: 22px 1fr; gap: 3px 7px; align-items: center; }
.aa-p img { width: 22px; height: 22px; grid-row: 1 / 3; image-rendering: pixelated; }
.aa-p b { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; justify-content: space-between; gap: 4px; }
.aa-p b em { font-style: normal; color: #F2D78A; font-variant-numeric: tabular-nums; font-size: 11px; }
.aa-p .vida { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.aa-p .vida i { display: block; height: 100%; width: var(--v, 100%); background: #22C55E; border-radius: 3px; transition: width .6s; }
.aa-log { grid-column: 1; border-top: 1px solid rgba(255, 255, 255, .06); padding: 8px 12px; height: 62px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; color: #B7BBE0; font-size: 12px; }
.aa-log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: aa-entra .35s ease; }
.aa-log b { color: #fff; } .aa-log em { font-style: normal; color: #F2D78A; font-weight: 800; }
@keyframes aa-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 1020px) { .arena { grid-template-columns: 1fr; } .aa { margin: 14px 14px 0; } .arena .txt { padding: 22px 24px 26px; } }
@media (max-width: 560px) {
  .aa { grid-template-columns: 1fr; } .aa-time { grid-row: auto; grid-column: 1; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .06); grid-template-columns: 1fr 1fr; }
  .aa-time h4 { grid-column: 1 / -1; } .aa-log { grid-column: 1; }
  .aa-campo { min-height: 170px; } .aa-campo .boss { width: 128px; height: 128px; background-size: 1152px 512px; animation-name: aa-boss-m, boss-dano; top: 22px; }
  @keyframes aa-boss-m { from { background-position: 0 0; } to { background-position: -1152px 0; } }
  .aa-h { width: 64px; height: 64px; background-size: 1024px 256px; }
  @keyframes aa-heroi { 0% { background-position-y: 0; } 25% { background-position-y: -64px; } 50% { background-position-y: -128px; } 75% { background-position-y: -192px; } }
  .aa-h.p { background-position-x: -64px; } .aa-h.s { background-position-x: -128px; } .aa-h.d { background-position-x: -192px; }
}
@media (prefers-reduced-motion: reduce) { .aa-h, .aa-vivo::before, .aa-log div { animation: none; } }

/* gato do Neko (silhueta original, mais largo que alto) */
.marca .logo { width: 40px; height: 31px; }
@media (max-width: 560px) {
  .aa-h.k { left: 6%; top: 12px; } .aa-h.p { left: 26%; top: 44px; } .aa-h.s { left: 4%; top: 86px; } .aa-h.d { left: 28%; top: 100px; }
}

/* ── ARENA v3: o campo é a sala REAL do Ferumbras (cidadela), desenhada com os tiles da própria arena ── */
.aa-campo { min-height: 236px; background: #15151c url(img/arena/cenario-ferumbras.jpg) 46% 50% / 1040px 440px no-repeat; image-rendering: pixelated; }
.aa-campo::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(90% 100% at 58% 50%, transparent 40%, rgba(6, 7, 18, .7)), linear-gradient(180deg, rgba(6, 7, 18, .25), transparent 30%, transparent 75%, rgba(6, 7, 18, .45)); }
.aa-campo > * { z-index: 2; }
.aa-campo .dano { z-index: 3; }
.aa-campo .boss { right: auto; left: 52%; top: 44px; width: 128px; height: 128px; background-size: 1152px 512px; animation: aa-boss-m 1.1s steps(9) infinite, boss-dano 2.4s ease-in-out infinite; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .6)); }
@keyframes aa-boss-m { from { background-position: 0 0; } to { background-position: -1152px 0; } }
.aa-h.k { left: 36%; top: 30px; } .aa-h.p { left: 27%; top: 96px; } .aa-h.s { left: 16%; top: 40px; } .aa-h.d { left: 40%; top: 140px; }
.aa-h { filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .55)); }
.aa-campo .dano.d1 { right: auto; left: 60%; top: 34px; } .aa-campo .dano.d2 { right: auto; left: 48%; top: 70px; } .aa-campo .dano.d3 { right: auto; left: 66%; top: 120px; }
@media (max-width: 560px) {
  .aa-campo { min-height: 190px; background-size: 832px 352px; background-position: 40% 50%; }
  .aa-campo .boss { left: 56%; top: 36px; width: 104px; height: 104px; background-size: 936px 416px; animation-name: aa-boss-s, boss-dano; }
  @keyframes aa-boss-s { from { background-position: 0 0; } to { background-position: -936px 0; } }
  .aa-h.k { left: 34%; top: 20px; } .aa-h.p { left: 20%; top: 70px; } .aa-h.s { left: 6%; top: 24px; } .aa-h.d { left: 36%; top: 112px; }
  .aa-campo .dano.d1 { left: 62%; } .aa-campo .dano.d3 { left: 70%; top: 100px; }
}

/* logo: só o rosto do gato do Neko (traço original do vetorGato.ai) */
.marca .logo { width: 31px; height: 31px; }


/* ── 2026-10-15 v4: 3 provas mais limpas e objetivas (cartões, não pílulas) ── */
.hero .pilares, .hero-m .pilares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; flex-wrap: initial; margin-top: 28px; }
.pilares li { flex-direction: row; align-items: center; gap: 11px; padding: 13px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(18, 20, 58, .05); }
.pilares .pic { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; }
.hero .pilares .pic svg, .hero-m .pilares .pic svg { width: 19px; height: 19px; }
.pilares b { font-size: 14.5px; display: block; line-height: 1.15; letter-spacing: -.01em; }
.pilares small { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }
@media (max-width: 560px) {
  .hero-m .pilares { grid-template-columns: 1fr; gap: 8px; }
  .hero-m .pilares li { padding: 11px 13px; }
}

/* ── ACABAMENTO 2026-10-16 (passada de "fora do lugar") ─────────────────────
   rodapé: o logo subia acima do nome (o ".rodape a { display:block }" ganhava do .marca) */
.rodape a.marca { display: inline-flex; align-items: center; gap: 10px; padding: 0; }
/* preço do total nunca quebra em duas linhas */
.total b, .total .num { white-space: nowrap; }
/* tablet em pé (até 900): a calculadora estourava a borda e os pilares se espremiam → uma coluna, centralizada */
@media (max-width: 900px) {
  .hero .embrulho { grid-template-columns: 1fr; gap: 32px; max-width: 600px; }
  .hero .pilares { flex-wrap: wrap; }
  .ao-vivo { grid-template-columns: 1fr; gap: 24px; max-width: 600px; }
}
/* tabela de preços: no tablet some "compramos por" (já está na faixa de cotação) e os "x pacotes";
   no celular some também a coluna da Binance — nada de rolar pro lado */
@media (max-width: 900px) {
  .tabela th, .tabela td { padding: 12px 14px; }
  .tabela th:nth-child(4), .tabela td:nth-child(4) { display: none; }
  .tabela .qtd small { display: none; }
  .tabela .qtd { white-space: nowrap; }
  .tabela .btn { height: 36px; padding: 0 14px; }
}
@media (max-width: 600px) {
  .tabela th:nth-child(3), .tabela td:nth-child(3) { display: none; }
  .tabela th, .tabela td { padding: 12px 10px; }
}
/* os campos "Você recebe / Você paga" estouravam a calculadora no celular (coluna da grade no tamanho mínimo do conteúdo) */
.campos { grid-template-columns: minmax(0, 1fr); } .campos > * { min-width: 0; }

/* ── 2026-10-17: destaques da Dash em cartões verticais, logo abaixo do hero (no lugar da faixa de cotação).
   Mesmo vocabulário da loja: cartão branco, borda --line, raio --r, ícone em quadrado azul-claro. ── */
.destaques { background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 36px 0; }
.destaques .embrulho { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dq { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: 26px 22px 24px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sombra); transition: transform .18s, box-shadow .18s; }
.dq::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--primary); }
.dq:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(18, 20, 58, .06), 0 16px 32px -14px rgba(18, 20, 58, .28); }
.dq-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.dq-ico img { width: 30px; height: 30px; image-rendering: pixelated; }
.dq-num { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.dq h3 { margin: 10px 0 0; font-size: 16px; font-weight: 800; }
.dq p { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
/* cada cartão com sua cor de destaque (moeda, live, ok, azul) */
.dq-rapido::before { background: var(--coin); } .dq-rapido .dq-ico { background: #FFF6DB; }
.dq-vivo::before { background: #E5484D; } .dq-vivo .dq-ico { background: #FDECEC; color: #E5484D; }
.dq-vivo .ponto { width: 10px; height: 10px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 4px rgba(229, 72, 77, .18); animation: dqPulso 1.6s ease-in-out infinite; }
.dq-humano::before { background: var(--ok); } .dq-humano .dq-ico { background: var(--ok-soft); color: var(--ok); }
@keyframes dqPulso { 50% { box-shadow: 0 0 0 7px rgba(229, 72, 77, 0); } }
@media (max-width: 1020px) { .destaques .embrulho { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .destaques .embrulho { grid-template-columns: 1fr; } .dq-num { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .dq, .dq-vivo .ponto { transition: none; animation: none; } }

/* ── 2026-10-17: 1ª dobra ocupa a tela toda (estática) + ondas no pé indicando que o site continua ──
   As ondas terminam na cor da seção de destaques (--soft), então a página "escorre" pra baixo sem linha. */
.hero { position: relative; overflow: hidden; min-height: calc(100svh - var(--topo-h, 73px)); display: flex; align-items: center;
  --onda-h: clamp(100px, 18vh, 190px); padding: 12px 0 var(--onda-h); border-bottom: 0; background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 55%, #F3F6FF 100%); }
.hero > .embrulho { width: 100%; position: relative; z-index: 2; }
.ondas { position: absolute; left: 0; right: 0; bottom: -1px; height: var(--onda-h); z-index: 1; pointer-events: none; }
/* as ondas são desenhadas pelo ondas.js (curva recalculada a cada quadro = sempre suave) */
.ondas canvas { display: block; width: 100%; height: 100%; }
.onda-tras { fill: var(--primary); opacity: .32; }
.onda-chao { fill: var(--soft); }
.destaques { border-top: 0; padding-top: 20px; }
/* indicador de rolagem: setinha pulando pra baixo */
.rolar { position: absolute; left: 50%; bottom: calc(var(--onda-h) * .78); z-index: 3; transform: translateX(-50%); width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: var(--primary); background: #fff; border: 1px solid var(--line); box-shadow: var(--sombra);
  text-decoration: none; transition: opacity .3s, color .15s, background .15s; animation: rolarPula 2.4s ease-in-out infinite; }
.rolar:hover { background: var(--primary); color: #fff; }
.rolar svg { width: 20px; height: 20px; }
@keyframes rolarPula { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
html.rolou .rolar { opacity: 0; pointer-events: none; }
/* o que vem depois aparece subindo quando entra na tela (só com JS; sem JS fica tudo visível) */
html.js-rev .revelar { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
html.js-rev .revelar.visto { opacity: 1; transform: none; }
html.js-rev .dq.revelar:nth-child(2) { transition-delay: .08s; } html.js-rev .dq.revelar:nth-child(3) { transition-delay: .16s; } html.js-rev .dq.revelar:nth-child(4) { transition-delay: .24s; }
@media (max-width: 900px) { .hero { min-height: 0; padding-bottom: 130px; } .rolar { display: none; } }
@media (prefers-reduced-motion: reduce) { .rolar { animation: none; } html.js-rev .revelar { opacity: 1; transform: none; transition: none; } }

/* ── 2026-10-17: caixinha de comprar mais completa + compra direto nela ──
   recebe/paga lado a lado, personagem, selos de confiança; "Gerar PIX" abre o pedido dentro da própria caixa. */
[hidden] { display: none !important; }
.calc .campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.calc .caixa { height: 54px; } .calc .caixa input { font-size: 21px; }
.cx-rot { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 12px 0 6px; }
.calc .campos label { font-size: 12.5px; }
.calc .caixa.txt { height: 48px; } .calc .caixa.txt input { font-size: 16px; font-weight: 700; }
.cx-pico { color: var(--muted); flex-shrink: 0; }
.cx-nota { font-size: 12.5px; color: var(--muted); margin: 5px 0 0; min-height: 0; }
.cx-nota:empty { display: none; }
.cx-nota.ok { color: var(--ok); font-weight: 700; } .cx-nota.erro, .cx-erro { color: #D93A3A; font-weight: 700; }
.cx-erro { font-size: 13px; margin: 10px 0 0; text-align: center; }
.calc .metodos { margin-top: 12px; }
.calc-pe .btn { margin-top: 10px; }
.cx-selos { list-style: none; margin: 12px 0 0; padding: 0; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.cx-selos li { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.cx-selos svg { color: var(--ok); }
/* pedido dentro da caixa */
.cx-pedido { animation: cxEntra .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes cxEntra { from { opacity: 0; transform: translateY(10px); } }
.cx-cab { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.cx-cab small { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.cx-cab b { font-size: 20px; font-weight: 800; letter-spacing: .02em; }
.cx-voltar { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.cx-voltar:hover { border-color: var(--primary); color: var(--primary); }
.cx-chip { font-weight: 800; font-size: 12px; padding: 6px 11px; border-radius: 999px; white-space: nowrap; background: var(--soft); color: var(--muted); }
.cx-chip.aguarda { background: #FFF6E0; color: #9A6700; } .cx-chip.azul { background: var(--primary-soft); color: var(--primary); } .cx-chip.ok { background: var(--ok-soft); color: var(--ok); }
.cx-resumo { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--soft); font-size: 14.5px; color: var(--muted); }
.cx-resumo img { width: 22px; height: 22px; image-rendering: pixelated; } .cx-resumo b { color: var(--ink); }
.cx-trilha { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; padding: 0; }
.cx-trilha li { font-size: 12px; font-weight: 700; color: var(--muted); padding-top: 8px; border-top: 4px solid var(--line); }
.cx-trilha li.feito { color: var(--ok); border-top-color: var(--ok); } .cx-trilha li.agora { color: var(--primary); border-top-color: var(--primary); }
.cx-pix { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 18px; align-items: center; }
.cx-qr { width: 148px; height: 148px; border-radius: 12px; border: 1px solid var(--line); padding: 8px; background: #fff; }
.cx-qr svg { width: 100%; height: 100%; display: block; }
.cx-valor { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.cx-pix dl { margin: 8px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 13px; }
.cx-pix dt { color: var(--muted); font-weight: 600; } .cx-pix dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.cx-copia { display: flex; gap: 8px; margin-top: 14px; }
.cx-copia input { flex: 1; min-width: 0; height: 46px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; font: 600 12.5px ui-monospace, Menlo, monospace; color: var(--muted); background: var(--soft); }
.cx-copia .btn { height: 46px; }
.cx-aviso { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-2); font-weight: 700; font-size: 14px; }
.cx-aviso.ok { background: var(--ok-soft); color: var(--ok); }
.cx-acoes { display: grid; gap: 8px; margin-top: 14px; }
.cx-acoes .btn { width: 100%; height: 52px; font-size: 16px; }
.cx-twitch { background: #9146FF; color: #fff; } .cx-twitch:hover { background: #7A33E8; }
.cx-link { background: none; border: 0; color: var(--muted); font: 700 13.5px var(--fonte); text-decoration: underline; cursor: pointer; justify-self: center; padding: 4px; }
@media (max-width: 420px) { .calc .campos { grid-template-columns: 1fr; } .cx-pix { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

/* 2026-10-17: rolagem leve — cabeçalho sem blur (o blur repintava a cada quadro da rolagem) e
   animações paradas quando a seção não está na tela (rolagem.js põe .parado) */
.topo { background: rgba(255, 255, 255, .97); backdrop-filter: none; }
.parado, .parado * { animation-play-state: paused !important; }

/* ── 2026-10-17: 2ª linha do título apaga e reescreve (digita.js) ── */
h1.impacto .l2 { display: block; white-space: nowrap; min-height: 1.15em; }
h1.impacto .dg mark[hidden] { display: none; }
.dg-cursor { display: inline-block; width: .07em; height: .9em; margin-left: .06em; vertical-align: -.08em; border-radius: 2px;
  background: var(--primary); animation: dgPisca 1s steps(1) infinite; }
.dg-cursor.dg-ativo { animation: none; }   /* enquanto digita/apaga o cursor fica aceso */
@keyframes dgPisca { 50% { opacity: 0; } }
.hero-m h1.impacto .l2 { font-size: min(.72em, 6.6vw); }

/* ── 2026-10-17: moedas do Tibia só no traço, bem fininhas, atrás do título (inspirado no "CoinQ") ──
   4 caindo devagar (balançam e giram de leve) + uma pilha embaixo. Traço 1px que não engrossa com a escala. */
.hero-txt { position: relative; }
.hero-txt > :not(.moedas) { position: relative; z-index: 1; }
/* v3: no vocabulário do site (igual aos ícones: fundo azul-clarinho + traço azul fino).
   Ficam no vazio da coluna: 2 caindo em cima do título, a pilha embaixo do texto — a história é "caem na pilha". */
.moedas { position: absolute; z-index: 0; pointer-events: none; overflow: visible; }
.moedas-cai { right: 30px; bottom: calc(100% + 6px); width: 300px; height: 190px; }
.moedas-pilha { left: -14px; top: calc(100% + 4px); width: 300px; height: 170px; }
.moedas * { vector-effect: non-scaling-stroke; }
.moedas .mo { fill: none; stroke: #9DB3F2; stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
.moedas .fc { fill: #F6F8FF; } .moedas .bd { fill: #E9EFFE; }   /* face clarinha, lateral um tom abaixo (dá o volume) */
.moedas .tr { stroke-dasharray: 2.5 4; stroke: #BFCDF6; }
.moedas .gl { stroke: #8AA4EE; }
.moedas .cai { transform-box: fill-box; transform-origin: center; animation: moedaCai var(--dur) ease-in-out var(--at) infinite alternate; }
@keyframes moedaCai { from { transform: translateY(calc(var(--dy) * -1)) rotate(calc(var(--dr) * -1)); } to { transform: translateY(var(--dy)) rotate(var(--dr)); } }
@media (max-height: 820px) { .moedas-cai { transform: scale(.8); transform-origin: 100% 100%; } .moedas-pilha { transform: scale(.8); transform-origin: 0 0; } }
@media (max-width: 900px) { .moedas { display: none; } }
@media (prefers-reduced-motion: reduce) { .moedas .cai { animation: none; } }

/* 2026-10-17: chuva de moedas no fundo da 1ª dobra (chuva.js). Fica atrás de tudo, inclusive das ondas. */
.chuva { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.moedas { display: none; }

/* ── 2026-10-17: layout mais aberto — conteúdo usa mais da tela e o logo vai pra esquerda.
   Antes: 1180px centralizado. Agora até 1680px com respiro lateral proporcional à tela. ── */
:root { --largura: 1680px; --respiro: clamp(20px, 5vw, 88px); }
.embrulho { padding: 0 var(--respiro); }
.hero .embrulho { grid-template-columns: minmax(0, 1fr) 440px; gap: clamp(40px, 6vw, 120px); }
.hero h1.impacto { font-size: clamp(52px, 5.6vw, 96px); }
@media (max-width: 1100px) { .hero .embrulho { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; } }
/* blocos de leitura não esticam junto (FAQ, textos) */
.faq, .texto, .centro { max-width: 860px; margin-left: auto; margin-right: auto; }

/* 2026-10-17: contador de transações no lugar do "Vender suas coins", no mesmo jeitão de link (sublinhado tracejado).
   Destaque só no número, que fica no fim e rola como placar (entregas.js). Número REAL (/api/entregas). */
.entregas.vender-link { align-items: baseline; }
.entregas.vender-link[hidden] { display: none; }
.entregas .ent-linha { display: inline-flex; align-items: baseline; gap: 6px; }
.entregas .ent-rot { font-weight: 700; color: var(--muted); }
.entregas .ent-placar { display: inline-flex; font-weight: 800; color: var(--ink); font-size: 1.15em; line-height: 1; font-variant-numeric: tabular-nums; }
.entregas:hover .ent-placar { color: var(--primary); }
.entregas .ent-dig { display: inline-block; height: 1em; overflow: hidden; }
.entregas .ent-fita { display: flex; flex-direction: column; transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.entregas .ent-fita span { height: 1em; display: block; text-align: center; }
@media (prefers-reduced-motion: reduce) { .entregas .ent-fita { transition: none; } }

/* 2026-10-17: setinhas ▲▼ dentro da caixa de TC (de 25 em 25; a rodinha do mouse faz o mesmo) */
.cx-passo { display: flex; flex-direction: column; gap: 2px; margin-left: 2px; }
.cx-passo button { width: 26px; height: 20px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; color: var(--primary); cursor: pointer; transition: background .15s, border-color .15s; }
.cx-passo button:hover { background: var(--primary-soft); border-color: var(--primary); }
.cx-passo button:active { transform: translateY(1px); }

/* ── 2026-10-17: "Assista à sua entrega" → confiança da gravação. Título mais forte (grifo igual ao do hero),
   selo REC, lista de garantias. Moldura da live sem o azul berrante: cartão branco igual à caixinha de compra. ── */
.lv-selo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: #FDECEC; color: #C2282D; font-weight: 800; font-size: 13px; letter-spacing: .01em; }
.lv-rec { width: 8px; height: 8px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 3px rgba(229, 72, 77, .2); animation: lvRec 1.6s ease-in-out infinite; }
@keyframes lvRec { 50% { opacity: .35; } }
.ao-vivo .lv-tit { font-size: clamp(36px, 3.8vw, 56px); line-height: 1.05; letter-spacing: -.035em; margin-top: 16px; }
.lv-tit mark { background: linear-gradient(transparent 62%, #D6E1FF 62%, #D6E1FF 92%, transparent 92%); color: var(--primary); }
.lv-txt .sub { max-width: 460px; }
.lv-lista { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.lv-lista li { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); }
.lv-lista li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); flex-shrink: 0; }
.lv-bt { margin-top: 26px; height: 52px; padding: 0 24px; }
/* moldura: branca, borda fina e sombra suave (mesma família da .calc) */
.ao-vivo .lv-palco .tela { background: #fff; border: 1px solid var(--line); padding: 10px; border-radius: 22px;
  box-shadow: 0 1px 2px rgba(14, 23, 38, .05), 0 24px 48px -24px rgba(14, 23, 38, .28); }
.lv-palco .quadro { border-radius: 14px; }
.lv-palco .quadro .tag { background: #E5484D; }
.lv-gravando { position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px;
  background: rgba(15, 16, 48, .72); color: #fff; font: 800 12px var(--fonte); letter-spacing: .08em; }
.lv-gravando .lv-rec { box-shadow: none; }
.lv-palco .quadro .play span { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.lv-palco .quadro .play:hover span { color: var(--primary); }
.lv-rodape { display: flex; justify-content: space-between; gap: 12px; padding: 12px 6px 0; font-size: 13.5px; color: var(--muted); font-weight: 600; }
.lv-rodape span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 700; }
@media (max-width: 560px) { .lv-rodape span:last-child { display: none; } }
@media (prefers-reduced-motion: reduce) { .lv-rec { animation: none; } }

/* ── 2026-10-17: Oferta especial — combos em quadrados (biblioteca). Capa colorida suave com a pilha de moedas,
   selo de desconto, preço riscado e o novo. Tons conversam com os cartões de destaque. ── */
.combos-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.combos-selo { display: inline-flex; padding: 5px 11px; border-radius: 999px; background: #FFF3D6; color: #9A6700; font-weight: 800; font-size: 12.5px; letter-spacing: .02em; text-transform: uppercase; }
.combos-cab h2 { margin-top: 10px; }
.combos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1240px) { .combos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .combos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .combo-info { padding: 10px 12px 12px; } .combo-q { font-size: 18px; }  .combo-preco strong { font-size: 16px; }
  .combo-bt { height: 36px; margin-top: 8px; } .combo-tag { display: none; } }
.combo { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink);
  box-shadow: 0 1px 2px rgba(18, 20, 58, .05); transition: transform .18s, box-shadow .18s, border-color .18s; }
.combo:hover { transform: translateY(-4px); border-color: #C9D6FA; box-shadow: 0 2px 4px rgba(18, 20, 58, .06), 0 18px 36px -16px rgba(18, 20, 58, .3); }
.combo-capa { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; background: var(--c1); overflow: hidden; }
.combo-capa::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 60%, rgba(255, 255, 255, .75), transparent 62%); }
.combo-pilha { position: relative; width: 56%; aspect-ratio: 1 / 1; }
.combo-pilha img { position: absolute; left: 50%; width: 46%; image-rendering: pixelated; filter: drop-shadow(0 4px 6px rgba(18, 20, 58, .18));
  bottom: calc(10% + var(--k) * 11%); transform: translateX(calc(-50% + var(--x) * 9%)); transition: transform .25s; }
.combo:hover .combo-pilha img { transform: translateX(calc(-50% + var(--x) * 9%)) translateY(calc(var(--k) * -3px)); }
.combo-pct { position: absolute; left: 12px; top: 12px; padding: 5px 9px; border-radius: 9px; background: var(--ok); color: #fff; font-weight: 800; font-size: 13px; }
.combo-tag { position: absolute; right: 12px; top: 12px; padding: 5px 9px; border-radius: 9px; background: #fff; color: var(--ink); font-weight: 800; font-size: 11.5px; box-shadow: 0 2px 6px rgba(18, 20, 58, .12); }
.combo-info { padding: 14px 16px 16px; display: grid; gap: 2px; }
.combo-info small { color: var(--muted); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
.combo-q { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.combo-preco { display: flex; flex-direction: column; gap: 0; margin-top: 4px; white-space: nowrap; }
.combo-preco s, .combo-preco strong { white-space: nowrap; }
.combo-preco s { color: var(--muted); font-size: 13.5px; font-weight: 600; }
.combo-preco strong { font-size: 18px; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }
.combo-bt { margin-top: 12px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-weight: 800; font-size: 14.5px; transition: background .15s, color .15s; }
.combo:hover .combo-bt { background: var(--primary); color: #fff; }
.tom-azul { --c1: #E4EBFF; } .tom-verde { --c1: #DDF4EA; } .tom-roxo { --c1: #ECE4FF; }
.tom-ambar { --c1: #FFF1CF; } .tom-rosa { --c1: #FFE3EA; } .tom-escuro { --c1: #1B2048; }
.tom-escuro .combo-capa::before { background: radial-gradient(circle at 50% 60%, rgba(120, 140, 255, .35), transparent 62%); }
@media (prefers-reduced-motion: reduce) { .combo, .combo-pilha img { transition: none; } }

/* 2026-10-17: caixinha de compra/venda com mais respiro + linha do "achou / não achou o personagem"
   sempre reservada (o layout não pula quando a mensagem aparece ou some) */
.hero .calc { padding: 28px; }
.hero .calc .pacotes-rap { margin-top: 18px; }
.hero .calc .campos { margin-top: 18px; gap: 12px; }
.hero .calc .cx-rot { margin: 16px 0 8px; }
.cx-nota, .cx-nota:empty { display: block; height: 18px; min-height: 18px; margin: 6px 0 0; line-height: 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hero .calc .metodos { margin-top: 14px; }
.hero .calc .calc-pe { margin-top: 16px; }
.hero .calc .cx-selos { margin-top: 14px; }
/* telas baixas (notebook): mesmo respiro, um pouco mais compacto, e a caixinha pode encostar no topo das ondas */
@media (max-height: 820px) and (min-width: 901px) {
  .hero { padding-bottom: calc(var(--onda-h) * .62); }
  .hero .calc { padding: 22px 24px; }
  .hero .calc .pacotes-rap { margin-top: 14px; }
  .hero .calc .campos { margin-top: 14px; }
  .hero .calc .cx-rot { margin: 12px 0 6px; }
  .hero .calc .caixa { height: 50px; } .hero .calc .caixa.txt { height: 46px; }
  .hero .calc .calc-pe { margin-top: 12px; }
  .hero .rolar { bottom: calc(var(--onda-h) * .5); }
}

/* 2026-10-17: ícone de quantidade dos pacotes = o do site antigo (gato da Dash no medalhão + pilha de Tibia Coins
   animada por cima, no canto). --p = tamanho da pilha (cresce com o pacote). */
.pac-ico { position: relative; width: 52px; height: 52px; flex-shrink: 0; }
.pac-ico img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 2px #F2C46B, 0 6px 14px -6px rgba(18, 20, 58, .35); }
.pac-ico i { position: absolute; right: -10px; bottom: -6px; width: calc(52px * var(--p)); height: calc(52px * var(--p));
  background: url(img/tibia-coins-pilha.png) 0 0 / calc(52px * var(--p) * 12) 100% no-repeat; image-rendering: pixelated;
  animation: pacBrilho 1.8s steps(12) infinite; filter: drop-shadow(0 3px 4px rgba(18, 20, 58, .35)); }
@keyframes pacBrilho { to { background-position: calc(52px * var(--p) * -12) 0; } }
.tabela .qtd { gap: 18px; }
@media (prefers-reduced-motion: reduce) { .pac-ico i { animation: none; } }
.tabela .qtd .pac-ico img { width: 100%; height: 100%; }

/* 2026-10-17: capa dos combos = medalhão do site antigo (gato + borda dourada) com a pilha de Tibia Coins animada
   no canto. --p = tamanho da pilha em relação ao medalhão (cresce com o combo). */
.combo-med { position: relative; width: 58%; aspect-ratio: 1 / 1; }
.combo-med img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
  box-shadow: 0 0 0 3px #F2C46B, 0 14px 28px -12px rgba(18, 20, 58, .45); transition: transform .25s; }
.combo-med i { position: absolute; right: -14%; bottom: -10%; width: calc(100% * var(--p)); aspect-ratio: 1 / 1;
  background: url(img/tibia-coins-pilha.png) 0 0 / 1200% 100% no-repeat; image-rendering: pixelated;
  animation: comboBrilho 1.8s steps(12, jump-none) infinite; filter: drop-shadow(0 6px 8px rgba(18, 20, 58, .4)); transition: transform .25s; }
@keyframes comboBrilho { to { background-position: 100% 0; } }
.combo:hover .combo-med img { transform: scale(1.04); }
.combo:hover .combo-med i { transform: translate(-3px, -4px) scale(1.06); }
.tom-escuro .combo-med img { box-shadow: 0 0 0 3px #F2C46B, 0 14px 28px -12px rgba(0, 0, 0, .7); }
@media (prefers-reduced-motion: reduce) { .combo-med i { animation: none; } }

/* ── 2026-10-17: página da Arena (protótipo). Hero com o painel animado da raid, passos, vocações e ganhos.
   Fundo claro do site; só o painel da raid é escuro (é a "tela do jogo"). ── */
.ar-hero { padding: 48px 0 64px; background: linear-gradient(180deg, #fff 0%, #F3F6FF 100%); border-bottom: 1px solid var(--line); }
.ar-hero .embrulho { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ar-selo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: #FDECEC; color: #C2282D; font-weight: 800; font-size: 13px; }
.ar-hero h1 { font-size: clamp(44px, 5vw, 78px); font-weight: 800; line-height: 1.02; letter-spacing: -.04em; margin: 16px 0 0; }
.ar-hero h1 mark { background: linear-gradient(transparent 62%, #D6E1FF 62%, #D6E1FF 92%, transparent 92%); color: var(--primary); }
.ar-hero .sub { max-width: 520px; }
.ar-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.ar-bt { height: 52px; padding: 0 22px; }
.ar-miudo { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.ar-hero-tela { border-radius: 24px; padding: 10px; background: #0B0D24; box-shadow: 0 30px 60px -30px rgba(11, 13, 36, .6); }
.ar-hero-tela .aa { margin: 0; }
.ar-passos { margin-top: 28px; }
.ar-time { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.ar-voc { border-radius: 18px; overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(18, 20, 58, .05); transition: transform .18s, box-shadow .18s; }
.ar-voc:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(18, 20, 58, .06), 0 18px 36px -16px rgba(18, 20, 58, .3); }
.ar-voc-capa { aspect-ratio: 4 / 3; display: grid; place-items: center; background: url(img/outfit/amb-masmorra.jpg) center / 120px repeat; image-rendering: pixelated; position: relative; }
.ar-voc-capa::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 60%, transparent 30%, rgba(11, 13, 36, .55)); }
.ar-spr { position: relative; z-index: 1; width: 128px; height: 128px; background-size: 512px 128px; background-repeat: no-repeat; background-position: 0 0; image-rendering: pixelated;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); animation: arFlutua 3.2s ease-in-out infinite alternate; }
@keyframes arFlutua { to { transform: translateY(-6px); } }
.ar-voc:nth-child(2) .ar-spr { animation-delay: -.8s; } .ar-voc:nth-child(3) .ar-spr { animation-delay: -1.6s; } .ar-voc:nth-child(4) .ar-spr { animation-delay: -2.4s; }
.ar-voc-info { display: flex; align-items: center; gap: 10px; padding: 14px 16px 0; }
.ar-voc-info img { width: 36px; height: 36px; image-rendering: pixelated; }
.ar-voc-info b { display: block; font-size: 17px; font-weight: 800; }
.ar-voc-info small { color: var(--primary); font-weight: 700; font-size: 12.5px; }
.ar-voc p { margin: 8px 16px 18px; color: var(--muted); font-size: 14px; }
.ar-ganhos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ar-ganho { display: grid; gap: 6px; align-content: start; padding: 22px; border-radius: 18px; background: var(--soft); border: 1px solid var(--line); }
.ar-ganho b { font-size: 17px; font-weight: 800; } .ar-ganho span:not(.ar-ico) { color: var(--muted); font-size: 14px; }
.ar-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #fff; font-size: 24px; box-shadow: 0 1px 2px rgba(18, 20, 58, .06); margin-bottom: 6px; }
.ar-boss { width: 48px; height: 48px; object-fit: none; object-position: 0 0; image-rendering: pixelated; border-radius: 14px; background: #fff; margin-bottom: 6px; box-shadow: 0 1px 2px rgba(18, 20, 58, .06); }
@media (max-width: 1020px) { .ar-hero .embrulho { grid-template-columns: 1fr; } .ar-time, .ar-ganhos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ar-time, .ar-ganhos { grid-template-columns: 1fr; } .ar-hero-tela .aa { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ar-spr { animation: none; } .ar-voc { transition: none; } }

/* ── 2026-10-17: MARKET DO TIBIA (tracker, market.html) ── */
.mk-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mk-cab h1 { margin-top: 10px; }
.mk-fonte { margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.mk-filtros { display: grid; grid-template-columns: 200px minmax(0, 1fr) 200px 220px; gap: 12px; margin-bottom: 16px; }
.mk-filtros label span { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.mk-filtros select, .mk-filtros input { width: 100%; height: 46px; border-radius: 12px; border: 1px solid var(--line); padding: 0 12px; font: 600 14.5px var(--fonte); color: var(--ink); background: #fff; }
.mk-filtros input:focus, .mk-filtros select:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
.mk-lista { padding: 8px 8px 14px; }
.mk-tab-rola { overflow-x: auto; }
.mk-tab { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.mk-tab th { text-align: left; font-size: 11.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding: 12px 14px; white-space: nowrap; }
.mk-tab td { padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: middle; }
.mk-tab .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-tab tbody tr { cursor: pointer; transition: background .12s; }
.mk-tab tbody tr:hover, .mk-tab tbody tr:focus { background: var(--soft); outline: none; }
.mk-item { display: flex; align-items: center; gap: 12px; min-width: 240px; }
.mk-item b { display: block; font-weight: 800; text-transform: capitalize; } .mk-item small { display: block; color: var(--muted); font-size: 12px; }
.mk-ico { width: 32px; height: 32px; image-rendering: pixelated; flex-shrink: 0; }
.mk-flip { display: block; color: var(--ok); font-weight: 700; font-size: 11.5px; }
.mk-vazio { text-align: center; color: var(--muted); font-weight: 600; padding: 28px !important; cursor: default; }
.mk-pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 0; color: var(--muted); font-weight: 600; font-size: 13.5px; }
.mk-pe .btn { height: 38px; padding: 0 14px; font-size: 14px; } .mk-pe .btn[disabled] { opacity: .45; cursor: default; }
.mk-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(14, 23, 38, .45); }
.mk-modal[hidden] { display: none; }
.mk-caixa { position: relative; width: min(720px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.mk-fechar { position: absolute; right: 14px; top: 12px; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: 22px; cursor: pointer; color: var(--muted); }
.mk-m-cab { display: flex; align-items: center; gap: 14px; padding-right: 40px; }
.mk-m-cab img { width: 48px; height: 48px; image-rendering: pixelated; }
.mk-m-cab h2 { margin: 0; font-size: 22px; font-weight: 800; text-transform: capitalize; } .mk-m-cab small { color: var(--muted); font-weight: 600; }
.mk-m-num { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 18px 0; }
.mk-m-num div { padding: 12px; border-radius: 12px; background: var(--soft); }
.mk-m-num small { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.mk-m-num b { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mk-caixa h3 { font-size: 15px; font-weight: 800; margin: 18px 0 10px; }
.mk-svg { width: 100%; height: auto; display: block; background: var(--soft); border-radius: 12px; }
.mk-svg path { fill: none; stroke-width: 2.5; stroke-linejoin: round; } .mk-svg .v { stroke: var(--primary); } .mk-svg .c { stroke: var(--ok); }
.mk-leg { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 8px; font-size: 13px; font-weight: 700; }
.mk-leg .v::before, .mk-leg .c::before { content: ""; display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; background: var(--primary); }
.mk-leg .c::before { background: var(--ok); } .mk-leg small { margin-left: auto; color: var(--muted); font-weight: 600; }
.mk-outros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.mk-outros li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--soft); font-weight: 700; font-size: 14px; }
.mk-outros li.aqui { background: var(--primary-soft); color: var(--primary); } .mk-outros li span { font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .mk-filtros { grid-template-columns: 1fr 1fr; } .mk-busca { grid-column: 1 / -1; order: -1; } .mk-m-num { grid-template-columns: 1fr 1fr; } }
/* destaques do Market */
.mk-dest { margin-bottom: 18px; }
.mk-tc { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-bottom: 22px; background: linear-gradient(135deg, #fff, #F3F6FF); }
.mk-tc img { width: 48px; height: 48px; image-rendering: pixelated; }
.mk-tc small { display: block; color: var(--muted); font-weight: 700; font-size: 12.5px; }
.mk-tc b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mk-tc span { display: block; color: var(--muted); font-weight: 600; font-size: 13.5px; }
.mk-tc .btn { height: 48px; padding: 0 20px; }
.mk-dtit { margin: 4px 0 12px; } .mk-dtit h2 { font-size: 19px; font-weight: 800; margin: 0; } .mk-dtit small { color: var(--muted); font-weight: 600; font-size: 13px; }
.mk-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.mk-card { display: grid; gap: 4px; text-align: left; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: #fff; cursor: pointer; font: inherit; color: var(--ink);
  box-shadow: 0 1px 2px rgba(18, 20, 58, .05); transition: transform .15s, border-color .15s, box-shadow .15s; }
.mk-card:hover { transform: translateY(-3px); border-color: #C9D6FA; box-shadow: 0 2px 4px rgba(18, 20, 58, .06), 0 14px 28px -14px rgba(18, 20, 58, .3); }
.mk-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.mk-card .mk-ico { width: 40px; height: 40px; padding: 4px; border-radius: 12px; background: var(--soft); }
.mk-fam { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--primary); background: var(--primary-soft); padding: 4px 8px; border-radius: 8px; }
.mk-card b { font-size: 14.5px; font-weight: 800; text-transform: capitalize; line-height: 1.25; }
.mk-card strong { font-size: 18px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.mk-card small { color: var(--muted); font-size: 12px; font-weight: 600; }
.mk-cards-p { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .mk-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mk-cards, .mk-cards-p { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mk-tc { grid-template-columns: 40px minmax(0, 1fr); } .mk-tc .btn { grid-column: 1 / -1; } }
/* 2026-10-18: cards do Market mais compactos e sem texto preto pesado (pedido do dono) */
.mk-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.mk-cards-p { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mk-card { grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "ico fam" "ico nome" "ico preco" "ico sub"; column-gap: 10px; row-gap: 1px; padding: 10px 12px; border-radius: 14px; align-items: center; }
.mk-card-top { display: contents; }
.mk-card .mk-ico { grid-area: ico; width: 36px; height: 36px; padding: 2px; border-radius: 10px; align-self: center; }
.mk-fam { grid-area: fam; justify-self: start; font-size: 10px; padding: 2px 6px; border-radius: 6px; }
.mk-card b { grid-area: nome; font-size: 13px; font-weight: 700; color: #3A4060; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-card strong { grid-area: preco; font-size: 15px; font-weight: 800; color: var(--primary); }
.mk-card small { grid-area: sub; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mk-tc { padding: 14px 18px; gap: 14px; margin-bottom: 18px; }
.mk-tc img { width: 40px; height: 40px; }
.mk-tc b { font-size: 24px; color: var(--primary); }
.mk-tc .btn { height: 44px; }
.mk-dtit h2 { font-size: 17px; }
.mk-tab td b, .mk-item b { color: #3A4060; font-weight: 700; }
.mk-tab .n b { color: var(--primary); }
@media (max-width: 1100px) { .mk-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mk-cards, .mk-cards-p { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mk-ico.mk-sem { opacity: .35; filter: grayscale(1); }
/* ── 2026-10-18: GRUPOS DA DASH (grupos.html) — limpo: busca, Trade Hub e grade de servidores ── */
.gr-topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin-bottom: 18px; }
.gr-topo input { height: 54px; border-radius: 14px; border: 1px solid var(--line); padding: 0 18px; font: 600 16px var(--fonte); color: var(--ink); background: #fff; }
.gr-topo input:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
.gr-hub { display: inline-flex; align-items: center; gap: 12px; padding: 0 18px 0 14px; height: 54px; border-radius: 14px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.gr-hub:hover { border-color: #25D366; }
.gr-hub b { display: block; font-size: 15px; } .gr-hub small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
.gr-wa { width: 26px; height: 26px; border-radius: 50%; background: #25D366 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 4a8 8 0 0 0-6.9 12.1L4 20l4-1.1A8 8 0 1 0 12 4zm4.3 11c-.2.5-1 1-1.5 1-.4.1-.9.1-1.5-.1a12 12 0 0 1-4.3-3.6 4.4 4.4 0 0 1-1-2.4c0-1 .5-1.6.7-1.8.2-.2.4-.3.6-.3h.4c.1 0 .3 0 .5.4l.7 1.6c0 .2 0 .3-.1.5l-.3.4c-.1.1-.2.3-.1.5.2.3.7 1.1 1.5 1.8 1 .8 1.8 1.1 2 1.2.3.1.4.1.6-.1l.7-.8c.2-.2.3-.2.5-.1l1.5.7c.2.1.4.2.4.3.1.1.1.5-.1.9z'/%3E%3C/svg%3E") center / 18px no-repeat; flex-shrink: 0; }
.gr-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 40px; }
.gr-sv { display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: #fff;
  border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.gr-sv:hover { border-color: #25D366; transform: translateY(-2px); }
.gr-sv .gr-wa { grid-row: span 2; }
.gr-sv b { font-size: 15px; font-weight: 700; color: #3A4060; }
.gr-sv small { font-size: 12px; font-weight: 700; color: #16A34A; }
.gr-vazio { grid-column: 1 / -1; padding: 26px; border-radius: 16px; background: var(--soft); color: var(--muted); font-weight: 600; text-align: center; }
@media (max-width: 600px) { .gr-topo { grid-template-columns: 1fr; } .gr-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mk-grupo { margin-top: 16px; width: 100%; height: 44px; text-transform: capitalize; }
/* 2026-10-18: setas de tendência no Market (preço de agora × média do mês) */
.mk-tend { display: inline-flex; align-items: center; justify-content: center; padding: 2px 7px; border-radius: 7px; font-size: 11.5px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mk-tend.sobe { background: var(--ok-soft); color: #0E9F6E; }
.mk-tend.desce { background: #FDECEC; color: #C2282D; }
.mk-tend.est { background: var(--soft); color: var(--muted); }
.mk-card { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "ico fam tend" "ico nome tend" "ico preco tend" "ico sub tend"; }
.mk-tend-card { grid-area: tend; align-self: center; font-size: 12.5px; padding: 4px 8px; }
.mk-vl { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.mk-tend.est { padding: 2px 6px; }

/* 2026-10-18 — filtro de cima da lista do Market: armas de boss (padrão) · equipamentos de boss · tudo */
.mk-tipos { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; transition: opacity .15s; }
.mk-tipos button { height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--muted); font: 700 14px var(--fonte); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.mk-tipos button:hover { border-color: var(--primary); color: var(--primary); }
.mk-tipos button[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.mk-tipos.livre { opacity: .45; }

/* 2026-10-18 — GRUPOS mais limpos: lista por letra, só o nome (sem ícone do WhatsApp em cada um) */
.gr-dica { margin: -4px 0 18px; color: var(--muted); font-weight: 600; font-size: 14.5px; }
.gr-lista { display: block; margin-bottom: 48px; }
.gr-letra { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.gr-letra:first-child { border-top: 0; }
.gr-letra h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--primary); line-height: 38px; }
.gr-nomes { display: flex; flex-wrap: wrap; gap: 8px; }
.gr-sv { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: #3A4060; font-weight: 700; font-size: 14.5px; text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
.gr-sv:hover, .gr-sv:focus-visible { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); transform: none; outline: none; }
@media (max-width: 600px) { .gr-letra { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; } }
@media (min-width: 900px) { .gr-lista { columns: 2; column-gap: 40px; } .gr-letra { break-inside: avoid; } .gr-letra:first-child { border-top: 1px solid var(--line); } }

/* 2026-10-18 — PREMIUM MAIS BARATA: faixa com 2 cards largos antes dos combos */
.pm-faixa { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; align-items: center; padding: 22px; margin-bottom: 22px; border-radius: 22px;
  background: linear-gradient(135deg, #1B2048, #2A2F6B); color: #fff; }
.pm-selo { display: inline-flex; padding: 5px 11px; border-radius: 999px; background: #FFE08A; color: #6B4A00; font-weight: 800; font-size: 12.5px; }
.pm-cab h3 { margin: 12px 0 8px; font-size: 28px; line-height: 1.1; letter-spacing: -.02em; color: #fff; }
.pm-cab p { margin: 0; color: #C8CCF0; font-weight: 600; font-size: 15px; } .pm-cab p b { color: #FFE08A; }
.pm-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pm-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px; border-radius: 18px; background: #fff; color: var(--ink); text-decoration: none;
  transition: transform .2s, box-shadow .2s; }
.pm-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .5); }
.pm-capa { position: relative; aspect-ratio: 1 / 1; border-radius: 14px; background: #FFF1CF; display: grid; place-items: center; }
.pm-capa .combo-med { width: 64%; }
.pm-dias { position: absolute; left: 8px; top: 8px; padding: 4px 8px; border-radius: 8px; background: var(--ok); color: #fff; font-weight: 800; font-size: 12px; }
.pm-info { display: grid; gap: 2px; justify-items: start; min-width: 0; }
.pm-info small { color: var(--muted); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
.pm-tag { padding: 3px 8px; border-radius: 7px; background: var(--primary-soft); color: var(--primary); font-weight: 800; font-size: 11.5px; margin: 2px 0; }
.pm-q { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.pm-preco { display: flex; align-items: baseline; gap: 8px; }
.pm-preco strong { font-size: 26px; font-weight: 800; color: var(--primary); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pm-preco s { color: var(--muted); font-weight: 600; font-size: 14px; }
.pm-sub { color: #16A34A; font-weight: 700; font-size: 13px; }
.pm-bt { margin-top: 8px; height: 38px; padding: 0 16px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--primary); color: #fff; font-weight: 800; font-size: 14px; }
.pm-card:hover .pm-bt { background: #1740B8; }
@media (max-width: 1100px) { .pm-faixa { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .pm-cards { grid-template-columns: 1fr; } .pm-card { grid-template-columns: 96px minmax(0, 1fr); } .pm-cab h3 { font-size: 23px; } }
.pm-preco strong, .pm-preco s, .pm-bt { white-space: nowrap; }
@media (max-width: 640px) { .pm-faixa { padding: 16px; } .pm-card { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .pm-dias { font-size: 10.5px; padding: 3px 6px; left: 5px; top: 5px; } .pm-preco strong { font-size: 22px; } .pm-bt { height: 36px; padding: 0 14px; } }

/* 2026-10-18 — capas sem o mascote repetido: sprites do Tibia grandes e nítidos */
.combo-sprite { position: relative; width: 50%; aspect-ratio: 1 / 1; image-rendering: pixelated; filter: drop-shadow(0 10px 12px rgba(18, 20, 58, .22)); transition: transform .25s; }
.combo:hover .combo-sprite { transform: translateY(-4px) scale(1.05); }
.tom-escuro .combo-sprite { filter: drop-shadow(0 0 18px rgba(242, 196, 107, .35)) drop-shadow(0 10px 12px rgba(0, 0, 0, .4)); }
.pm-capa { overflow: hidden; }
.pm-scroll { width: 66%; aspect-ratio: 1 / 1; background: url(img/combos/premium-scroll.png) 0 0 / 700% 100% no-repeat; image-rendering: pixelated;
  animation: pmBrilho 1.4s steps(6) infinite; filter: drop-shadow(0 8px 10px rgba(18, 20, 58, .25)); }
@keyframes pmBrilho { to { background-position: 100% 0; } }
.pm-tc { position: absolute; right: 6%; bottom: 6%; width: 44%; aspect-ratio: 1 / 1; background: url(img/tibia-coins-pilha.png) 0 0 / 1200% 100% no-repeat; image-rendering: pixelated;
  animation: comboBrilho 1.8s steps(12, jump-none) infinite; filter: drop-shadow(0 6px 8px rgba(18, 20, 58, .35)); }
.pm-card:has(.pm-tc) .pm-scroll { transform: translate(-12%, -8%); }
@media (prefers-reduced-motion: reduce) { .pm-scroll, .pm-tc { animation: none; } }

/* 2026-10-18 — combos: só Tibia Coins, mais pilhas quanto maior o combo (sem gold, sem mascote repetido) */
.combo-monte { position: relative; width: 78%; aspect-ratio: 1 / 1; }
.combo-monte i { position: absolute; transform: translate(-50%, -50%); aspect-ratio: 1 / 1; background: url(img/tibia-coins-pilha.png) 0 0 / 1200% 100% no-repeat; image-rendering: pixelated;
  animation: comboBrilho 1.8s steps(12, jump-none) infinite; filter: drop-shadow(0 6px 8px rgba(18, 20, 58, .28)); transition: transform .25s; }
.combo:hover .combo-monte i { transform: translate(-50%, calc(-50% - 4px)); }
.tom-escuro .combo-monte i { filter: drop-shadow(0 0 10px rgba(242, 196, 107, .35)) drop-shadow(0 6px 8px rgba(0, 0, 0, .45)); }
.combo-monte.n1 i:nth-child(1) { left: 50%; top: 52%; width: 50%; }
.combo-monte.n2 i:nth-child(1) { left: 36%; top: 56%; width: 42%; }
.combo-monte.n2 i:nth-child(2) { left: 64%; top: 50%; width: 42%; }
.combo-monte.n3 i:nth-child(1) { left: 28%; top: 62%; width: 36%; }
.combo-monte.n3 i:nth-child(2) { left: 72%; top: 62%; width: 36%; }
.combo-monte.n3 i:nth-child(3) { left: 50%; top: 42%; width: 38%; }
.combo-monte.n4 i:nth-child(1) { left: 24%; top: 64%; width: 32%; }
.combo-monte.n4 i:nth-child(2) { left: 50%; top: 64%; width: 32%; }
.combo-monte.n4 i:nth-child(3) { left: 76%; top: 64%; width: 32%; }
.combo-monte.n4 i:nth-child(4) { left: 50%; top: 40%; width: 34%; }
.combo-monte.n5 i:nth-child(1) { left: 24%; top: 66%; width: 30%; }
.combo-monte.n5 i:nth-child(2) { left: 50%; top: 66%; width: 30%; }
.combo-monte.n5 i:nth-child(3) { left: 76%; top: 66%; width: 30%; }
.combo-monte.n5 i:nth-child(4) { left: 37%; top: 44%; width: 30%; }
.combo-monte.n5 i:nth-child(5) { left: 63%; top: 44%; width: 30%; }
.combo-monte.n6 i:nth-child(1) { left: 22%; top: 70%; width: 27%; }
.combo-monte.n6 i:nth-child(2) { left: 50%; top: 70%; width: 27%; }
.combo-monte.n6 i:nth-child(3) { left: 78%; top: 70%; width: 27%; }
.combo-monte.n6 i:nth-child(4) { left: 36%; top: 50%; width: 27%; }
.combo-monte.n6 i:nth-child(5) { left: 64%; top: 50%; width: 27%; }
.combo-monte.n6 i:nth-child(6) { left: 50%; top: 30%; width: 28%; }
.pm-coroa { width: 70%; image-rendering: pixelated; filter: drop-shadow(0 8px 10px rgba(18, 20, 58, .25)); transition: transform .25s; }
.pm-card:hover .pm-coroa { transform: translateY(-3px); }
.pm-card:has(.pm-tc) .pm-coroa { transform: translate(-12%, -10%); width: 62%; }
@media (prefers-reduced-motion: reduce) { .combo-monte i { animation: none; } }
.dq-rapido .dq-ico { color: #B7791F; }   /* 2026-10-18: raio em vetor no lugar da TC, na cor do card */

/* 2026-10-18 — 1ª DOBRA COM A PREMIUM: em cima a manchete + caixinha; no pé, a faixa azul que nasce das ondas
   (as ondas desenham só os --onda-z px de cima; o azul desce até o fim e termina numa beiradinha na cor de baixo) */
.hero { flex-direction: column; align-items: stretch; padding: 12px 0 0; --onda-z: 110px; }
.hero > .embrulho { flex: 1; align-content: center; z-index: 3; }
.hero-pm { position: relative; z-index: 2; margin-top: -56px; padding: var(--onda-z) 0 64px; }
.hero-pm .ondas { position: absolute; inset: 0; height: auto; bottom: -1px; z-index: 0; --onda-z: inherit; }
.hero-pm .pm-faixa { position: relative; z-index: 1; background: none; padding: 0; margin-bottom: 0; border-radius: 0; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: 28px; }
.hero-pm .pm-cab h3 { font-size: 26px; margin: 10px 0 6px; }
.hero-pm .pm-cab p { color: #DCE4FF; }
.hero-pm .pm-card { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 12px; box-shadow: 0 14px 30px -18px rgba(5, 10, 40, .6); }
.hero-pm .pm-preco strong { font-size: 24px; }
.hero-pm .pm-bt { margin-top: 6px; }
.hero-pm .rolar { bottom: 10px; animation-name: rolarPula; }
.hero .rolar { bottom: 12px; }
/* a seção de destaques já começa na cor da beiradinha */
.destaques { padding-top: 28px; }
@media (max-height: 820px) and (min-width: 901px) {
  .hero { --onda-z: 90px; } .hero-pm { margin-top: -44px; padding-bottom: 56px; }
  .hero-pm .pm-sub { display: none; } .hero .rolar { bottom: 8px; }
}
@media (max-width: 1100px) { .hero-pm .pm-faixa { grid-template-columns: 1fr; gap: 16px; } }
@media (max-width: 900px) { .hero { padding-bottom: 0; } .hero-pm { margin-top: 8px; padding: 80px 0 60px; } .hero-pm .rolar { display: none; } }
@media (max-width: 640px) { .hero-pm .pm-card { grid-template-columns: 76px minmax(0, 1fr); } }
/* faixa da premium na 1ª dobra: mesma largura do site e cards compactos numa linha (scroll | nome e preço | botão) */
.hero-pm .pm-faixa { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 24px; align-items: center; }
.hero-pm .pm-card { grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; }
.hero-pm .pm-capa { border-radius: 12px; }
.hero-pm .pm-info small, .hero-pm .pm-tag, .hero-pm .pm-sub { display: none; }
.hero-pm .pm-q { font-size: 16px; line-height: 1.2; }
.hero-pm .pm-preco strong { font-size: 22px; }
.hero-pm .pm-info > .pm-bt { display: none; }
.hero-pm .pm-ir { height: 40px; padding: 0 16px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--primary); color: #fff; font-weight: 800; font-size: 14px; white-space: nowrap; }
.hero-pm .pm-card:hover .pm-ir { background: #1740B8; }
@media (max-width: 1240px) { .hero-pm .pm-ir { padding: 0 12px; font-size: 13px; } }
@media (max-width: 640px) { .hero-pm .pm-card { grid-template-columns: 56px minmax(0, 1fr); } .hero-pm .pm-ir { grid-column: 1 / -1; } }
.hero-pm .pm-faixa { padding: 0 var(--respiro); }
/* a caixinha encosta no topo das ondas: a faixa sobe por baixo dela e cabe na tela */
.hero-pm { margin-top: -96px; padding-bottom: 58px; }
.hero-pm .rolar { bottom: 12px; }
@media (max-height: 860px) and (min-width: 901px) {
  .hero { --onda-z: 86px; } .hero-pm { margin-top: -100px; padding-bottom: 54px; }
  .hero-pm .pm-cab p { display: none; } .hero-pm .pm-cab h3 { font-size: 24px; margin-bottom: 0; }
}
@media (max-width: 900px) { .hero-pm { margin-top: 8px; } }

/* 2026-10-18 — TESTES DE LAYOUT: correções de celular/tablet (o bloco do "layout aberto" acima forçava 2 colunas) */
@media (max-width: 760px) {
  .hero .embrulho { grid-template-columns: 1fr; gap: 28px; }
  .hero .calc { width: 100%; max-width: none; }
}
@media (max-width: 480px) {
  .topo .embrulho { gap: 12px; }
  .topo .lado { gap: 6px; }
  .topo .lado .vivo { font-size: 0; gap: 0; padding: 0; width: 40px; height: 40px; justify-content: center; }
  .topo .lado .vivo .ponto { margin: 0; }
  .topo .lado .btn-c { padding: 0 12px; height: 40px; font-size: 14px; }
}
@media (max-width: 360px) { .marca span { font-size: 17px; } .topo .lado .btn-c { padding: 0 10px; font-size: 13px; } }
/* tablet de pé e menores: uma coluna (manchete em cima, caixinha embaixo, centralizada) — antes a manchete invadia a caixinha */
@media (max-width: 1020px) {
  .hero .embrulho { grid-template-columns: 1fr; gap: 28px; }
  .hero .calc { width: 100%; max-width: 560px; justify-self: center; }
  .hero-txt { text-align: left; }
}
@media (min-width: 901px) and (max-width: 1100px) { .hero-pm .pm-faixa { grid-template-columns: 240px minmax(0, 1fr); gap: 20px; } .hero-pm .pm-cab h3 { font-size: 22px; } }
/* celular: manchete cabe na tela e o contador quebra bonito (rótulo em cima, número junto) */
@media (max-width: 480px) {
  .hero h1.impacto { font-size: min(13.5vw, 52px); }
  .entregas .ent-linha { display: inline; }
  .entregas .ent-rot { white-space: normal; }
  .entregas .ent-placar { margin-left: 4px; vertical-align: baseline; }
}
@media (max-width: 480px) { .entregas, .entregas.vender-link { white-space: normal; max-width: 100%; display: block; } }
@media (min-width: 1021px) and (max-width: 1100px) { .hero .embrulho { grid-template-columns: minmax(0, 1fr) 420px; gap: 36px; } }
/* a 2ª linha da manchete não quebra: a coluna precisa poder encolher (senão empurra o contador pra fora) */
@media (max-width: 1020px) { .hero .embrulho { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { h1.impacto .l2 { font-size: .64em; } }
/* comprar/vender no celular pequeno: − e + mais estreitos, "TC" só com o ícone → o número cabe */
@media (max-width: 400px) {
  .stepper { gap: 6px; } .stepper > button { width: 42px; min-width: 42px; padding: 0; }
  .stepper .caixa { padding: 0 10px; min-width: 0; } .stepper .caixa input { min-width: 0; font-size: 20px; }
  .stepper .moeda-tc { font-size: 0; gap: 0; } .stepper .moeda-tc img { margin: 0; }
}
/* 1024×768 e parecidas (caixinha alta): a faixa não sobe tanto, pra caixinha não cobrir os cards */
@media (max-height: 800px) and (min-width: 901px) and (max-width: 1100px) { .hero-pm { margin-top: -30px; } }
@media (min-width: 901px) and (max-width: 1100px) { .hero-pm .pm-faixa { grid-template-columns: minmax(0, 1fr); gap: 14px; } .hero-pm .pm-cab p { display: none; } }

/* 2026-10-18 (pedido do dono): última dobra — dúvidas e suporte num bloco só; os passos foram pra faixa azul */
.ajuda-sec { padding: 72px 0 64px; }
.ajuda { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; max-width: 1120px; margin: 0 auto; }
.ajuda-faq h2 { margin: 0 0 18px; }
.ajuda .faq { margin: 0; max-width: none; }
.ajuda-sup { background: #12143A; color: #fff; border-radius: 22px; padding: 28px; display: grid; gap: 12px; position: sticky; top: 96px; }
.ajuda-sup h3 { margin: 0; font-size: 24px; line-height: 1.2; }
.ajuda-sup p { margin: 0; color: rgba(255, 255, 255, .76); }
.sup-tag { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #7CF0A8; background: rgba(124, 240, 168, .12); padding: 6px 12px; border-radius: 99px; }
.sup-tag i { width: 8px; height: 8px; border-radius: 50%; background: #25D366; box-shadow: 0 0 0 4px rgba(37, 211, 102, .2); }
.ajuda-sup .sup-wa { margin-top: 6px; background: #25D366; color: #fff; border: 0; display: flex; align-items: center; justify-content: center; gap: 10px; }
.ajuda-sup .sup-wa:hover { background: #1EBE5A; }
.sup-ped { color: #fff; text-align: center; font-weight: 700; text-decoration: none; opacity: .82; padding: 6px; }
.sup-ped:hover { opacity: 1; text-decoration: underline; }
.final-passos { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px; padding: 0; margin: 4px 0 8px; counter-reset: p; color: rgba(255, 255, 255, .88); font-weight: 600; }
.final-passos li { counter-increment: p; display: flex; align-items: center; gap: 10px; }
.final-passos li::before { content: counter(p); width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .18); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
@media (max-width: 900px) { .ajuda { grid-template-columns: minmax(0, 1fr); } .ajuda-sup { position: static; } }
@media (max-width: 600px) { .final { padding: 36px 22px; } .final-passos { flex-direction: column; align-items: flex-start; margin: 4px auto 8px; } .final h2 { font-size: 28px; } }

/* 2026-10-18: âncoras não ficam mais embaixo do cabeçalho fixo (72 px) */
html { scroll-padding-top: 88px; }
/* 2026-10-18 (pedido do dono): Comprar/Vender (menu, cards, tabela, faixa final) → um feixe de luz dá 1 volta na borda
   da caixinha. É um SVG que o app.js cria na hora (feixe()); pathLength=100, então a volta é sempre de 0 a 100.
   Cada traço tem comprimento L e a ponta de todos anda junta: dashoffset vai de L até L-100 (animado no app.js). */
.calc { position: relative; }
.calc-feixe { position: absolute; left: -1px; top: -1px; pointer-events: none; overflow: visible; z-index: 2; }
.calc-feixe rect { fill: none; stroke-linecap: round; }   /* o movimento é feito no app.js (Web Animations) */
.calc-feixe .cauda { stroke: #22D3EE; stroke-width: 1.5; opacity: .16; }
.calc-feixe .meio { stroke: #22D3EE; stroke-width: 1.75; opacity: .45; }
.calc-feixe .ponta { stroke: #9AF5FF; stroke-width: 2.25; filter: drop-shadow(0 0 2.5px #22D3EE) drop-shadow(0 0 6px rgba(34, 211, 238, .55)); }
@media (prefers-reduced-motion: reduce) {
  .calc-feixe rect { stroke-dasharray: none; }
  .calc-feixe .cauda, .calc-feixe .meio { display: none; }
  .calc-feixe .ponta { filter: none; stroke: var(--primary); opacity: .6; }
}

/* 2026-10-18: venda pela caixinha — selo da conta Dash, onde receber e o painel "transfira para" */
.cx-conta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.cx-selo { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 800; background: var(--primary-soft); color: var(--primary-2); }
.cx-selo.v { background: var(--ok-soft); color: var(--ok); }
.cx-transf { margin-top: 14px; }
.cx-transf p { margin: 0 0 8px; font-size: 14.5px; color: var(--muted); } .cx-transf b { color: var(--ink); }
.cx-transf #cxDest { font-weight: 800; font-size: 16px; }
.cx-transf .cx-recebe { margin: 10px 0 0; }
.cx-zap { background: #25D366; color: #fff; border: 0; }
.cx-zap:hover { background: #1EBE5A; }

/* 2026-10-18: WhatsApp com bandeirinha (telefone.js) */
.caixa.tel { padding-left: 6px; gap: 6px; }
.tel-pais { display: inline-flex; align-items: center; gap: 6px; height: calc(100% - 10px); padding: 0 8px; border: 0; border-right: 1px solid var(--line); border-radius: 8px 0 0 8px; background: transparent; color: var(--ink); font: 700 14px var(--fonte); cursor: pointer; flex: none; }
.tel-pais:hover, .tel-pais[aria-expanded="true"] { background: var(--soft); }
.tel-pais img, .tel-lista img { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(14, 23, 38, .1); flex: none; }
.tel-pais svg { color: var(--muted); }
.caixa.tel input { flex: 1; min-width: 0; letter-spacing: .01em; }
.tel-ok { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; font-size: 13px; font-weight: 800; transform: scale(0); transition: transform .18s; }
.caixa.tel.ok .tel-ok { transform: scale(1); }
.caixa.tel.ok { border-color: var(--ok); }
.caixa.tel.erro { border-color: #D93A3A; }
.tel-msg { margin: 5px 0 0; font-size: 12.5px; font-weight: 700; color: #D93A3A; }
.tel-msg:empty { display: none; }
.tel-lista { position: absolute; left: 0; right: 0; z-index: 30; margin: 6px 0 0; padding: 6px; list-style: none; max-height: 260px; overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px -16px rgba(14, 23, 38, .35); }
.tel-lista li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; cursor: pointer; font-size: 14.5px; outline: none; }
.tel-lista li:hover, .tel-lista li:focus { background: var(--soft); }
.tel-lista li[aria-selected="true"] { background: var(--primary-soft); }
.tel-lista .tel-nome { flex: 1; } .tel-lista b { color: var(--muted); font-weight: 700; font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) { .tel-ok { transition: none; } }
/* 2026-10-18: card de suporte saiu — as dúvidas ficam numa coluna só, centralizada */
.ajuda { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.ajuda-faq h2 { text-align: center; }

/* ── 2026-10-18 (pedido do dono): 1ª dobra = só manchete + caixinha (tela cheia); a faixa da premium é a 1ª coisa do scroll.
   A faixa sobe --onda-z px por cima do pé da 1ª dobra: as ondas aparecem no fim da tela e o azul continua até os cards.
   (Recolocado: tinha sumido junto com o feixe antigo. Fica no FIM do arquivo pra vencer as regras antigas da faixa.) */
.hero, .hero-pm { --onda-z: 110px; }
.hero { min-height: calc(100svh - var(--topo-h, 73px)); padding: 12px 0 calc(var(--onda-z) + 12px); }
.hero-pm { margin-top: calc(-1 * var(--onda-z)); padding: calc(var(--onda-z) + 18px) 0 64px; }
.hero .rolar { bottom: calc(var(--onda-z) * .5 - 22px); animation-name: rolarPula; }
@media (max-height: 860px) and (min-width: 901px) { .hero, .hero-pm { --onda-z: 86px; } }
@media (max-width: 900px) { .hero { min-height: 0; padding-bottom: calc(var(--onda-z) + 24px); } .hero, .hero-pm { --onda-z: 80px; } }

/* 2026-10-18: Market — coluna "Em reais na Dash" (valor em destaque + quantas TC embaixo) */
.mk-real b { display: block; color: var(--ok); font-weight: 800; white-space: nowrap; }
.mk-real small { display: block; color: var(--muted); font-size: 12px; }

/* 2026-10-18: gráfico do item (30 dias do TibiaMarket) com leitura do dia + botão do Trade Hub */
.mk-graf-in { position: relative; touch-action: pan-y; }
.mk-svg .grade { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; }
.mk-svg .area { fill: rgba(31, 79, 224, .07); stroke: none; }
.mk-svg .guia { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.mk-svg .marca { opacity: 0; transition: opacity .12s; } .mk-svg .marca.on { opacity: 1; }
.mk-svg .pv { fill: #fff; stroke: var(--primary); stroke-width: 2.5; } .mk-svg .pc { fill: #fff; stroke: var(--ok); stroke-width: 2.5; }
.mk-dica { position: absolute; top: 8px; transform: translateX(-50%); display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; pointer-events: none; box-shadow: 0 8px 20px -10px rgba(14, 23, 38, .5); }
.mk-dica b { font-size: 11px; opacity: .7; } .mk-dica .v { color: #A9C1FF; } .mk-dica .c { color: #7CE3B4; }
.mk-grupo { display: flex; align-items: center; justify-content: center; gap: 10px; background: #25D366; color: #fff; border: 0; text-transform: none; font-weight: 800; }
.mk-grupo:hover { background: #1EBE5A; }
.mk-grupo-wa { width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.9 9.9 0 0 0 4.74 1.21c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.9 9.9 0 0 0 4.74 1.21c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.mk-m-num .mk-m-extra { margin-top: 2px; text-transform: none; letter-spacing: 0; font-weight: 600; }

/* ── 2026-10-18 (pedido do dono, opção C): combos = destaque do mais vendido + lista com preço por 250 TC ── */
.cb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 18px; margin-top: 28px; }
.cb-top { position: relative; overflow: hidden; border-radius: 24px; padding: 30px; color: #fff; text-decoration: none; background: radial-gradient(120% 120% at 100% 100%, #2F5BEA 0%, #1C3DB8 45%, #12143A 100%); display: grid; grid-template-columns: minmax(0, 1fr) 170px; align-items: center; gap: 12px; transition: transform .15s, box-shadow .15s; }
.cb-top:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -24px rgba(18, 20, 58, .7); }
.cb-top-tx { display: grid; gap: 4px; justify-items: start; }
.cb-top-tx small { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .78; }
.cb-top-q { font-size: clamp(34px, 3.4vw, 46px); line-height: 1.05; }
.cb-top-pr { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; } .cb-top-pr s { opacity: .62; } .cb-top-pr strong { font-size: 28px; }
.cb-top-eco { color: #7CF0A8; font-weight: 800; font-size: 14.5px; }
.cb-top-bt { margin-top: 14px; height: 48px; padding: 0 24px; border-radius: 12px; display: inline-grid; place-items: center; background: #fff; color: var(--primary); font-weight: 800; }
.cb-top:hover .cb-top-bt { background: #EAF0FF; }
.cb-top-monte { width: 170px; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .45)); }
.cb-pct { position: absolute; top: 18px; right: 18px; background: var(--ok); color: #fff; font-weight: 800; font-size: 14px; padding: 5px 10px; border-radius: 9px; }
.cb-lista { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 8px; display: grid; align-content: center; }
.cb-lin { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto 100px; gap: 16px; align-items: center; padding: 13px 14px; border-radius: 14px; text-decoration: none; color: var(--ink); }
.cb-lin + .cb-lin { border-top: 1px solid var(--line); }
.cb-lin:hover { background: var(--soft); }
.cb-lin img { width: 28px; height: 28px; image-rendering: pixelated; }
.cb-nm b { display: block; font-size: 17px; } .cb-nm small { display: block; color: var(--muted); font-size: 12.5px; }
.cb-250 { font-size: 13px; color: var(--muted); white-space: nowrap; } .cb-250 b { color: var(--ok); }
.cb-vl { display: flex; align-items: center; gap: 8px; justify-content: flex-end; white-space: nowrap; }
.cb-vl strong { color: var(--primary); font-size: 17px; }
.cb-pct-s { background: var(--ok-soft); color: var(--ok); font-weight: 800; font-size: 12px; padding: 3px 7px; border-radius: 7px; }
.cb-bt { height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-weight: 800; font-size: 14px; }
.cb-lin:hover .cb-bt { background: var(--primary); color: #fff; }
@media (max-width: 1100px) { .cb { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .cb-lin { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; } .cb-250, .cb-bt { display: none; } .cb-nm small { white-space: normal; } }
@media (max-width: 520px) {
  .cb-top { grid-template-columns: minmax(0, 1fr) 96px; padding: 22px 20px; }
  .cb-top-monte { width: 96px; } .cb-top-q { font-size: 34px; } .cb-top-pr strong { font-size: 24px; }
  .cb-top-bt { height: 44px; }
  .cb-vl { flex-direction: column; align-items: flex-end; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .cb-top, .cb-top:hover { transition: none; transform: none; } }
@media (max-width: 520px) { .cb-top-tx small { padding-right: 60px; } }

/* ── 2026-10-18 (pedido do dono): propaganda do Trade Hub no fim da home (no lugar da faixa azul) ── */
.hub-sec { padding-bottom: 88px; }
.hub { position: relative; overflow: hidden; border-radius: 28px; padding: 44px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 36px; align-items: center; color: #fff;
  background: radial-gradient(90% 120% at 100% 0%, rgba(37, 211, 102, .32) 0%, transparent 55%), radial-gradient(80% 120% at 0% 100%, rgba(31, 79, 224, .55) 0%, transparent 60%), #0D1430; }
.hub::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; }
.hub > * { position: relative; }
.hub-selo { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #7CF0A8; background: rgba(37, 211, 102, .14); padding: 6px 12px; border-radius: 99px; }
.hub-selo i { width: 8px; height: 8px; border-radius: 50%; background: #25D366; box-shadow: 0 0 0 4px rgba(37, 211, 102, .22); animation: hubPulso 2s ease-in-out infinite; }
@keyframes hubPulso { 50% { box-shadow: 0 0 0 7px rgba(37, 211, 102, 0); } }
.hub h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1.05; margin: 16px 0 12px; letter-spacing: -.02em; } .hub h2 b { color: #7CF0A8; }
.hub-tx p { margin: 0; font-size: 18px; color: rgba(255, 255, 255, .8); max-width: 520px; } .hub-tx p b { color: #fff; }
.hub-chips { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hub-chips li { font-size: 13.5px; font-weight: 700; padding: 7px 12px; border-radius: 99px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.hub-chips li::before { content: '✓'; color: #7CF0A8; margin-right: 6px; font-weight: 800; }
.hub-acoes { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 28px; }
.hub-bt { height: 54px; padding: 0 26px; border-radius: 14px; display: inline-flex; align-items: center; gap: 10px; background: #25D366; color: #fff; border: 0; font-size: 17px; font-weight: 800; box-shadow: 0 14px 30px -14px rgba(37, 211, 102, .8); }
.hub-bt:hover { background: #1EBE5A; }
.hub-wa { width: 22px; height: 22px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.9 9.9 0 0 0 4.74 1.21c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.9 9.9 0 0 0 4.74 1.21c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.hub-link { color: rgba(255, 255, 255, .85); font-weight: 700; text-decoration: none; } .hub-link:hover { color: #fff; text-decoration: underline; }
/* o "celular" */
.hub-cel { justify-self: center; width: min(100%, 390px); border-radius: 26px; overflow: hidden; background: #0B141A; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7), 0 0 0 8px rgba(255, 255, 255, .06); transform: rotate(2deg); }
.hub-cel-cab { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #1F2C34; }
.hub-cel-cab img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.hub-cel-cab b { display: block; font-size: 14.5px; } .hub-cel-cab small { display: block; font-size: 12px; color: #8FA3AE; min-height: 1.3em; }
.hub-msgs { height: 330px; padding: 14px 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; overflow: hidden;
  background: #0B141A radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 16px 16px; }
.hub-msg { align-self: flex-start; max-width: 86%; background: #202C33; border-radius: 4px 12px 12px 12px; padding: 7px 10px 6px; font-size: 13.5px; color: #E9EDEF; opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .35s, transform .35s; }
.hub-msg.dir { align-self: flex-end; background: #005C4B; border-radius: 12px 4px 12px 12px; }
.hub-msg.on, .hub-msgs .hub-msg:not(:last-child) { opacity: 1; transform: none; }
.hub-msg-top { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.hub-sv { font-size: 12px; font-weight: 800; color: #53BDEB; } .hub-msg.dir .hub-sv { color: #7CF0A8; }
.hub-tipo { font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 5px; letter-spacing: .03em; }
.hub-tipo.v { background: rgba(37, 211, 102, .2); color: #7CF0A8; } .hub-tipo.c { background: rgba(83, 189, 235, .2); color: #9EDBFF; } .hub-tipo.t { background: rgba(255, 196, 61, .2); color: #FFD77A; }
.hub-msg-corpo { display: flex; align-items: center; gap: 8px; }
.hub-imgs { display: inline-flex; gap: 2px; flex: none; } .hub-imgs img { width: 32px; height: 32px; image-rendering: pixelated; background: rgba(255, 255, 255, .06); border-radius: 6px; }
.hub-hora { display: block; text-align: right; font-size: 10.5px; color: #8FA3AE; margin-top: 2px; }
@media (max-width: 900px) { .hub { grid-template-columns: minmax(0, 1fr); padding: 30px 22px; gap: 28px; } .hub-cel { transform: none; } .hub-msgs { height: 290px; } }
@media (max-width: 480px) { .hub-bt { width: 100%; justify-content: center; } .hub-tx p { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .hub-msg { opacity: 1; transform: none; transition: none; } .hub-selo i { animation: none; } }

/* ── 2026-10-18 (pedido do dono): Dúvidas dividida no meio — perguntas | entregas de agora ── */
.ajuda { grid-template-columns: minmax(0, 1fr) 400px; max-width: 1120px; gap: 32px; }
.ajuda-faq h2 { text-align: left; }
.ajuda:has(.ult-card[hidden]) { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.ult-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 24px; box-shadow: var(--sombra); position: sticky; top: 96px; margin-top: 58px; }
.agora-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-direction: row-reverse; }
.agora-cab h3 { margin: 0; font-size: 20px; }
.agora-vivo { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; color: #D93A3A; background: #FDECEC; padding: 4px 10px; border-radius: 99px; text-transform: uppercase; letter-spacing: .04em; }
.agora-vivo i { width: 7px; height: 7px; border-radius: 50%; background: #E5484D; animation: agoraPisca 1.4s ease-in-out infinite; }
@keyframes agoraPisca { 50% { opacity: .25; } }
.agora-sub { margin: 6px 0 14px; color: var(--muted); font-size: 14px; }
.agora-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.agora-lista li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 11px 2px; border-top: 1px solid var(--line); transition: opacity .4s, transform .4s, background .8s; }
.agora-lista li:first-child { border-top: 0; }
.agora-lista li.nova { opacity: 0; transform: translateY(-8px); background: var(--ok-soft); }
.agora-lista img { width: 28px; height: 28px; image-rendering: pixelated; }
.agora-tx b { display: block; font-size: 15.5px; } .agora-tx small { display: block; color: var(--muted); font-size: 12.5px; }
.agora-ha { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.agora-ok { font-size: 11.5px; font-weight: 800; color: var(--ok); background: var(--ok-soft); padding: 3px 8px; border-radius: 7px; }
.agora-ir { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 16px; border-radius: 12px; background: #9146FF; color: #fff; text-decoration: none; font-weight: 800; }
.agora-ir:hover { background: #7A33E8; }
@media (max-width: 900px) { .ajuda { grid-template-columns: minmax(0, 1fr); } .ult-card { position: static; margin-top: 0; } }
@media (prefers-reduced-motion: reduce) { .agora-vivo i { animation: none; } .agora-lista li { transition: none; } }

/* 2026-10-18 (pedido do dono): o "celular" do Trade Hub no tema CLARO do WhatsApp (o fundo preto não fazia sentido) */
.hub-cel { background: #EFEAE2; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6), 0 0 0 8px rgba(255, 255, 255, .1); }
.hub-cel-cab { background: #008069; color: #fff; }
.hub-cel-cab small { color: rgba(255, 255, 255, .8); }
.hub-msgs { background: #EFEAE2 radial-gradient(rgba(120, 100, 70, .08) 1px, transparent 1px) 0 0 / 16px 16px; }
.hub-msg { background: #fff; color: #111B21; box-shadow: 0 1px 1px rgba(11, 20, 26, .13); }
.hub-msg.dir { background: #D9FDD3; }
.hub-sv { color: #1F7AC4; } .hub-msg.dir .hub-sv { color: #0B7A45; }
.hub-tipo.v { background: #D1F4DD; color: #0B7A45; } .hub-tipo.c { background: #DCEBFA; color: #1F5FA8; } .hub-tipo.t { background: #FFF0C7; color: #946200; }
.hub-imgs img { background: rgba(11, 20, 26, .05); }
.hub-hora { color: #667781; }

/* ── 2026-10-18 (pedido do dono): respiros da home num ritmo só (~64 px no computador, ~48 px no celular).
   Antes sobravam 150–175 px entre destaques→live, combos→dúvidas e hub→rodapé. ── */
.agora-cab { margin-bottom: 10px; }
main > section.secao:not(.ajuda-sec):not(.combos-sec) { padding: 40px 0 64px; }
#ofertas { padding-bottom: 64px; }
#suporte { padding: 0 0 64px; }
.hub-sec { padding-bottom: 0; }
.rodape { margin-top: 64px; }
@media (max-width: 760px) {
  main > section.secao:not(.ajuda-sec):not(.combos-sec) { padding: 32px 0 48px; }
  #ofertas, #suporte { padding-bottom: 48px; }
  .rodape { margin-top: 48px; }
}
.destaques { padding-bottom: 16px; }
main > section.secao:not(.ajuda-sec):not(.combos-sec) { padding-top: 28px; }
@media (max-width: 760px) { main > section.secao:not(.ajuda-sec):not(.combos-sec) { padding: 20px 0 24px; } }
@media (min-width: 901px) { #suporte { padding-bottom: 88px; } }

/* 2026-10-18 (pedido do dono): Grupos — filtro por região com bandeirinha */
.gr-regioes { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; transition: opacity .15s; }
.gr-regioes.livre { opacity: .45; }
.gr-reg { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: 700 14px var(--fonte); cursor: pointer; }
.gr-reg:hover { border-color: var(--primary); }
.gr-reg[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.gr-reg img { width: 20px; height: 15px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(14, 23, 38, .12); }
.gr-reg small { font-size: 12px; font-weight: 800; padding: 1px 7px; border-radius: 99px; background: var(--soft); color: var(--muted); }
.gr-reg[aria-pressed="true"] small { background: rgba(255, 255, 255, .2); color: #fff; }
.gr-regioes + .gr-dica { margin-top: 12px; }
@media (max-width: 480px) { .gr-reg { height: 38px; padding: 0 12px; font-size: 13.5px; } }

/* 2026-10-18 (pedido do dono): Dúvidas na mesma largura dos combos e do Trade Hub (antes ficava 1120 px no meio) */
.ajuda { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(360px, .62fr); gap: 24px; }
.ajuda:has(.ult-card[hidden]) { max-width: none; }
.ajuda .faq details { padding-left: 24px; padding-right: 24px; }
.agora-lista li { padding: 9px 2px; }
@media (max-width: 900px) { .ajuda { grid-template-columns: minmax(0, 1fr); } .ult-card { position: static; margin-top: 0; } }

/* 2026-10-19: arte de moedas no combo em destaque (substitui .cb-top-monte) */
.cb-top { grid-template-columns: minmax(0, 1fr) 200px; }
.cb-top-arte { width: 200px; height: auto; display: block; filter: drop-shadow(0 18px 24px rgba(8, 10, 40, .5)); animation: cbFlutua 4.5s ease-in-out infinite; transition: transform .2s; }
.cb-top:hover .cb-top-arte { transform: scale(1.04) rotate(-2deg); }
@keyframes cbFlutua { 50% { translate: 0 -6px; } }
@media (max-width: 900px) { .cb-top { grid-template-columns: minmax(0, 1fr) 128px; } .cb-top-arte { width: 128px; } }
@media (max-width: 420px) { .cb-top { grid-template-columns: minmax(0, 1fr) 96px; } .cb-top-arte { width: 96px; } }
@media (prefers-reduced-motion: reduce) { .cb-top-arte { animation: none; } }

/* 2026-10-19 (pedido do dono): combo em destaque no tema claro do site (antes: fundo azul-escuro destoando) */
.cb-top { color: var(--ink); background: radial-gradient(90% 120% at 100% 100%, #DCE6FF 0%, #EEF3FF 45%, #FFFFFF 100%); border: 1px solid var(--line); box-shadow: var(--sombra); }
.cb-top:hover { box-shadow: 0 22px 44px -24px rgba(31, 79, 224, .35); }
.cb-top-tx small { color: var(--primary); opacity: 1; }
.cb-top-pr s { color: var(--muted); opacity: 1; } .cb-top-pr strong { color: var(--primary); }
.cb-top-eco { color: var(--ok); }
.cb-top-bt { background: var(--primary); color: #fff; }
.cb-top:hover .cb-top-bt { background: var(--primary-2); }
.cb-top-arte { filter: drop-shadow(0 14px 18px rgba(31, 40, 120, .22)); }

/* 2026-10-19: caixa de TC com número grande — fica só a moedinha (some o "TC") pra sobrar espaço */
.caixa.longo .moeda-tc { font-size: 0; gap: 0; }

/* 2026-10-19: promoções pegáveis na linha de info da caixinha (sutil: texto + botãozinho) */
.calc .info .info-bt { margin-left: 6px; padding: 2px 9px; border: 1px solid var(--primary); border-radius: 999px; background: var(--primary-soft); color: var(--primary); font: 800 12px var(--fonte); cursor: pointer; vertical-align: 1px; }
.calc .info .info-bt:hover { background: var(--primary); color: #fff; }
.calc .info .info-bt[data-promo="tirar"] { border-color: var(--line); background: transparent; color: var(--muted); font-weight: 700; }
.calc .info .info-bt[data-promo="tirar"]:hover { color: var(--ink); background: var(--soft); }

/* 2026-10-19: gato da Dash no meio do QR do PIX */
.cx-qr { position: relative; }
.cx-qr-gato { position: absolute; left: 50%; top: 50%; width: 23%; aspect-ratio: 1 / 1; translate: -50% -50%; border-radius: 50%; object-fit: cover; }

/* 2026-10-19: tela "Verificar elegibilidade" (premium de 30 dias) dentro da caixinha */
.cx-elig { display: grid; gap: 14px; }
.el-ok { width: 100%; height: 54px; font-size: 16px; }
.el-pe { margin: 0; text-align: center; font-size: 12.5px; color: var(--muted); }
@media (max-width: 480px) { .cx-elig .cx-chip { display: none; } .cx-elig .cx-cab { grid-template-columns: auto 1fr; } .cx-elig .cx-cab b { font-size: 18px; } }

/* 2026-10-19 (pedido do dono): a verificação da premium copia o login do "Minha conta" (conversa com a Dash no WhatsApp).
   Mesmo visual das regras .wa-* do paginas.css, presas dentro de .cx-elig (a home não carrega o paginas.css). */
.cx-elig .cx-cab b { font-size: 18px; }
.cx-elig .wa { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sombra); text-align: left; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.cx-elig .wa-cab { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #075E54; color: #fff; }
.cx-elig .wa-cab img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.cx-elig .wa-cab b { display: block; font-size: 15px; line-height: 1.2; } .cx-elig .wa-cab small { font-size: 12px; opacity: .85; }
.cx-elig .wa-titulo { margin-left: auto; font-weight: 800; font-size: 13px; opacity: .9; }
.cx-elig .wa-chat { height: 236px; padding: 12px 10px; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; overflow-y: auto;
  background: #ECE5DD radial-gradient(rgba(0, 0, 0, .035) 1px, transparent 1.4px) 0 0 / 14px 14px; }
.cx-elig .wa-chat > :first-child { margin-top: auto; }
.cx-elig .wa-msg { position: relative; max-width: 82%; padding: 6px 9px 16px; border-radius: 8px; font-size: 14px; line-height: 1.32; box-shadow: 0 1px .5px rgba(0, 0, 0, .13); color: #111; }
.cx-elig .wa-msg.eu { align-self: flex-end; background: #DCF8C6; border-top-right-radius: 0; font-weight: 700; letter-spacing: .02em; }
.cx-elig .wa-msg.ela { align-self: flex-start; background: #fff; border-top-left-radius: 0; }
.cx-elig .wa-msg b { font-weight: 800; }
.cx-elig .wa-msg a { color: #027EB5; font-weight: 700; }
.cx-elig .wa-msg small { position: absolute; right: 7px; bottom: 3px; font-size: 10.5px; color: #667781; display: inline-flex; gap: 3px; align-items: center; }
.cx-elig .wa-msg .ok { font-size: 12px; letter-spacing: -3px; color: #8696A0; transition: color .3s; } .cx-elig .wa-msg .ok.lido { color: #34B7F1; }
.cx-elig .wa-msg .reacao { position: absolute; left: -10px; bottom: -11px; background: #fff; border-radius: 12px; padding: 1px 5px; font-size: 13px; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transform: scale(0); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.cx-elig .wa-msg .reacao.on { transform: scale(1); }
.cx-elig .wa-msg.entra { animation: elWaSobe .28s ease-out; }
@keyframes elWaSobe { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.cx-elig .wa-dig { align-self: flex-start; background: #fff; border-radius: 8px; padding: 8px 10px; display: flex; gap: 3px; box-shadow: 0 1px .5px rgba(0, 0, 0, .13); }
.cx-elig .wa-dig i { width: 6px; height: 6px; border-radius: 50%; background: #9AA3A8; animation: elWaPula 1s infinite; }
.cx-elig .wa-dig i:nth-child(2) { animation-delay: .15s; } .cx-elig .wa-dig i:nth-child(3) { animation-delay: .3s; }
@keyframes elWaPula { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
.cx-elig .wa-base { display: flex; align-items: center; gap: 8px; padding: 8px; background: #F0F2F5; }
.cx-elig .wa-input { flex: 1; min-width: 0; height: 40px; border-radius: 20px; background: #fff; display: flex; align-items: center; padding: 0 14px; font-size: 15px; font-weight: 700; color: #111; letter-spacing: .03em; }
.cx-elig .wa-input .cursor { width: 2px; height: 18px; background: #00A884; margin-left: 1px; animation: elWaPisca 1s infinite; }
.cx-elig .wa-input .ph { color: #8696A0; font-weight: 500; letter-spacing: 0; }
.cx-elig .wa-enviar { width: 40px; height: 40px; border-radius: 50%; background: #00A884; color: #fff; display: grid; place-items: center; flex-shrink: 0; text-decoration: none; position: relative; }
.cx-elig .wa-enviar:hover { background: #008F72; }
.cx-elig .wa-enviar.chama::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #00A884; animation: elWaChama 1.6s ease-out infinite; }
@keyframes elWaChama { from { opacity: .9; transform: scale(.9); } to { opacity: 0; transform: scale(1.18); } }
@keyframes elWaPisca { 50% { opacity: 0; } }
/* 2026-10-19 (pedido do dono): o código a enviar brilha — o tibiano tem que bater o olho e entender */
.cx-elig .wa-base:has(.wa-enviar.chama:not([hidden])) .wa-input:not(:empty) { font-size: 18px; letter-spacing: .08em; color: #075E54; border: 2px solid #25D366;
  background: #F4FFF8; animation: elWaGlow 1.8s ease-in-out infinite; }
.cx-elig .wa-base:has(.wa-enviar.chama:not([hidden])) + .wa-rodape { color: #075E54; font-weight: 700; font-size: 13.5px; }
@keyframes elWaGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55), 0 0 10px rgba(37, 211, 102, .35); }
  50% { box-shadow: 0 0 0 5px rgba(37, 211, 102, .18), 0 0 22px rgba(37, 211, 102, .6); } }
@media (prefers-reduced-motion: reduce) { .cx-elig .wa-input { animation: none !important; } }
.cx-elig .wa-rodape { margin: 0; padding: 0 12px 10px; background: #F0F2F5; color: #667781; font-size: 12.5px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .cx-elig .wa-msg.entra, .cx-elig .wa-dig i, .cx-elig .wa-input .cursor, .cx-elig .wa-enviar.chama::after { animation: none; } }
@media (max-width: 480px) { .cx-elig .wa-chat { height: 210px; } }

/* 2026-10-19 (pedido do dono): contato da Dash no rodapé, embaixo do "Compra e venda de Tibia Coins, 24h" */
.rodape a.rodape-zap { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; color: #fff; font-weight: 700; }
.rodape a.rodape-zap svg { color: #25D366; flex: none; }
.rodape a.rodape-zap:hover { color: #25D366; }

/* ── 2026-10-19 (pedido do dono): "Últimas entregas" com o título na linha do "Dúvidas" (a caixa não quebra mais o alinhamento).
   Lista só com entregas de verdade; as do botão "Simular" do atendimento vêm marcadas. ── */
.ajuda:has(.ult-col[hidden]) { grid-template-columns: minmax(0, 1fr); }
.ult-col { position: sticky; top: 96px; }
.ult-col .ult-card { position: static; margin-top: 0; }
.ult-tit { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; }
.ult-tit h2 { margin: 0; text-align: left; }
.agora-ok.sim { color: #946200; background: #FFF0C7; }
@media (max-width: 900px) { .ult-col { position: static; } }
/* 2026-10-19 (pedido do dono): e-mail da Dash embaixo do WhatsApp no rodapé */
.rodape a.rodape-mail { display: flex; width: fit-content; margin-top: 6px; }
.rodape a.rodape-mail svg { color: #8FB0FF; }
.rodape a.rodape-mail:hover { color: #8FB0FF; }
/* 2026-10-19 (pedido do dono): botão da live toca o player da Twitch aqui no site (live-play.js) */
.quadro.tocando, .live-caixa.tocando { position: relative; aspect-ratio: 16 / 9; background: #000 !important; padding: 0; overflow: hidden; }
.tocando > iframe.live-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.live-caixa.tocando { border-radius: 18px; }
.rodape .embrulho > div { min-width: 0; }
@media (max-width: 400px) { .rodape a.rodape-mail { font-size: 13px; overflow-wrap: anywhere; } }

/* ── 2026-10-19 (pedido do dono): passada nos breakpoints — tudo harmônico do celular ao monitor grande ── */
/* Dúvidas | Últimas entregas: os dois títulos no mesmo tamanho, numa linha só (em 1024 o título quebrava) */
.ajuda-faq h2, .ult-tit h2 { font-size: clamp(26px, 2.6vw, 40px); white-space: nowrap; }
.ult-tit .agora-vivo { white-space: nowrap; flex: none; }
/* celular: vantagens em 2×2 compactas (antes 4 cartões gigantes empilhados) */
@media (max-width: 520px) {
  .destaques .embrulho { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dq { padding: 16px 14px 16px; border-radius: 16px; }
  .dq-ico { width: 38px; height: 38px; border-radius: 11px; }
  .dq-ico svg { width: 19px; height: 19px; }
  .dq-num { margin-top: 12px; font-size: 21px; gap: 6px; }
  .dq-vivo .ponto { width: 8px; height: 8px; box-shadow: 0 0 0 3px rgba(229, 72, 77, .18); }
  .dq h3 { margin-top: 6px; font-size: 13.5px; }
  .dq p { font-size: 12.5px; line-height: 1.35; }
}
/* rodapé no celular: a marca (com WhatsApp e e-mail) ocupa a linha toda; os links ficam 2 por linha */
@media (max-width: 640px) {
  .rodape .embrulho { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .rodape .embrulho > div:first-child { grid-column: 1 / -1; }
  .rodape a.rodape-mail { font-size: inherit; overflow-wrap: normal; }
}
@media (max-width: 340px) { .rodape a.rodape-zap, .rodape a.rodape-mail { font-size: 13px; } }
/* Market no celular: cartões com o nome inteiro (tendência vira selinho no canto) e a tabela sem rolar pro lado */
@media (max-width: 640px) {
  .mk-card { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "ico fam fam" "ico nome nome" "ico preco tend" "ico sub sub"; padding-right: 10px; }
  .mk-card .mk-tend-card { font-size: 10.5px; padding: 2px 6px; }
  .mk-card strong { font-size: 14.5px; }
  .mk-tab th:nth-child(3), .mk-tab td:nth-child(3), .mk-tab th:nth-child(4), .mk-tab td:nth-child(4) { display: none; }
  .mk-tab th, .mk-tab td { padding-left: 10px; padding-right: 10px; }
  .mk-tab td { border-top: 0; } .mk-tab tbody tr { border-top: 1px solid var(--line); }
  .mk-item { min-width: 0; gap: 10px; }
  .mk-item b { white-space: normal; line-height: 1.25; }
  .mk-vl { flex-direction: column-reverse; align-items: flex-end; gap: 3px; }
}
@media (max-width: 480px) { .mk-tab th:nth-child(5), .mk-tab td:nth-child(5) { display: none; } }
@media (max-width: 360px) { .ult-tit { flex-wrap: wrap; gap: 8px; } .ajuda-faq h2, .ult-tit h2 { font-size: 24px; } }
/* 2026-10-19: combos agora vêm logo depois das vantagens (antes da live) — mesmo respiro das outras seções */
main > section.combos-sec { padding: 40px 0 24px; }
@media (max-width: 760px) { main > section.combos-sec { padding: 24px 0 8px; } }
/* 2026-10-19 (pedido do dono): Binance — escolha USDT/EURC e o passo a passo do Binance Pay */
.bin-moeda { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--muted); font-weight: 700; }
.bin-moeda[hidden] { display: none; }
.bin-moeda span { margin-right: 4px; }
.bin-moeda button { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font: 800 12.5px var(--fonte); color: var(--muted); cursor: pointer; }
.bin-moeda button[aria-pressed="true"] { border-color: #F0B90B; color: #8A6A00; background: #FFF6D6; }
.cx-pix.bin { grid-template-columns: minmax(0, 1fr); }
.cx-bin-passos { margin: 4px 0 0; padding: 12px 14px 12px 32px; border-radius: 14px; background: #FFF9E6; border: 1px solid #F6E3A1; display: grid; gap: 6px; font-size: 13.5px; color: var(--ink); }
.cx-bin-passos[hidden] { display: none; }
.cx-bin-passos b { white-space: nowrap; }
/* 2026-10-19 (pedido do dono): premium como PRODUTO na caixinha + o "como ativar" depois do pagamento */
.calc.produto .pacotes-rap, .calc.produto .campos { display: none; }
.cx-produto { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-top: 16px; padding: 12px 14px; border-radius: 16px; border: 1px solid #F3D98B; background: linear-gradient(135deg, #FFF8E6, #FFFDF6); }
.cx-produto[hidden] { display: none; }
.cx-produto .pm-capa { width: 64px; border-radius: 12px; }
.cx-prod-tx small { display: block; font-size: 11.5px; font-weight: 800; color: #946200; text-transform: uppercase; letter-spacing: .05em; }
.cx-prod-tx b { display: block; font-size: 17px; font-weight: 800; color: var(--ink); margin-top: 2px; }
.cx-prod-pr strong { font-size: 22px; font-weight: 800; color: var(--primary); }
.cx-prod-pr s { color: var(--muted); font-size: 13px; margin-left: 4px; }
.cx-prod-sair { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 700 12.5px var(--fonte); color: var(--muted); cursor: pointer; }
.cx-prod-sair:hover { color: var(--primary); border-color: var(--primary); }
.cx-ativar { margin: 0; padding: 14px 16px 14px 34px; border-radius: 14px; background: var(--ok-soft); border: 1px solid #BFEBD3; display: grid; gap: 6px; font-size: 14px; color: var(--ink); }
.cx-ativar[hidden] { display: none; }
@media (max-width: 420px) { .cx-produto { grid-template-columns: 52px minmax(0, 1fr); } .cx-produto .pm-capa { width: 52px; } .cx-prod-sair { grid-column: 1 / -1; justify-self: start; } }
.cx-qr img.cx-qr-real { width: 100%; height: 100%; display: block; image-rendering: pixelated; }   /* 2026-10-19: QR de verdade (nível H, do servidor) */
.cx-ent-email { display: grid; gap: 10px; } .cx-ent-email[hidden] { display: none; } .cx-ent-email .btn { width: 100%; }
/* 2026-10-19 (pedido do dono): premium é só no PIX — cartão de pagamento no lugar dos botões de método */
.so-pix { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px;
  border: 1.5px solid #32BCAD; background: linear-gradient(135deg, #EEFAF8 0%, #FFFFFF 70%); border-radius: 14px; }
.so-pix[hidden] { display: none; }
.so-pix-ic { width: 40px; height: 40px; border-radius: 12px; background: #32BCAD; color: #fff; display: grid; place-items: center; box-shadow: 0 6px 14px -8px rgba(50, 188, 173, .9); }
.so-pix b { display: block; font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.so-pix div span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.so-pix em { font-style: normal; font-size: 11px; font-weight: 800; color: #0B6E65; background: #D9F3EF; padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.calc .metodos[hidden] { display: none; }
@media (max-width: 400px) { .so-pix { grid-template-columns: auto 1fr; } .so-pix em { grid-column: 2; justify-self: start; margin-top: -4px; } }
/* 2026-10-19 (pedido do dono): esqueleto de carregamento do Market — blocos com brilho passando */
.esq-b { display: block; border-radius: 8px; background: linear-gradient(90deg, #EEF1F7 0%, #E2E7F1 40%, #EEF1F7 80%); background-size: 300% 100%; animation: esqBrilho 1.3s ease-in-out infinite; }
@keyframes esqBrilho { 0% { background-position: 100% 0; } 100% { background-position: -50% 0; } }
.mk-card.esq { cursor: default; pointer-events: none; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.mk-card.esq .mk-card-top { margin-bottom: 12px; }
.mk-card.esq .esq-b.ico { width: 40px; height: 40px; border-radius: 12px; flex: none; }
.mk-card.esq .esq-b.l1 { height: 14px; width: 88%; }
.mk-card.esq .esq-b.l2 { height: 22px; width: 62%; margin-top: 10px; }
.mk-card.esq .esq-b.l3 { height: 11px; width: 44%; margin-top: 8px; }
.mk-tab tr.esq td { padding-top: 14px; padding-bottom: 14px; }
.mk-tab tr.esq .mk-item { display: flex; align-items: center; gap: 10px; }
.mk-tab tr.esq .esq-b.ico { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; }
.mk-tab tr.esq .esq-b.nome { height: 14px; width: min(220px, 60%); }
.mk-tab tr.esq .esq-b.num { height: 14px; width: 64px; margin-left: auto; }
.mk-tc.esq { pointer-events: none; }
.mk-tc.esq b, .mk-tc.esq span, .mk-tc.esq small { color: transparent !important; border-radius: 8px; background: linear-gradient(90deg, #EEF1F7 0%, #E2E7F1 40%, #EEF1F7 80%); background-size: 300% 100%; animation: esqBrilho 1.3s ease-in-out infinite; }
.mk-tc.esq b { display: inline-block; min-width: 200px; } .mk-tc.esq span { display: inline-block; min-width: 120px; margin-top: 4px; }
.mk-tc.esq img, .mk-tc.esq .btn { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .esq-b, .mk-tc.esq b, .mk-tc.esq span, .mk-tc.esq small { animation: none; } }
@media (min-width: 1101px) { .mk-cards .mk-card.esq:nth-child(6) { display: none; } }   /* 6 no esqueleto: fecha as linhas em 3 e 2 colunas */
/* 2026-10-20 (pedido do dono): no celular a moeda tapava o número das TC ("1.07!") — sem o ícone, margens menores */
@media (max-width: 560px) {
  .calc .campos .caixa { padding: 0 10px; gap: 5px; }
  .calc .campos .caixa .moeda-tc img { display: none; }
  .calc .campos .caixa .moeda-tc { font-size: 14px; font-weight: 700; color: var(--muted); }
  .calc .campos .caixa input { font-size: 20px; }
  .calc .cx-passo { margin-left: 0; }
}
@media (max-width: 360px) { .calc .campos .caixa input { font-size: 18px; } .calc .cx-passo button { width: 24px; } }

/* 2026-10-22 (pedido do dono): pedido entregue — tela de "chegou" mais caprichada + convite pra criar a conta na Dash pelo WhatsApp */
.cx-aviso.ok.chegou { display: flex; align-items: center; gap: 12px; padding: 14px 16px; font-size: 15px; }
.cx-aviso.ok.chegou::before { content: '✓'; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; font-size: 16px; font-weight: 800; }
.cx-cad { margin-top: 14px; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--primary-soft), #fff 70%); display: grid; gap: 12px; }
.cx-cad[hidden] { display: none; }
.cx-cad-topo { display: flex; align-items: center; gap: 12px; }
.cx-cad-topo img { width: 44px; height: 44px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--line); }
.cx-cad-topo b { display: block; font-size: 16px; color: var(--ink); }
.cx-cad-topo small { display: block; font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.cx-cad-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cx-cad-lista li { position: relative; padding-left: 24px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.cx-cad-lista li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 17px; height: 17px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.cx-cad .btn { width: 100%; height: 50px; font-size: 15.5px; }
.cx-cad .btn[hidden] { display: none; }
.cx-cad-nota { margin: -4px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.cx-cad-cod { display: grid; justify-items: center; gap: 4px; padding: 12px; border-radius: 12px; background: #fff; border: 1px dashed #B9C6EE; }
.cx-cad-cod[hidden] { display: none; }
.cx-cad-cod small { font-size: 12px; color: var(--muted); font-weight: 700; }
.cx-cad-cod b { font-size: 24px; letter-spacing: .06em; color: var(--primary-2); }
.cx-cad-espera { font-size: 12.5px; color: var(--muted); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.cx-cad-espera::before { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--primary); border-right-color: transparent; animation: cxGira .8s linear infinite; }
.cx-cad.feito { background: var(--ok-soft); border-color: #BFEBD3; }
.cx-cad.feito .cx-cad-espera::before { display: none; }
@keyframes cxGira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cx-cad-espera::before { animation: none; } }