/* Mystic Bot · site de vendas do sistema (para donos de loja de MM2)
   Dois temas: claro metálico (prata, cinza violeta, roxo metálico) e escuro (céu noturno).
   As telas de produto (Discord, painel, jogo) e os blocos escuros usam sempre as cores do escuro. */

:root {
  --fonte-titulo: 'Cinzel', 'Times New Roman', serif;
  --fonte-texto: 'Inter', system-ui, sans-serif;
  --largura: 1180px;
  --margem: clamp(16px, 4vw, 40px);
  --raio: 22px;
  --mola: cubic-bezier(0.2, 0.9, 0.25, 1.1);
  --suave: cubic-bezier(0.22, 1, 0.36, 1);
  --verde: #2fc777;
  --vermelho: #ff5c7a;
  --prata: linear-gradient(180deg, #ffffff 0%, #f2edff 40%, #cfc4f3 66%, #9d8fd6 100%);
}

/* Tema claro: prata metálico com reflexos lilás (paleta da identidade). */
:root[data-tema="claro"] {
  --fundo: #e8e6ef;
  --tinta: #302a3b;
  --tinta-suave: #574f63;
  --tinta-fraca: #645c70;
  --titulo: #2a2433;
  --violeta: #7700f9;
  --violeta-forte: #5f00c9;
  --lilas: #6a2bd1;
  --cartao: rgba(255, 255, 255, 0.6);
  --cartao-2: rgba(255, 255, 255, 0.88);
  --borda: rgba(48, 42, 59, 0.1);
  --borda-forte: rgba(119, 0, 249, 0.22);
  --vidro: rgba(247, 246, 252, 0.82);
  --vidro-solido: rgba(247, 246, 252, 0.98);
  --sombra: 0 18px 40px -24px rgba(59, 24, 95, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --estrela: #8a6fd1;
  --estrela-viagem: #a98be6;
  --marcador: rgba(119, 0, 249, 0.1);
  --destaque: linear-gradient(100deg, #5b0fc2 0%, #7700f9 35%, #b07cff 55%, #7700f9 75%, #4a0d9e 100%);
  color-scheme: light;
}

/* Tema escuro: o céu noturno. Também vale dentro das telas de produto e dos blocos escuros. */
:root[data-tema="escuro"], .bloco-escuro, .janela, .fila, .jogo, .rodape, .discord, .troca {
  --fundo: #050410;
  --tinta: #ecebf3;
  --tinta-suave: #b9b7c9;
  --tinta-fraca: #8d8aa3;
  --titulo: #f6f6fb;
  --violeta: #7d4dff;
  --violeta-forte: #5f2ee6;
  --lilas: #d8d6e6;
  --cartao: #121020;
  --cartao-2: #1a1828;
  --borda: rgba(220, 220, 240, 0.08);
  --borda-forte: rgba(220, 220, 240, 0.18);
  --vidro: rgba(14, 12, 26, 0.94);
  --vidro-solido: rgba(14, 12, 26, 0.98);
  --sombra: none;
  --estrela: #e9e8f5;
  --estrela-viagem: #e4dcff;
  --marcador: rgba(220, 220, 240, 0.08);
  --destaque: linear-gradient(100deg, #ffffff 0%, #b9b7cc 35%, #ffffff 50%, #8f8ca6 70%, #e9e8f2 100%);
}
:root[data-tema="escuro"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--fundo); color: var(--tinta);
  font: 400 17px/1.6 var(--fonte-texto);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  transition: background-color .5s, color .5s;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; color: var(--titulo); }
h1, h2 { font-family: var(--fonte-titulo); font-weight: 800; letter-spacing: -0.01em; line-height: 1.06; }
h1, h2, h3 { text-wrap: balance; } /* sem palavra sozinha na última linha */
p { text-wrap: pretty; }
h3 { font-weight: 800; font-size: 19px; line-height: 1.3; }
p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--violeta); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--violeta); color: #fff; }
.bloco-escuro, .rodape { color: var(--tinta); }

/* A palavra de destaque: roxo metálico com reflexo. */
h1 em, h2 em { font-style: normal; }
h1 em, h2 em, em .l { background: var(--destaque); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: reflexo 7s ease-in-out infinite; }
@keyframes reflexo { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Títulos em prata metálico (como nos banners) no tema escuro e nos blocos escuros. */
.bloco-escuro .letras .l:not(em .l), :root[data-tema="escuro"] .letras .l:not(em .l),
:root[data-tema="escuro"] .problema h2 > span, :root[data-tema="escuro"] .passo h3, :root[data-tema="escuro"] .recurso h3, .rodape-fecho a {
  background-image: var(--prata); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}

/* ---------- Letras que acendem piscando (e piscam de novo de vez em quando) ---------- */
.letras .p { display: inline-block; white-space: nowrap; }
.letras .l { display: inline-block; opacity: 0; }
.letras.acesa .l { animation: acender .9s var(--d) both; }
.letras.acesa em .l { animation: acender .9s var(--d) both, reflexo 7s ease-in-out infinite; }
.letras.acesa .l.pisca { animation: piscaLetra .8s ease-in-out both; }
@keyframes acender {
  0% { opacity: 0; transform: translateY(.18em); }
  18% { opacity: .9; transform: none; }
  28% { opacity: .15; }
  42% { opacity: 1; }
  54% { opacity: .35; }
  70%, 100% { opacity: 1; transform: none; }
}
@keyframes piscaLetra { 0%, 100% { opacity: 1; } 30% { opacity: .15; } 55% { opacity: 1; } 75% { opacity: .4; } }

/* ---------- Fundo ---------- */
.ceu { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.brilho-metal { position: absolute; inset: -10%; transition: opacity .6s; }
:root[data-tema="claro"] .brilho-metal {
  background:
    radial-gradient(42% 34% at 18% 22%, rgba(198, 164, 244, .5), transparent 70%),
    radial-gradient(38% 30% at 82% 30%, rgba(170, 164, 178, .5), transparent 70%),
    radial-gradient(44% 36% at 70% 85%, rgba(198, 164, 244, .42), transparent 70%),
    linear-gradient(165deg, #f6f5fb 0%, #e2dfeb 32%, #f3f1f8 52%, #d9d4e4 78%, #eceaf2 100%);
  animation: deriva 26s ease-in-out infinite alternate;
}
:root[data-tema="escuro"] .brilho-metal {
  background: radial-gradient(45% 35% at 20% 15%, rgba(106, 18, 240, .18), transparent 70%), radial-gradient(40% 30% at 85% 75%, rgba(58, 61, 255, .14), transparent 70%);
  animation: deriva 30s ease-in-out infinite alternate;
}
@keyframes deriva { to { transform: translate3d(3%, -2%, 0) scale(1.05); } }
#ceu { position: absolute; inset: 0; width: 100%; height: 100%; }
.ceu-brilhos span {
  position: absolute; width: var(--t); height: var(--t);
  background: var(--estrela); border-radius: 50%;
  box-shadow: 0 0 6px 1px var(--estrela-viagem);
  animation: piscar var(--d) ease-in-out var(--a) infinite;
}
@keyframes piscar { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }

/* Estrelas de quatro pontas do banner atravessando o céu devagar. */
.viajante { position: absolute; left: 0; width: var(--t); height: var(--t); color: var(--estrela-viagem); opacity: var(--o); animation: viajar var(--d) linear var(--a) infinite; will-change: transform; }
.viajante svg { width: 100%; height: 100%; fill: currentColor; filter: drop-shadow(0 0 calc(var(--t) / 4) currentColor); animation: girar calc(var(--d) / 3) ease-in-out infinite alternate; }
@keyframes viajar { from { transform: translate3d(-12vw, var(--y0), 0); } to { transform: translate3d(112vw, var(--y1), 0); } }
@keyframes girar { from { transform: rotate(-12deg) scale(.9); } to { transform: rotate(12deg) scale(1.05); } }
/* Estrela cadente (site.js solta uma a cada 12-15 s): rastro que termina numa cabeça brilhante. */
.cadente { position: absolute; left: 0; top: 0; width: 170px; height: 2px; border-radius: 2px; opacity: 0; pointer-events: none; will-change: transform, opacity;
  background: linear-gradient(90deg, transparent, var(--estrela-viagem) 70%, #fff); transform-origin: 100% 50%; }
.cadente-cabeca { position: absolute; right: -2px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px var(--estrela-viagem); }

/* Estrela clicada: some NA HORA (sem fade) e só volta devagar depois. O estouro: clarão, as 4 pontas da estrela
   (quando é a de quatro pontas) saindo girando, cacos que caem girando e faíscas que se abrem. */
.ceu-brilhos span, .viajante { transition: opacity 1.6s ease; }
.ceu-brilhos span.estourada, .viajante.estourada { opacity: 0 !important; transition: none !important; }
.estouro { position: fixed; z-index: 40; width: 0; height: 0; pointer-events: none; --cor-estouro: var(--estrela-viagem); --miolo: #fff; }
.estouro i, .estouro b { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.estouro .clarao { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle, var(--miolo) 0 18%, var(--cor-estouro) 40%, transparent 70%); }
.estouro .ponta { background: linear-gradient(180deg, var(--miolo), var(--cor-estouro)); clip-path: polygon(50% 0, 100% 100%, 0 100%); transform-origin: 50% 100%; filter: drop-shadow(0 0 5px var(--cor-estouro)) brightness(1.15); }
.estouro .caco { width: 8px; height: 10px; background: linear-gradient(160deg, var(--miolo), var(--cor-estouro)); clip-path: polygon(50% 0, 100% 100%, 0 70%); }
.estouro .faisca { width: 4px; height: 4px; border-radius: 50%; background: var(--miolo); box-shadow: 0 0 8px 3px var(--cor-estouro); }
:root[data-tema="claro"] .estouro { --cor-estouro: #8a6fd1; --miolo: #6a3fd6; }
:root[data-tema="claro"] .cadente-cabeca { background: #7a4fe0; box-shadow: 0 0 8px 2px rgba(138, 111, 209, .6); }
:root[data-tema="claro"] .cadente { background: linear-gradient(90deg, transparent, #a98be6 65%, #7a4fe0); }

/* ---------- Olho 3D que desce pela página ---------- */
.olho { position: fixed; left: 0; top: 0; z-index: 30; width: 200px; height: 200px; pointer-events: none; will-change: transform, opacity; transform: translate3d(-400px, -400px, 0); }
/* Até o three.js compilar (.pronto), o PNG reserva fica no lugar; depois os dois trocam em fade de 0,5 s. */
#olho-3d { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .5s var(--suave); }
.olho.pronto #olho-3d { opacity: 1; }
/* Brilho violeta atrás do olho: um degradê parado (antes era um drop-shadow refeito a cada quadro do 3D).
   Só aparece quando o modelo já está desenhado (.pronto); o PNG reserva não tem brilho, como antes. */
.olho::before { content: ''; position: absolute; inset: 14%; z-index: -1; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(138, 45, 255, .42), rgba(138, 45, 255, .18) 50%, rgba(138, 45, 255, 0)); }
.olho.pronto::before { opacity: 1; }
.olho.sem-3d::before { display: none; }
.olho-reserva { position: absolute; inset: 10%; width: 80%; height: auto; opacity: 1; transition: opacity .5s var(--suave); } /* height: auto: sem isso o atributo height esticava o PNG */
.olho.pronto .olho-reserva { opacity: 0; }
.olho.sem-3d .olho-reserva { opacity: 1; }
.olho.sem-3d #olho-3d { display: none; }
.olho-ancora { position: absolute; width: 1px; height: 1px; pointer-events: none; }

/* ---------- Barra ---------- */
.barra-wrap { position: fixed; inset: 14px 0 auto; z-index: 50; padding: 0 var(--margem); }
.barra {
  max-width: var(--largura); margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 9px 9px 18px;
  background: var(--vidro); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--borda); border-radius: 18px; box-shadow: var(--sombra);
  transition: background .5s;
}
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 800 18px/1 var(--fonte-titulo); white-space: nowrap; color: var(--titulo); }
.marca img { width: 34px; height: 34px; filter: drop-shadow(0 0 8px rgba(138, 45, 255, .55)); }
.barra-links { position: relative; display: flex; gap: 4px; margin-left: auto; }
.barra-links a { position: relative; z-index: 1; text-decoration: none; color: var(--tinta-suave); font-weight: 600; font-size: 15px; padding: 9px 14px; border-radius: 12px; transition: color .25s; }
.barra-links a:hover, .barra-links a.ativo { color: var(--titulo); }
.barra-links a[href="#entrega"]::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 8px var(--verde); margin-right: 8px; vertical-align: 2px; animation: piscar 2.2s ease-in-out infinite; }
/* A pílula que desliza até o link embaixo do mouse. */
.barra-marcador { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 12px; background: var(--marcador); box-shadow: inset 0 0 0 1px var(--borda-forte); opacity: 0; transition: transform .45s var(--mola), width .45s var(--mola), opacity .25s; pointer-events: none; }
.barra-links.com-marcador .barra-marcador { opacity: 1; }
.botao-tema { all: unset; cursor: pointer; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--tinta); border: 1px solid var(--borda); transition: background .2s, transform .3s var(--mola); flex: none; }
.botao-tema:hover { background: var(--marcador); transform: rotate(-15deg); }
.botao-tema svg { width: 19px; height: 19px; }
:root[data-tema="claro"] .so-escuro, :root[data-tema="escuro"] .so-claro { display: none; }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 28px; border-radius: 999px;
  background: linear-gradient(180deg, #9a4dff 0%, var(--violeta) 45%, var(--violeta-forte) 100%);
  color: #fff; border: 1px solid rgba(255, 255, 255, .18);
  font: 700 16px/1 var(--fonte-texto); text-decoration: none; white-space: nowrap;
  box-shadow: 0 10px 30px -10px rgba(119, 0, 249, .75), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .25s var(--mola), box-shadow .25s, filter .2s, opacity .3s var(--suave);
}
/* Link que espera o vitrine.json (.aguardando) ou que não tem destino (.em-breve): apagado e sem clique. */
.aguardando { opacity: .6; pointer-events: none; }
.em-breve { opacity: .7; pointer-events: none; cursor: default; }
.botao:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 14px 38px -10px rgba(119, 0, 249, .9), inset 0 1px 0 rgba(255, 255, 255, .35); }
.botao:active { transform: translateY(1px) scale(.98); }
.botao span { transition: transform .25s var(--mola); }
.botao:hover span { transform: translateX(3px); }
.botao-p { min-height: 42px; padding: 0 20px; font-size: 15px; }
.botao-contorno { background: var(--cartao); color: var(--titulo); border-color: var(--borda-forte); box-shadow: var(--sombra); }
.botao-contorno:hover { filter: none; box-shadow: var(--sombra); background: var(--cartao-2); }

/* ---------- Rótulo de seção ---------- */
.rotulo { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lilas); margin-bottom: 18px; }
.rotulo-ponto { width: 9px; height: 9px; border-radius: 2px; background: var(--violeta); box-shadow: 0 0 10px var(--violeta); transition: background .4s, box-shadow .4s; }
.rotulo-ponto.verde { background: var(--verde); box-shadow: 0 0 10px var(--verde); }

.centro { max-width: 880px; margin: 0 auto; text-align: center; padding: 0 var(--margem); }
.centro h2, .duvidas h2, .recursos h2 { font-size: clamp(30px, 3.8vw, 54px); }
.secao-frase { margin: 20px auto 0; color: var(--tinta-suave); max-width: 56ch; font-size: 18px; }
section { position: relative; }

/* ---------- Topo ---------- */
.hero { padding: 160px var(--margem) 24px; text-align: center; }
.selos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.selo { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 8px 16px; border-radius: 999px; background: var(--cartao); border: 1px solid var(--borda-forte); font-size: 14px; font-weight: 700; color: var(--lilas); box-shadow: var(--sombra); }
.selo-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 8px var(--verde); }
.selo-novo { text-decoration: none; color: var(--titulo); border-color: rgba(47, 199, 119, .5); gap: 8px; transition: transform .3s var(--mola), border-color .3s; }
.selo-novo:hover { transform: translateY(-2px); border-color: var(--verde); }
.selo-novo b { background: #1f9d5a; color: #fff; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; letter-spacing: .06em; text-transform: uppercase; }
.selo-novo span { transition: transform .25s var(--mola); }
.selo-novo:hover span { transform: translateX(3px); }
.hero h1 { font-size: clamp(38px, 5.6vw, 84px); max-width: 15ch; margin: 28px auto 0; }
.hero-frase { max-width: 56ch; margin: 24px auto 0; font-size: clamp(17px, 1.35vw, 20px); color: var(--tinta-suave); }
.hero-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }
.hero-fatos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 26px; font-size: 15px; color: var(--tinta-suave); }
.hero-fatos li { display: inline-flex; align-items: center; gap: 8px; }
.hero-fatos li::before { content: '✓'; color: var(--verde); font-weight: 800; }
.hero-palco { position: relative; max-width: 1080px; margin: 64px auto 0; }
.hero-avisos { display: contents; }
.olho-ancora-hero { right: -10px; top: -30px; }

.janela { background: #0c0a24; border: 1px solid var(--borda-forte); border-radius: var(--raio); overflow: hidden; box-shadow: 0 40px 120px -30px rgba(80, 20, 200, .5), 0 0 0 6px rgba(138, 45, 255, .06); }

/* Discord (fragmento de interface) */
.discord-app { display: grid; grid-template-columns: 230px 1fr; height: 470px; text-align: left; background: #313338; color: #dbdee1; font: 400 15px/1.375 'gg sans', 'Noto Sans', var(--fonte-texto); }
.dc-canais { background: #2b2d31; padding: 0 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.dc-servidor { display: flex; align-items: center; gap: 8px; height: 48px; font-weight: 700; color: #f2f3f5; border-bottom: 1px solid #1f2023; margin: 0 -8px 8px; padding-left: 16px; }
.dc-servidor img { width: 22px; height: 22px; }
.dc-grupo { font-size: 12px; font-weight: 700; color: #949ba4; text-transform: uppercase; margin: 12px 8px 4px; }
.dc-canal { padding: 6px 8px; border-radius: 4px; color: #949ba4; font-weight: 500; }
.dc-canal.ativo { background: #404249; color: #f2f3f5; }
.dc-chat { display: flex; flex-direction: column; min-width: 0; }
.dc-topo, .discord-topo { height: 48px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 16px; font-weight: 700; color: #f2f3f5; border-bottom: 1px solid #1f2023; }
.dc-topo-desc { font-weight: 500; color: #949ba4; font-size: 14px; border-left: 1px solid #3f4147; padding-left: 12px; margin-left: 4px; }
.dc-hash { color: #80848e; font-size: 22px; font-weight: 400; }
.dc-msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 16px; overflow: hidden; }
.msg { display: grid; grid-template-columns: 40px 1fr; gap: 0 16px; padding: 8px 16px; opacity: 0; transform: translateY(16px); transition: opacity .4s var(--suave), transform .5s var(--mola); }
.msg.mostrar { opacity: 1; transform: none; }
.msg.escondida { display: none; }
.msg-avatar { width: 40px; height: 40px; border-radius: 50%; background: #11102e; overflow: hidden; }
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg-avatar.voce { background: #5865f2; display: grid; place-items: center; font-weight: 700; color: #fff; }
.msg-topo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.msg-nome { font-weight: 600; color: #c9b6ff; }
.msg-nome.cliente { color: #f2f3f5; }
.msg-app { background: #5865f2; color: #fff; font-size: 11px; font-weight: 700; padding: 0 5px; border-radius: 3px; line-height: 16px; }
.msg-hora { color: #949ba4; font-size: 12px; }
.mencao { color: #c9cdfb; background: #3c4270; padding: 0 3px; border-radius: 3px; }
.embed { margin-top: 6px; max-width: 440px; background: #2b2d31; border-left: 4px solid #8a2dff; border-radius: 4px; padding: 10px 14px 14px; display: grid; gap: 8px; }
.embed-loja { grid-template-columns: 1fr 88px; align-items: center; }
.embed-loja .embed-banner { order: 2; width: 88px; height: 88px; object-fit: cover; border-radius: 6px; }
.embed-banner { width: 100%; height: auto; border-radius: 4px; }
.embed-titulo { font-weight: 700; color: #f2f3f5; }
.embed p { font-size: 14px; color: #dbdee1; }
.embed-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: 14px; }
.embed-campos b { display: block; color: #f2f3f5; font-size: 13px; }
.embed-item { display: flex; align-items: center; gap: 10px; }
.embed-item img { width: 40px; height: 40px; }
.dc-menu { margin-top: 8px; max-width: 440px; background: #2b2d31; border: 1px solid #1e1f22; border-radius: 6px; overflow: hidden; }
.dc-menu-topo { display: flex; justify-content: space-between; padding: 10px 12px; background: #1e1f22; color: #f2f3f5; }
.dc-opcao { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: #dbdee1; transition: background .2s; }
.dc-opcao img { width: 28px; height: 28px; }
.dc-opcao small { display: block; color: #949ba4; font-size: 12px; }
.dc-opcao.foco { background: #404249; }
.botoes-discord { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.botoes-discord span { background: #4e5058; color: #fff; font-size: 14px; font-weight: 500; padding: 4px 14px; border-radius: 3px; }
.botoes-discord span.verde { background: #248046; }
.pix { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; }
.pix-qr { width: 112px; height: 112px; background: #fff; padding: 6px; border-radius: 4px; }
.pix-codigo { font-size: 12px; color: #b5bac1; word-break: break-all; background: #1e1f22; padding: 6px 8px; border-radius: 4px; }
.pix-tempo { font-size: 13px; color: #f0b232; }

.aviso-flutuante { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 16px; text-align: left; background: var(--cartao-2); border: 1px solid var(--borda-forte); box-shadow: 0 20px 50px -18px rgba(30, 10, 70, .55); opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .5s var(--suave), transform .6s var(--mola); }
.aviso-flutuante.ligado { opacity: 1; transform: none; animation: boiar 6s ease-in-out infinite; }
/* Desfoque atrás do aviso só no tema claro: lá o fundo é 88% opaco e sem desfoque o texto de trás aparece.
   No escuro o fundo é opaco (o desfoque não mudava nada) e no modo leve não há desfoque. */
:root[data-tema="claro"]:not(.leve) .aviso-flutuante { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
:root[data-tema="claro"].leve .aviso-flutuante { background: #eeedf2; }
.aviso-flutuante b { display: block; font-size: 15px; color: var(--titulo); }
.aviso-flutuante small { color: var(--tinta-suave); font-size: 13px; white-space: nowrap; }
.aviso-icone { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(240, 178, 50, .18); font-size: 17px; flex: none; }
.aviso-icone.verde { background: rgba(47, 199, 119, .16); color: var(--verde); font-weight: 800; }
.aviso-icone.roxo { background: rgba(138, 45, 255, .18); color: var(--lilas); font-weight: 800; }
.a1 { right: -34px; top: 84px; }
.a2 { left: -46px; top: 190px; animation-delay: -2s; }
.a3 { right: 60px; bottom: -28px; animation-delay: -4s; }
@keyframes boiar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* ---------- Fita ---------- */
.fita { margin-top: 72px; overflow: hidden; border-block: 1px solid var(--borda); background: var(--cartao); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.fita-trilho { display: flex; width: max-content; animation: correr 60s linear infinite; }
.fita-item { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; font-size: 14px; color: var(--tinta-suave); white-space: nowrap; }
.fita-item img { width: 26px; height: 26px; }
.fita-item b { color: var(--titulo); }
.fita-item i { font-style: normal; font-size: 12px; font-weight: 800; line-height: 1; padding: 5px 9px; border-radius: 999px; }
.fita-item i.e-ok { background: rgba(47, 199, 119, .15); color: var(--verde); }
.fita-item i.e-pix { background: rgba(50, 188, 173, .15); color: #23a597; }
.fita-item i.e-trocando { background: rgba(138, 45, 255, .16); color: var(--lilas); }
@keyframes correr { to { transform: translateX(-50%); } }
.fita:hover .fita-trilho { animation-play-state: paused; }

/* ---------- Problema → solução (preso na tela; o JS centraliza o bloco fixo) ---------- */
.problema { height: 320vh; margin-top: 40px; }
.problema-fixo { position: sticky; top: 100px; display: grid; grid-template-rows: auto auto auto; justify-items: center; padding: 0 var(--margem); gap: 18px; }
.problema-cabeca { text-align: center; max-width: 840px; }
.problema h2 { font-size: clamp(30px, 3.8vw, 54px); display: grid; }
.problema-frase { display: grid; margin-top: 16px; color: var(--tinta-suave); font-size: 18px; }
.rotulo-troca { display: inline-grid; grid-template-columns: auto auto; }
.rotulo-troca .troca-antes, .rotulo-troca .troca-depois { grid-column: 2; grid-row: 1; }
.problema .rotulo-ponto { background: var(--vermelho); box-shadow: 0 0 10px var(--vermelho); }
.problema.depois .rotulo-ponto { background: var(--verde); box-shadow: 0 0 10px var(--verde); }
.problema.depois .rotulo { color: var(--verde); }
.troca-antes, .troca-depois { grid-area: 1 / 1; transition: opacity .45s var(--suave), transform .5s var(--suave); }
.troca-depois { opacity: 0; transform: translateY(12px); }
.problema.depois .troca-antes { opacity: 0; transform: translateY(-12px); }
.problema.depois .troca-depois { opacity: 1; transform: none; }
.problema-cena { position: relative; width: min(1000px, 100%); height: min(380px, 44svh); }
/* Todas as bolhas têm o mesmo tamanho; o texto se ajusta dentro (até 2 linhas). */
.bolha { position: absolute; left: 50%; top: 50%; width: 230px; height: 78px; padding: 10px 14px; border-radius: 14px; background: var(--cartao-2); border: 1px solid var(--borda); box-shadow: var(--sombra); font-size: 14px; line-height: 1.35; will-change: transform; color: var(--tinta); }
.bolha .lado { display: flex; gap: 10px; align-items: center; height: 100%; transition: opacity .3s; }
.bolha .lado + .lado { position: absolute; inset: 10px 14px; height: auto; opacity: 0; }
.bolha.ordem .lado:first-child { opacity: 0; }
.bolha.ordem .lado + .lado { opacity: 1; }
.bolha.ordem { border-color: var(--borda-forte); }
.bolha-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; color: #fff; }
.bolha-txt { min-width: 0; }
.bolha-txt b { display: block; font-size: 12px; color: var(--tinta-fraca); font-weight: 700; line-height: 1.3; }
.bolha-txt span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bolha-txt .curto { display: none; }
.bolha .ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; font-weight: 800; background: rgba(119, 0, 249, .14); color: var(--lilas); }
.bolha .ico svg, .aviso-icone svg { width: 17px; height: 17px; }
.regua { display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 700; color: var(--tinta-fraca); text-transform: uppercase; letter-spacing: .06em; }
.regua-trilho { width: 220px; height: 4px; border-radius: 4px; background: var(--borda); position: relative; }
.regua-trilho i { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 4px; background: var(--violeta); box-shadow: 0 0 12px var(--violeta); transition: background .4s, box-shadow .4s; will-change: transform; } /* o site.js move por translateX */
.problema.depois .regua-trilho i { background: var(--verde); box-shadow: 0 0 12px var(--verde); }

/* ---------- Como funciona: preso na tela, um passo por vez ---------- */
.como { padding: 100px 0 0; }
.como-pin { height: 470vh; margin-top: 16px; }
.como-fixo { position: sticky; top: 100px; padding: 0 var(--margem); }
.como-grade { --vao: clamp(32px, 5vw, 80px); width: 100%; max-width: var(--largura); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--vao); align-items: center; }
.como-texto, .como-tela { transition: transform .9s var(--mola); }
.como-grade.lado-esq .como-texto { transform: translateX(calc(100% + var(--vao))); }
.como-grade.lado-esq .como-tela { transform: translateX(calc(-100% - var(--vao))); }
.como-texto { display: grid; gap: 28px; }
.como-texto > * { max-width: 500px; }
.como-contador { font: 800 clamp(22px, 2.2vw, 30px)/1 var(--fonte-titulo); color: var(--tinta-fraca); }
.como-contador b { color: var(--violeta); }
.como-passos { display: grid; }
.passo { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 12px; opacity: 0; visibility: hidden; transform: translateY(22px); transition: opacity .3s var(--suave), transform .45s var(--mola), visibility 0s .3s; }
.passo.ativo { opacity: 1; visibility: visible; transform: none; transition: opacity .5s .2s var(--suave), transform .7s .2s var(--mola), visibility 0s .2s; }
.passo-num { font: 800 14px/1 var(--fonte-titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--violeta); }
.passo h3 { font-family: var(--fonte-titulo); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; }
.passo p { color: var(--tinta-suave); font-size: 18px; }
.passo p b { color: var(--titulo); }
.como-stepper { display: flex; gap: 8px; }
.como-stepper i { flex: 1; height: 5px; border-radius: 5px; background: var(--borda); transition: background .4s, box-shadow .4s; }
.como-stepper i.feito { background: var(--violeta); box-shadow: 0 0 10px rgba(138, 45, 255, .5); }
.como-tela { position: relative; height: min(620px, calc(100svh - 180px)); }
.tela-fixa { position: absolute; inset: 0; }
.camada > * { transform: scale(var(--k, 1)); transform-origin: center; }
.camada { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(20px) scale(.98); transition: opacity .45s var(--suave), transform .6s var(--mola), visibility 0s .45s; }
.camada.ativa { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--suave), transform .6s var(--mola), visibility 0s; }
.discord { width: min(100%, 560px); max-height: 100%; background: #313338; color: #dbdee1; font: 400 15px/1.375 'gg sans', 'Noto Sans', var(--fonte-texto); display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; border: 1px solid #1f2023; box-shadow: 0 40px 100px -30px rgba(60, 20, 140, .55); }
.discord-mensagens { padding: 12px 0 18px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; min-height: 0; flex: 1; }

.troca { width: min(100%, 520px); background: #18181d; color: #fff; font: 800 13px/1.2 var(--fonte-texto); text-transform: uppercase; letter-spacing: .02em; padding: 16px; border-radius: 14px; display: grid; gap: 10px; box-shadow: 0 40px 100px -30px rgba(60, 20, 140, .55); }
.troca-titulo { display: flex; justify-content: space-between; color: #c8c8d0; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 700; }
.troca-lado { display: grid; gap: 6px; }
.troca-rotulo { display: flex; justify-content: space-between; align-items: center; }
.troca-status { color: var(--verde); opacity: 0; transition: opacity .3s; }
.troca-status.ligado { opacity: 1; }
.troca-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; background: #0f0f13; padding: 6px; border-radius: 6px; }
.troca-slot { aspect-ratio: 1; background: #26262e; position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 4px; }
.troca-slot img { width: 80%; height: 80%; object-fit: contain; opacity: 0; transform: translateY(-40px) scale(.6) rotate(-20deg); transition: opacity .35s, transform .7s var(--mola); }
.troca-slot.cheio img { opacity: 1; transform: none; }
.troca-slot .tag { position: absolute; left: 0; right: 0; bottom: 0; font-size: 11px; text-align: center; padding: 2px; background: #e5398f; opacity: 0; transition: opacity .3s .3s; }
.troca-slot.cheio .tag { opacity: 1; }
.troca-botoes { display: flex; gap: 8px; justify-content: center; }
.troca-botoes span { padding: 9px 22px; background: #3a3a44; border-radius: 6px; }
.troca-botoes .aceitar { background: #23a55a; transition: transform .3s var(--mola), background .3s; }
.troca-botoes .aceitar.apertado { transform: scale(.94); background: #1b7f45; }
.troca-botoes .recusar { background: #d7263d; }
.troca-fim { text-align: center; color: var(--verde); font-size: 14px; opacity: 0; transform: scale(.9); transition: opacity .3s, transform .5s var(--mola); }
.troca-fim.ligado { opacity: 1; transform: none; }

/* ---------- Blocos escuros (dividem a página como no exemplo) ---------- */
.bloco-escuro { background: radial-gradient(60% 60% at 85% 0%, rgba(138, 45, 255, .22), transparent 70%), radial-gradient(50% 50% at 0% 100%, rgba(58, 61, 255, .14), transparent 70%), #07051a; border: 1px solid rgba(167, 139, 250, .22); }

/* ---------- Entrega automática ---------- */
.entrega { position: relative; margin: 40px auto; max-width: calc(var(--largura) + 120px); padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 72px); border-radius: 36px; }
.entrega-cabeca { text-align: center; max-width: 860px; margin: 0 auto; }
.entrega-cabeca h2 { font-size: clamp(34px, 4.8vw, 68px); }
.entrega-cabeca > p { margin: 20px auto 0; color: var(--tinta-suave); font-size: 19px; max-width: 48ch; }
.olho-ancora-entrega { right: clamp(40px, 8vw, 120px); top: -30px; }
.entrega-palco { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }

/* Cena dentro do jogo */
.jogo { border-radius: 22px; overflow: hidden; border: 1px solid var(--borda-forte); background: #0d0b26; display: flex; flex-direction: column; }
.jogo-hud { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 16px; font-size: 13px; font-weight: 700; color: #e8e4ff; background: rgba(0, 0, 0, .45); }
.jogo-vivo { display: inline-flex; align-items: center; gap: 7px; color: var(--verde); }
.jogo-vivo i { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 8px var(--verde); animation: piscar 1.4s ease-in-out infinite; }
.jogo-cena { position: relative; flex: 1; min-height: 340px; overflow: hidden; background: linear-gradient(180deg, #2b3f6e 0%, #4a6aa8 55%, #8fb0d9 100%); }
.jogo-chao { position: absolute; left: -20%; right: -20%; bottom: -10px; height: 140px; background: repeating-linear-gradient(90deg, #6e5a48 0 46px, #7d6753 46px 92px); transform: perspective(300px) rotateX(55deg); transform-origin: bottom; box-shadow: inset 0 18px 30px rgba(0, 0, 0, .25); }
.boneco { position: absolute; bottom: 44px; width: 60px; display: grid; justify-items: center; }
.bot-boneco { left: 22%; }
.cliente-boneco { right: 22%; }
.boneco .cabeca { width: 34px; height: 34px; border-radius: 6px; background: #f5cd30; position: relative; }
.boneco .cabeca::after { content: ''; position: absolute; left: 8px; right: 8px; top: 12px; height: 5px; border-left: 5px solid #222; border-right: 5px solid #222; }
.boneco .corpo { width: 52px; height: 46px; border-radius: 4px; margin-top: 2px; background: #7a22ff; }
.cliente-boneco .corpo { background: #2b7de9; }
.boneco .pernas { width: 46px; height: 40px; margin-top: 2px; background: linear-gradient(90deg, #2f2f3a 0 46%, transparent 46% 54%, #2f2f3a 54%); }
.tag-nome { position: absolute; top: -30px; white-space: nowrap; font-size: 13px; font-weight: 800; color: #fff; padding: 2px 9px; border-radius: 7px; background: rgba(10, 8, 30, .7); }
.bot-boneco .tag-nome { color: #d6c2ff; }
.jogo.anda .bot-boneco { animation: pulinho .6s ease-in-out 2; }
@keyframes pulinho { 50% { transform: translateY(-10px); } }
.jogo-item { position: absolute; left: calc(22% + 14px); bottom: 134px; width: 54px; height: 54px; opacity: 0; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .7)); }
.jogo.entregando .jogo-item { animation: voar 1.4s var(--suave) forwards; }
@keyframes voar {
  0% { opacity: 0; transform: translate(0, 10px) scale(.5); }
  15% { opacity: 1; transform: translate(0, -20px) scale(1); }
  60% { transform: translate(calc(var(--dx) * .6), -70px) rotate(200deg) scale(1.1); }
  100% { opacity: 1; transform: translate(var(--dx), -10px) rotate(360deg) scale(.9); }
}
.jogo-balao { position: absolute; left: 50%; top: 20px; translate: -50% 0; padding: 8px 14px; border-radius: 12px; background: rgba(10, 8, 30, .82); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; opacity: 0; transform: translateY(-8px); transition: opacity .3s, transform .4s var(--mola); }
.jogo.chamando .jogo-balao { opacity: 1; transform: none; }
.jogo-fim { position: absolute; right: 14%; top: 76px; padding: 6px 12px; border-radius: 999px; background: var(--verde); color: #04210f; font-size: 13px; font-weight: 800; opacity: 0; transform: scale(.7); transition: opacity .3s, transform .5s var(--mola); }
.jogo.feito .jogo-fim { opacity: 1; transform: none; }

.fila { background: #0d0b26; border: 1px solid var(--borda); border-radius: 22px; padding: 16px; display: grid; grid-template-rows: auto 1fr auto; gap: 12px; }
.fila-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.fila-bot { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: var(--titulo); }
.fila-bot img { width: 28px; height: 28px; }
.fila-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--verde); background: rgba(47, 199, 119, .12); padding: 5px 12px; border-radius: 999px; }
.fila-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); animation: piscar 1.6s ease-in-out infinite; }
.fila-lista { display: grid; gap: 8px; min-height: 0; align-content: start; }
.fila-item { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 12px; background: #15123a; animation: entrar .5s var(--mola); color: var(--tinta); }
.fila-item img { width: 36px; height: 36px; }
.fila-item b { display: block; font-size: 14px; }
.fila-item small { color: var(--tinta-fraca); font-size: 12px; }
.etiqueta { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.etiqueta.fila-e { background: rgba(240, 178, 50, .15); color: #f0b232; }
.etiqueta.trocando { background: rgba(138, 45, 255, .22); color: #c9b6ff; }
.etiqueta.entregue { background: rgba(47, 199, 119, .15); color: var(--verde); }
.fila-rodape { font-size: 13px; color: var(--tinta-fraca); }
.fila-rodape span { color: var(--tinta); font-weight: 800; }
@keyframes entrar { from { opacity: 0; transform: translateY(-10px); } }

.garantias { margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.garantias li { position: relative; padding: 18px 18px 18px 52px; border-radius: 18px; background: rgba(255, 255, 255, .035); border: 1px solid var(--borda); color: var(--tinta-suave); font-size: 15px; line-height: 1.5; }
.garantias li::before { content: '✓'; position: absolute; left: 18px; top: 18px; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: rgba(47, 199, 119, .15); color: var(--verde); }
.garantias b { color: var(--titulo); display: block; margin-bottom: 2px; }

/* ---------- Planos: três cartões com as linhas alinhadas (subgrid); o do meio é o destaque ---------- */
.planos-sec { padding: 96px var(--margem) 24px; }
.planos-grade { max-width: 1080px; margin: 44px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.plano-cartao { display: grid; grid-template-rows: subgrid; grid-row: span 7; row-gap: 12px; align-content: start; padding: 24px 22px; border-radius: 24px; background: var(--cartao); border: 1px solid var(--borda); }
.plano-cartao.destaque { background: #0d0b26; color: #f1eeff; border-color: rgba(125, 77, 255, .65); box-shadow: 0 0 0 1px rgba(125, 77, 255, .3), 0 30px 70px -30px rgba(125, 77, 255, .8); margin: -16px 0; padding: 40px 26px; }
.plano-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plano-cartao h3 { font-family: var(--fonte-titulo); font-size: 22px; color: var(--titulo); margin-right: auto; }
.plano-cartao.destaque h3 { color: #fff; }
.plano-rotulo { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(125, 77, 255, .14); color: var(--violeta); white-space: nowrap; }
.plano-rotulo.off { background: rgba(47, 199, 119, .16); color: var(--verde); }
.plano-cartao.destaque .plano-rotulo { background: var(--violeta); color: #fff; }
.plano-cartao.destaque .plano-rotulo.off { background: rgba(47, 199, 119, .22); color: #7ff0b1; }
.plano-para { color: var(--tinta-fraca); font-size: 14px; }
.plano-cartao.destaque .plano-para { color: #b6b0e2; }
.plano-caixa { display: grid; gap: 4px; padding: 14px; border-radius: 14px; background: rgba(125, 77, 255, .08); border: 1px solid rgba(125, 77, 255, .18); }
.plano-cartao.destaque .plano-caixa { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
.plano-caixa b { font-size: 15px; color: var(--titulo); }
.plano-cartao.destaque .plano-caixa b { color: #fff; }
.plano-caixa span { font-size: 13px; color: var(--tinta-fraca); }
.plano-cartao.destaque .plano-caixa span { color: #b6b0e2; }
.plano-valor { display: flex; align-items: baseline; gap: 6px 8px; flex-wrap: wrap; align-self: end; }
.plano-valor s { flex-basis: 100%; order: -1; color: var(--tinta-fraca); font-weight: 700; font-size: 14px; line-height: 1; text-decoration-color: var(--vermelho); } /* o preço cheio fica numa linha só dele, em cima; o preço e o período ficam na mesma linha dos outros cartões */
.plano-valor b { font: 800 clamp(30px, 3vw, 40px)/1 var(--fonte-titulo); color: var(--titulo); letter-spacing: -0.02em; }
.plano-cartao.destaque .plano-valor b { color: #fff; }
.plano-valor span { color: var(--tinta-fraca); font-weight: 600; font-size: 14px; }
.plano-cartao .botao { justify-content: center; width: 100%; }
.plano-cartao .botao-contorno { color: inherit; }
.plano-economia { font-size: 13px; color: var(--tinta-fraca); text-align: center; min-height: 1.4em; }
.plano-cartao.destaque .plano-economia { color: #b6b0e2; }
.plano-lista { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; font-size: 14px; line-height: 1.45; color: var(--tinta-suave); text-wrap: pretty; }
.plano-cartao.destaque .plano-lista { color: #cfc9e6; }
.plano-lista li { display: flex; gap: 8px; align-items: center; }
.plano-lista li span { flex: 1; min-width: 0; }
.plano-lista li em { font-style: normal; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(125, 77, 255, .14); color: var(--violeta); white-space: nowrap; }
.plano-cartao.destaque .plano-lista li em { background: rgba(47, 199, 119, .18); color: #7ff0b1; }
.ic-ok { flex: none; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: rgba(125, 77, 255, .14); color: var(--violeta); }
.ic-ok svg { width: 10px; height: 10px; }
.plano-cartao.destaque .ic-ok { background: rgba(47, 199, 119, .18); color: #7ff0b1; }
.planos-nota, .planos-fechado { max-width: 640px; margin: 22px auto 0; text-align: center; color: var(--tinta-fraca); font-size: 14px; }
:root[data-tema="escuro"] .plano-cartao.destaque { background: #15102e; }
@media (max-width: 900px) {
  .planos-grade { grid-template-columns: 1fr; max-width: 460px; gap: 14px; }
  .plano-cartao { grid-template-rows: auto; grid-row: auto; }
  .plano-cartao.destaque { margin: 0; padding: 28px 22px; order: -1; } /* no celular o Mais vendido vem primeiro */
}

/* ---------- Painel ---------- */
.painel-sec { padding: 96px var(--margem) 40px; }
.painel { max-width: var(--largura); margin: 48px auto 0; display: grid; grid-template-columns: 64px 220px 1fr; height: 600px; text-align: left; font-size: 14px; color: var(--tinta); }

/* ---------- Recursos: um por um, para o lado (preso na tela; o JS centraliza o bloco fixo) ---------- */
.recursos { height: 300vh; margin-top: 24px; }
.recursos-fixo { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 32px; overflow: hidden; }
.recursos-topo { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--margem); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.recursos-contador { font: 800 clamp(28px, 3vw, 44px)/1 var(--fonte-titulo); color: var(--tinta-fraca); }
.recursos-contador b { color: var(--violeta); }
.recursos-trilho { display: flex; gap: 24px; padding: 6px max(var(--margem), calc((100vw - var(--largura)) / 2)); will-change: transform; }
.recurso {
  flex: none; width: min(440px, 80vw); padding: 22px; border-radius: 26px;
  background: var(--cartao); border: 1px solid var(--borda);
  display: flex; flex-direction: column; gap: 10px; contain: layout paint;
  transition: border-color .4s, opacity .4s; opacity: .72; /* sem sombra borrada nem scale: o trilho inteiro anda por transform, leve */
}
.recurso.atual { opacity: 1; border-color: var(--borda-forte); }
.recurso h3 { font-family: var(--fonte-titulo); font-size: 26px; margin-top: 8px; }
.recurso p { color: var(--tinta-suave); }
.recurso-visual { height: 206px; border-radius: 18px; background: #0d0b26; display: grid; place-items: center; padding: 18px; overflow: hidden; color: #f1eeff; }
.recursos-barra { width: min(var(--largura), calc(100% - 2 * var(--margem))); margin: 0 auto; height: 4px; border-radius: 4px; background: var(--borda); }
.recursos-barra i { display: block; height: 100%; width: 100%; border-radius: 4px; background: var(--violeta); box-shadow: 0 0 10px var(--violeta); transform: scaleX(0); transform-origin: left center; will-change: transform; } /* o site.js enche por scaleX */
.cupom { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-radius: 12px; border: 2px dashed rgba(167, 139, 250, .5); font-weight: 800; letter-spacing: .06em; }
.cupom-2 { opacity: .6; transform: rotate(-3deg) translateY(-6px); }
.cupom b { color: var(--verde); }
.barras { width: 100%; height: 130px; display: flex; align-items: flex-end; gap: 8px; }
.barras i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #b07cff, #7700f9); transform-origin: bottom; transform: scaleY(0); transition: transform .9s var(--mola); }
.barras.dentro i { transform: none; }
.barras i:nth-child(2) { transition-delay: .06s; } .barras i:nth-child(3) { transition-delay: .12s; } .barras i:nth-child(4) { transition-delay: .18s; }
.barras i:nth-child(5) { transition-delay: .24s; } .barras i:nth-child(6) { transition-delay: .3s; } .barras i:nth-child(7) { transition-delay: .36s; }
.tickets { display: grid; gap: 8px; width: 100%; }
.tickets span { padding: 10px 14px; border-radius: 10px; background: #2b2d31; color: #f2f3f5; font-weight: 600; font-size: 15px; }

/* Visuais dos Recursos (montados pelo site.js com ícones Lucide). */
.ic { width: 16px; height: 16px; flex: none; }
.ic.ok { color: var(--verde); }
.recurso-visual [data-ui] { font-family: var(--fonte-texto); }
.dossie { width: 100%; display: grid; gap: 6px; font-size: 13px; }
.dossie-topo { display: flex; align-items: center; gap: 8px; color: #b6b0e2; font-weight: 700; }
.dossie-topo span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dossie-topo b { font-size: 11px; letter-spacing: .08em; padding: 2px 8px; border-radius: 999px; background: rgba(255, 92, 122, .18); color: #ff8da1; }
.dossie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.dossie li { display: flex; align-items: center; gap: 8px; background: #16124a; border-radius: 9px; padding: 5px 9px; color: #e9e6ff; }
.dossie li span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dossie li b { color: #fff; }
.dossie-botao { justify-self: end; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--violeta); color: #fff; font-weight: 700; font-size: 12px; }
.painelzinho { width: 100%; display: grid; gap: 10px; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.kpis div { background: #16124a; border-radius: 9px; padding: 7px 10px; display: grid; }
.kpis small { font-size: 11px; color: #b6b0e2; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.kpis b { color: #fff; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpis b.verde { color: var(--verde); }
.painelzinho .barras { height: 86px; }
.perfil { position: relative; width: 100%; display: grid; gap: 8px; font-size: 13px; }
.perfil-cartao { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: linear-gradient(135deg, #3b2a00, #7a5a00); border: 1px solid rgba(240, 178, 50, .5); color: #fff; }
.perfil-cartao img { width: 36px; height: 36px; border-radius: 50%; }
.perfil-cartao small { display: block; color: #ffd98a; font-size: 11px; }
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ranking li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; background: #16124a; border-radius: 8px; padding: 4px 9px; color: #e9e6ff; }
.ranking i { font-style: normal; font-weight: 800; color: var(--lilas); }
.ranking b { color: #fff; font-variant-numeric: tabular-nums; }
.perfil-trofeu { position: absolute; right: 10px; top: 6px; color: #ffd166; opacity: .9; }
.perfil-trofeu .ic { width: 22px; height: 22px; }
.tickets { gap: 6px; }
.tickets span { display: flex; align-items: center; gap: 8px; padding: 7px 11px; font-size: 14px; }
.tk-anuncio { background: rgba(125, 77, 255, .22) !important; color: #e3d6ff !important; }

/* ---------- Testado ---------- */
.testado { padding: 64px var(--margem) 24px; }
.falas { max-width: var(--largura); margin: 40px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fala { margin: 0; padding: 22px 24px; border-radius: var(--raio); background: var(--cartao); border: 1px solid var(--borda); box-shadow: var(--sombra); font-size: 18px; line-height: 1.45; color: var(--tinta); }
.fala::before { content: '★★★★★'; display: block; color: #e9a520; letter-spacing: 2px; font-size: 14px; margin-bottom: 10px; }

/* ---------- Final: bloco curto, com o olho logo acima do título ---------- */
.final { padding: 64px var(--margem) 24px; }
.final-painel { position: relative; max-width: var(--largura); margin: 0 auto; text-align: center; padding: 200px var(--margem) 56px; border-radius: 32px; overflow: hidden; }
.final-painel h2 { font-size: clamp(32px, 4.6vw, 64px); }
.final-painel > p { margin: 16px auto 0; color: var(--tinta-suave); font-size: 19px; max-width: 46ch; }
.final-painel .hero-acoes { margin-top: 28px; }
.olho-ancora-final { left: 50%; top: 100px; }
.olho-final { display: none; }

/* ---------- Dúvidas ---------- */
.duvidas { max-width: var(--largura); margin: 0 auto; padding: 90px var(--margem) 80px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.duvidas-cabeca { position: sticky; top: 120px; }
.acordeao details { border-bottom: 1px solid var(--borda); }
.acordeao summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-weight: 700; font-size: 18px; color: var(--titulo); transition: color .2s; }
.acordeao summary:hover { color: var(--violeta); }
.acordeao summary::-webkit-details-marker { display: none; }
.acordeao summary::after { content: '+'; width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--borda-forte); font-weight: 600; transition: transform .3s var(--mola), background .2s, color .2s; }
.acordeao details[open] summary::after { transform: rotate(45deg); background: var(--violeta); border-color: transparent; color: #fff; }
.acordeao details p { padding: 0 0 22px; color: var(--tinta-suave); max-width: 60ch; }
.acordeao details[open] p { animation: entrar .4s var(--suave); }

/* ---------- Rodapé: bloco escuro arredondado, links centralizados e o nome fechando a página ---------- */
.rodape {
  position: relative; margin-top: 24px; padding: 56px var(--margem) 28px; overflow: hidden;
  border-radius: 44px 44px 0 0; border-top: 1px solid rgba(167, 139, 250, .28);
  background-color: #06041a;
  background-image: radial-gradient(70% 55% at 50% 0%, rgba(138, 45, 255, .28), transparent 70%), radial-gradient(40% 40% at 90% 90%, rgba(58, 61, 255, .16), transparent 70%);
}
:root[data-tema="escuro"] .rodape { background-color: rgba(6, 4, 26, .72); }
.rodape::before { content: ''; position: absolute; right: -150px; bottom: -220px; width: 660px; height: 660px; background: url("../assets/marca/emblema-512.webp") center / contain no-repeat; opacity: .07; transform: rotate(-12deg); pointer-events: none; }
.rodape-grade { position: relative; display: flex; justify-content: flex-start; gap: clamp(40px, 10vw, 140px); text-align: left; max-width: var(--largura); margin: 0 auto; }
.rodape-col { display: grid; gap: 10px; align-content: start; justify-items: start; }
.rodape-col b { font-size: 13px; color: var(--tinta-fraca); text-transform: uppercase; letter-spacing: .08em; }
.rodape-col a { text-decoration: none; color: var(--tinta-suave); transition: color .2s, transform .25s var(--mola), opacity .3s var(--suave); }
.rodape-col a:hover { color: var(--tinta); transform: translateY(-2px); }
.rodape-fecho { position: relative; margin: 48px auto 0; max-width: var(--largura); text-align: center; font: 800 clamp(40px, 9.6vw, 136px)/0.95 var(--fonte-titulo); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; filter: drop-shadow(0 12px 30px rgba(138, 45, 255, .35)); }
.rodape-fecho a { text-decoration: none; display: inline-block; }
.rodape-legal { position: relative; max-width: var(--largura); margin: 32px auto 0; padding-top: 20px; border-top: 1px solid var(--borda); font-size: 14px; color: var(--tinta-fraca); text-align: center; }

/* ---------- Entradas (o conteúdo aparece mesmo sem script) ---------- */
.js .surge { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--suave), transform .9s var(--mola); }
.js .surge.dentro { opacity: 1; transform: none; }

/* ---------- Tablet e celular ---------- */
@media (max-width: 1000px) {
  .barra-wrap { inset: 10px 0 auto; }
  .barra { gap: 8px; padding: 8px 8px 8px 12px; }
  .barra-links { display: none; }
  .botao-tema { margin-left: auto; width: 40px; height: 40px; }
  .barra-cta { min-height: 40px; padding: 0 16px; font-size: 14px; }
  .marca { font-size: 16px; gap: 8px; }
  .marca img { width: 30px; height: 30px; }

  .discord-app { grid-template-columns: 1fr; }
  .dc-canais { display: none; }
  .a2 { left: -10px; } .a1 { right: -10px; }
  .problema-fixo { gap: 14px; }
  .problema-cena { height: min(340px, 40svh); }

  /* Como funciona no celular: a tela fica em cima; nos passos 2 e 4 ela desce e o texto sobe. */
  .como-pin { height: 520vh; }
  .como-fixo { --tela-h: clamp(220px, calc(100svh - 380px), 480px); --texto-h: 250px; padding: 0 16px; }
  .como-grade { grid-template-columns: 1fr; grid-template-rows: var(--tela-h) var(--texto-h); gap: 12px; align-items: start; }
  .como-tela { order: -1; height: var(--tela-h); }
  .como-texto { height: var(--texto-h); display: flex; flex-direction: column; justify-content: center; gap: 12px; overflow: hidden; }
  .como-texto > * { max-width: none; }
  .como-contador { display: none; }
  .como-grade.lado-esq .como-tela { transform: translateY(calc(var(--texto-h) + 12px)); }
  .como-grade.lado-esq .como-texto { transform: translateY(calc(-1 * (var(--tela-h) + 12px))); }
  .passo h3 { font-size: 22px; }
  .passo p { font-size: 16px; line-height: 1.5; }
  .camada { padding: 0; }

  .entrega { margin-inline: var(--margem); padding: 32px 18px; }
  .entrega-palco { grid-template-columns: 1fr; }
  .garantias { grid-template-columns: 1fr 1fr; }
  .painel { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; height: auto; }
  .recursos { height: 400vh; }
  .recursos-fixo { gap: 20px; }
  .falas { grid-template-columns: 1fr; }
  .duvidas { grid-template-columns: 1fr; }
  .duvidas-cabeca { position: static; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding: 132px var(--margem) 16px; }
  .hero h1 { font-size: 38px; margin-top: 16px; }
  .hero-frase { font-size: 16px; margin-top: 14px; }
  .hero-acoes { margin-top: 20px; gap: 10px; }
  .hero-acoes .botao { width: min(100%, 340px); min-height: 48px; padding: 0 22px; font-size: 15px; }
  .hero-fatos { gap: 6px 18px; margin-top: 18px; font-size: 14px; }
  .hero-palco { margin-top: 26px; }
  .selo { font-size: 13px; padding: 7px 12px; }
  /* A tela do Discord mostra tudo, sem cortar o menu. Os avisos aparecem um por vez, cada um num canto. */
  .discord-app { height: auto; font-size: 13px; }
  .dc-msgs { justify-content: flex-start; padding: 6px 0 10px; }
  .msg { grid-template-columns: 32px 1fr; gap: 0 10px; padding: 6px 10px; }
  .msg-avatar { width: 32px; height: 32px; }
  .dc-topo-desc { display: none; }
  .embed-loja { grid-template-columns: 1fr 64px; }
  .embed-loja .embed-banner { width: 64px; height: 64px; }
  .aviso-flutuante { padding: 7px 11px 7px 7px; gap: 8px; border-radius: 12px; }
  .aviso-flutuante.ligado { animation: none; }
  .aviso-flutuante b { font-size: 12px; }
  .aviso-flutuante small { font-size: 11px; }
  .aviso-icone { width: 26px; height: 26px; font-size: 13px; border-radius: 8px; }
  .a1 { right: 6px; top: 6px; left: auto; }
  .a2 { left: 6px; top: 46%; right: auto; }
  .a3 { right: 6px; bottom: 6px; left: auto; }
  .fita { margin-top: 36px; }
  .problema { height: 300vh; margin-top: 16px; }
  .problema-cena { height: min(320px, 38svh); }
  .bolha { width: 172px; height: 64px; font-size: 12.5px; line-height: 1.3; padding: 8px 10px; border-radius: 12px; }
  .bolha .lado { gap: 8px; }
  .bolha .lado + .lado { inset: 8px 10px; }
  .bolha-av, .bolha .ico { width: 26px; height: 26px; font-size: 11px; }
  .bolha .ico svg, .aviso-icone svg { width: 14px; height: 14px; }
  .bolha-txt b { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* No celular: título e detalhe numa linha cada, para todas as bolhas ficarem do mesmo jeito. */
  .bolha-txt .longo { display: none; }
  .bolha-txt .curto { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .regua-trilho { width: 150px; }
  .como { padding-top: 64px; }
  .pix { grid-template-columns: 76px 1fr; }
  .pix-qr { width: 76px; height: 76px; }
  .troca { padding: 10px; font-size: 11px; }
  .entrega { margin-block: 24px; padding: 28px 16px; border-radius: 28px; }
  .entrega-cabeca > p { font-size: 16px; }
  .jogo-cena { min-height: 240px; }
  .boneco { width: 52px; bottom: 36px; }
  .boneco .cabeca { width: 30px; height: 30px; }
  .boneco .corpo { width: 46px; height: 40px; }
  .boneco .pernas { width: 40px; height: 34px; }
  .jogo-item { width: 44px; height: 44px; bottom: 116px; }
  .garantias { grid-template-columns: 1fr; }
  .painel-sec { padding: 64px var(--margem) 24px; }
  .painel { margin-top: 32px; }
  .recursos { margin-top: 8px; }
  .recurso { width: 82vw; padding: 16px; }
  .recurso-visual { height: 194px; padding: 12px; }
  .cadente { width: 110px; }
  .recurso h3 { font-size: 22px; }
  .testado { padding: 48px var(--margem) 16px; }
  .falas { margin-top: 28px; }
  .final { padding: 40px var(--margem) 12px; }
  .final-painel { padding: 28px 20px 28px; border-radius: 24px; }
  /* Celular: o olho fixo some; no bloco final entra a imagem parada, dentro do fluxo da página. */
  .olho { display: none; }
  .olho-final { display: block; width: 110px; height: 110px; margin: 0 auto 10px; }
  .final-painel h2 { font-size: 30px; }
  .final-painel > p { font-size: 16px; }
  .final-painel .hero-acoes { flex-direction: column; align-items: stretch; margin-top: 20px; }
  .final-painel .botao { width: 100%; }
  .olho-ancora-final { top: 60px; }
  .duvidas { padding: 56px var(--margem) 48px; }
  .rodape { border-radius: 28px 28px 0 0; padding-top: 44px; }
  .rodape-grade { gap: 40px; }
  .rodape-fecho { margin-top: 36px; }
  .olho { width: 120px; height: 120px; }
}

@media (max-width: 400px) {
  .barra-wrap { padding: 0 12px; }
  .barra { padding: 7px 7px 7px 10px; gap: 6px; }
  .marca { font-size: 15px; }
  .barra-cta { padding: 0 13px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .js .surge, .letras .l { opacity: 1 !important; transform: none !important; }
  .ceu-viagem { display: none; }
}

/* ---------- Painel de verdade dentro do site (iframe) ---------- */
.painel-vivo { display: block; height: 680px; padding: 0; overflow: hidden; background: #050410; }
.painel-barra { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--borda); background: var(--cartao); }
.painel-barra .pontos { display: flex; gap: 6px; }
.painel-barra .pontos i { width: 10px; height: 10px; border-radius: 50%; background: var(--borda-forte); }
.painel-url { flex: 1; font-size: 13px; color: var(--tinta-fraca); padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid var(--borda); text-align: center; }
.painel-quadro { position: relative; height: calc(100% - 53px); background: #050410; }
/* O iframe nasce invisível e aparece em fade quando a página de dentro carrega (.carregado, posto pelo site.js). */
.painel-vivo iframe { position: relative; width: 100%; height: 100%; border: 0; display: block; background: #050410; opacity: 0; transition: opacity .3s var(--suave); }
.painel-quadro.carregado iframe { opacity: 1; }
/* Esqueleto do painel atrás do iframe: coluna de menu + título, quatro cartões e dois blocos, com o brilho passando. */
.painel-esqueleto { position: absolute; inset: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); transition: opacity .3s var(--suave), visibility 0s .3s; }
.painel-esqueleto i { display: block; border-radius: 10px; background: linear-gradient(90deg, #15132a 25%, #231f40 50%, #15132a 75%); background-size: 200% 100%; animation: brilhar 1.4s linear infinite; }
@keyframes brilhar { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.pe-menu { display: grid; gap: 10px; align-content: start; padding: 22px 16px; border-right: 1px solid rgba(220, 220, 240, .08); }
.pe-menu i { height: 38px; }
.pe-corpo { display: grid; gap: 16px; align-content: start; padding: 26px; }
.pe-titulo { height: 28px; width: 40%; }
.pe-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pe-kpis i { height: 86px; }
.pe-bloco { height: 180px; }
.pe-baixo { height: 120px; }
.painel-quadro.carregado .painel-esqueleto { opacity: 0; visibility: hidden; }
.leve .painel-esqueleto i { animation: none; } /* modo leve: blocos parados, sem brilho correndo */
.leve .painel-vivo iframe, .leve .painel-esqueleto { transition: none; }
.painel-acoes { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .painel-vivo { height: 560px; } .painel-url { display: none; }
  .painel-esqueleto { grid-template-columns: 1fr; } .pe-menu { display: none; } .pe-kpis { grid-template-columns: 1fr 1fr; }
}
:root[data-tema="escuro"] .janela, .bloco-escuro .janela { background: #0f0d1c; box-shadow: 0 40px 120px -30px rgba(60, 20, 160, .45), 0 0 0 6px rgba(220, 220, 240, .04); }

/* Barra: links em uma linha só. */
.barra-links a { white-space: nowrap; }

/* ---------- Botões do meio da página (não os do topo): brilho suave que passa de tempos em tempos e
   um pulso leve em volta, para chamar o clique sem gritar. Ao passar o mouse, o brilho passa na hora. */
main .botao { position: relative; isolation: isolate; }
/* O brilho corre dentro de <i class="brilho"> (que corta nas bordas do botão); assim o pulso, em volta do
   botão, não é cortado. O pulso é uma camada com a sombra mais forte que só acende e apaga (opacity),
   em vez de animar box-shadow (que redesenha o botão a cada quadro). */
main .botao > .brilho { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: -1; }
main .botao > .brilho::after { content: ''; position: absolute; inset: 0; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent); transform: translateX(-160%) skewX(-18deg);
  animation: brilhoCta 6.5s ease-in-out 1.5s infinite; }
main .botao-contorno > .brilho::after { background: linear-gradient(100deg, transparent, rgba(154, 77, 255, .22), transparent); animation-delay: 4.5s; }
main .botao:hover > .brilho::after { animation: brilhoCtaJa .75s ease; }
main .botao:not(.botao-contorno)::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  box-shadow: 0 14px 36px -10px rgba(119, 0, 249, .55), 0 0 0 6px rgba(154, 77, 255, .14); opacity: 0; animation: pulsoCta 3.6s ease-in-out infinite; }
main .botao:not(.botao-contorno):hover::before { animation: none; opacity: 0; }
main .botao-contorno:hover { border-color: var(--violeta); box-shadow: 0 10px 28px -14px rgba(119, 0, 249, .7); }
@keyframes brilhoCta { 0%, 78% { transform: translateX(-160%) skewX(-18deg); } 92%, 100% { transform: translateX(320%) skewX(-18deg); } }
@keyframes brilhoCtaJa { from { transform: translateX(-160%) skewX(-18deg); } to { transform: translateX(320%) skewX(-18deg); } }
@keyframes pulsoCta { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { main .botao, main .botao::after { animation: none !important; } }
@media (prefers-reduced-motion: reduce) { main .botao::before, main .botao > .brilho::after { animation: none !important; } }

/* ---------- Animações paradas fora da tela: o site.js marca .fora nos blocos que saíram da tela ---------- */
.fora, .fora *, .fora *::before, .fora *::after { animation-play-state: paused !important; }

/* ---------- Modo leve (html.leve): aparelho fraco, economia de dados ou movimento reduzido ----------
   Sem 3D (o PNG do olho aparece), metade das estrelas, sem reflexo nos títulos, sem pulso/brilho nos botões
   e sem desfoque atrás da barra. */
.leve h1 em, .leve h2 em, .leve em .l { animation: none; }
.leve .letras.acesa em .l { animation: acender .9s var(--d) both; }
.leve main .botao::before, .leve main .botao:not(:hover) > .brilho::after { animation: none; } /* o brilho ao passar o mouse continua */
.leve .ceu-brilhos span:nth-child(even), .leve .viajante:nth-child(even) { display: none; }
.leve .barra { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--vidro-solido); }

/* Topo com quatro seções: os links ficam juntos e o menu cabe numa linha. */
.barra-links a { padding: 9px 12px; }
@media (max-width: 1240px) { .barra-links a { padding: 9px 9px; font-size: 14.5px; } }

/* Topo com seis seções (Problema … Dúvidas). PC: tudo numa linha (com menos folga em telas médias).
   Celular e tablet: os links viram uma faixa embaixo da marca, que rola para o lado; o link da seção
   atual vem sozinho para o meio. */
@media (max-width: 1180px) and (min-width: 1001px) {
  .barra { gap: 8px; padding-left: 14px; }
  .marca { font-size: 16px; gap: 8px; }
  .marca img { width: 28px; height: 28px; }
  .barra-links { gap: 0; }
  .barra-links a { padding: 8px 8px; font-size: 14px; }
}
/* No celular a barra de seções não aparece: fica só a marca, o tema e o botão. */

/* Entrar (Hub): link discreto antes do botão principal da barra. */
.barra-entrar { font-weight: 600; font-size: 14px; color: inherit; text-decoration: none; opacity: .8; padding: 8px 10px; border-radius: 999px; transition: opacity .18s, background .18s; }
.barra-entrar:hover { opacity: 1; background: rgba(125, 77, 255, .08); }
@media (max-width: 640px) { .barra { gap: 6px; } .barra-entrar { font-size: 13px; padding: 6px 8px; } .barra-cta { padding: 0 12px; font-size: 13px; } }
@media (max-width: 400px) { .botao-tema { display: none; } } /* no celular pequeno fica marca, Entrar e Quero o bot */

/* Celular: os Recursos viram uma lista normal, um cartão embaixo do outro (sem rolagem presa: leve). */
@media (max-width: 640px) {
  .recursos { height: auto; }
  .recursos-fixo { position: static; overflow: visible; gap: 16px; }
  .recursos-trilho { flex-direction: column; gap: 14px; padding: 6px var(--margem) 0; transform: none !important; will-change: auto; }
  .recurso { width: 100%; opacity: 1; contain: none; }
  .recursos-contador, .recursos-barra { display: none; }
}

@media (max-width: 640px) {
  .planos-sec { padding: 64px var(--margem) 16px; }
  .planos-grade { margin-top: 24px; }
}