/* Mega Black 2026 · Tshirteria — identidade arcade do marketing.
   Preto puro, neon em linhas e ícones, pixel onde um jogo escreveria
   (títulos, fase, placar, selos, cronômetro). Todo o resto em Montserrat.
   A logo do marketing é a peça principal; os raios coloridos aparecem em duas
   trocas de seção (CONTINUE? e tela final) e toda troca de seção tem divisória. */

:root {
  --preto: #000000;
  --tela: #FFF8E6;      /* off-white do marketing */
  --apagado: #A9A49A;   /* texto secundário */
  --linha: #26222B;
  --rosa: #FF4EC7;
  --mint: #A6FF9A;
  --ciano: #7FF7FF;
  --roxo: #8A3CFF;
  --amarelo: #FFE34D;
  --pixel: 'Press Start 2P', 'Courier New', monospace;
  --texto: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --larg: 1120px;
  --degrau: polygon(0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px));
  --degrau-p: polygon(0 3px, 3px 3px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px));
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--preto); color: var(--tela); font: 400 16px/1.6 var(--texto); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
button, summary { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--faixa-h, 40px) + 64px); }

.moldura { width: 100%; max-width: var(--larg); margin: 0 auto; padding: 0 24px; }
.moldura--estreita { max-width: 800px; }

/* ícones em pixel */
.px { width: 24px; height: 24px; flex: none; }
.px--amarelo { color: var(--amarelo); } .px--rosa { color: var(--rosa); } .px--ciano { color: var(--ciano); } .px--mint { color: var(--mint); }

/* ---------- títulos de seção: pixel, com o ▶ do manual do marketing ---------- */
.titulo { font: 400 24px/1.6 var(--pixel); text-transform: uppercase; display: flex; gap: 14px; align-items: baseline; }
.titulo::before { content: ''; flex: none; width: 12px; height: 16px; background: var(--rosa); transform: translateY(1px);
  clip-path: polygon(0 0, 33% 0, 33% 12.5%, 66% 12.5%, 66% 25%, 100% 25%, 100% 75%, 66% 75%, 66% 87.5%, 33% 87.5%, 33% 100%, 0 100%); }
.titulo--sem-marca::before { display: none; }
.bloco__texto { margin-top: 14px; max-width: 60ch; color: var(--apagado); font-size: 17px; }

/* placar em pixel (preços) */
.pontos { font-family: var(--pixel); color: var(--amarelo); font-size: .9em; letter-spacing: -.1em; white-space: nowrap; }

/* selo com cantos em degrau */
.selo { display: inline-block; font: 800 15px/1.3 var(--texto); letter-spacing: .02em; text-transform: uppercase; color: var(--preto); background: var(--amarelo); padding: 8px 12px; text-align: center; clip-path: var(--degrau); }

/* ---------- botões (pílula do manual) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 14px 26px; border-radius: 999px; border: 2px solid transparent;
  font: 800 14px/1.2 var(--texto); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s; }
.btn--rosa { position: relative; min-height: 60px; padding: 16px 32px; font-size: 15px; background: var(--rosa); color: var(--preto); border-color: var(--preto);
  box-shadow: 0 6px 0 #A0127A, 0 0 0 3px var(--rosa), 0 10px 28px rgba(255, 78, 199, .45); transition: transform .08s, box-shadow .08s, background-color .15s; }
.btn--rosa:active { transform: translateY(6px); box-shadow: 0 0 0 #A0127A, 0 0 0 3px var(--rosa), 0 4px 14px rgba(255, 78, 199, .4); }
.btn--contorno { border-color: var(--tela); color: var(--tela); }
@media (hover: hover) {
  .btn--rosa:hover { background: #FF7AD6; transform: translateY(2px); box-shadow: 0 4px 0 #A0127A, 0 0 0 3px var(--rosa), 0 10px 32px rgba(255, 78, 199, .6); }
  .btn--contorno:hover { background: var(--tela); color: var(--preto); }
}
.btn[aria-disabled="true"] { opacity: .85; cursor: default; }
.btn__seta { display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid currentColor; border-radius: 50%; flex: none; }
.btn__seta svg { width: 16px; height: 16px; }

/* ---------- divisórias entre seções ---------- */
.divisor { display: block; }
.divisor--xadrez { height: 20px; background: conic-gradient(var(--c) 0 25%, transparent 0 50%, var(--c) 0 75%, transparent 0) 0 0 / 20px 20px repeat-x; }
.divisor--rosa { --c: var(--rosa); } .divisor--ciano { --c: var(--ciano); } .divisor--amarelo { --c: var(--amarelo); } .divisor--mint { --c: var(--mint); }
.divisor--neon { height: 6px; background: linear-gradient(90deg, var(--rosa), var(--roxo) 30%, var(--ciano) 55%, var(--mint) 78%, var(--amarelo)); }

/* ---------- HUD ---------- */
.hud { position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 24px;
  background: var(--preto); border-bottom: 2px solid var(--roxo); }
.hud__logo img { width: 124px; }
.hud__relogio { padding: 10px 16px; background: var(--amarelo); color: var(--preto); clip-path: var(--degrau);
  font: 800 15px/1.2 var(--texto); font-variant-numeric: tabular-nums; white-space: nowrap; }


/* ---------- tela de título: a logo é a peça principal ---------- */
.hero { position: relative; overflow: hidden; padding: 36px 24px 150px; text-align: center; }
.hero__conteudo { display: grid; justify-items: center; }
.hero__logo { position: relative; width: min(820px, 100%, max(360px, calc((100svh - 400px) * 1.454))); }
.hero__logo img { width: 100%; }
.hero__logo-base { position: relative; transform-origin: 50% 60%; animation: logo-liga .7s steps(7) both, logo-treme .32s steps(1) .7s infinite, logo-rgb 3.6s steps(1) .7s infinite; }
.hero__fatia { position: absolute; inset: 0; opacity: 0; pointer-events: none; animation: logo-fatia 3.6s steps(1) .7s infinite; }
.hero__fatia--2 { animation-name: logo-fatia-2; }
/* linhas de TV por cima da logo (o fundo é preto, então só aparecem nas letras) */
.hero__logo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 2px, transparent 2px 5px); animation: logo-ruido 3.6s steps(1) .7s infinite; }
@keyframes logo-liga { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } }
@keyframes logo-treme { 0% { transform: translate(0, 0); } 25% { transform: translate(1px, -1px); } 50% { transform: translate(-1px, 1px); } 75% { transform: translate(1px, 1px); } }
@keyframes logo-rgb {
  0%, 62%, 69%, 84%, 89%, 100% { filter: none; }
  63%, 85% { filter: drop-shadow(-6px 0 0 var(--ciano)) drop-shadow(6px 0 0 var(--rosa)); }
  65%, 87% { filter: drop-shadow(5px 0 0 var(--ciano)) drop-shadow(-4px 0 0 var(--amarelo)); }
  67% { filter: drop-shadow(-3px 2px 0 var(--mint)) drop-shadow(4px -2px 0 var(--rosa)); }
}
@keyframes logo-fatia {
  0%, 62%, 69%, 84%, 89%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
  63% { opacity: 1; clip-path: inset(18% 0 62% 0); transform: translateX(-14px); filter: drop-shadow(4px 0 0 var(--ciano)); }
  65% { opacity: 1; clip-path: inset(55% 0 28% 0); transform: translateX(12px); filter: drop-shadow(-4px 0 0 var(--rosa)); }
  67% { opacity: 1; clip-path: inset(36% 0 50% 0); transform: translateX(-8px); }
  85% { opacity: 1; clip-path: inset(70% 0 12% 0); transform: translateX(16px); filter: drop-shadow(-4px 0 0 var(--mint)); }
  87% { opacity: 1; clip-path: inset(8% 0 80% 0); transform: translateX(-10px); }
}
@keyframes logo-fatia-2 {
  0%, 63%, 68%, 85%, 88%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
  64% { opacity: 1; clip-path: inset(44% 0 38% 0); transform: translateX(18px); filter: drop-shadow(-5px 0 0 var(--amarelo)); }
  66% { opacity: 1; clip-path: inset(80% 0 4% 0); transform: translateX(-12px); filter: drop-shadow(5px 0 0 var(--ciano)); }
  86% { opacity: 1; clip-path: inset(26% 0 58% 0); transform: translateX(-16px); filter: drop-shadow(5px 0 0 var(--rosa)); }
}
@keyframes logo-ruido { 0%, 62%, 69%, 84%, 89%, 100% { opacity: .55; transform: none; } 63%, 85% { opacity: 1; transform: translateY(2px); } 66%, 87% { opacity: .2; transform: translateY(-2px); } }
.hero__sub { margin-top: 28px; font-size: 21px; font-weight: 700; }
.hero__oferta { margin-top: 8px; font-size: 18px; color: var(--apagado); }
.hero .btn { margin-top: 32px; }
.onda { position: absolute; left: 0; width: 100%; display: block; }
.onda--hero { bottom: -1px; height: 120px; }

/* ---------- vantagens ---------- */
.vantagens { padding: 12px 0 56px; }
.vantagens.fundo::before { display: none; }
.vantagens .px { color: var(--preto); }
.vantagens__lista { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vantagens__lista li { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 16px; }
.vantagens__lista .px { width: 32px; height: 32px; }

/* ---------- fotos em movimento (não param com o mouse) ---------- */
.desfile { overflow: hidden; padding: 8px 0 40px; }
.desfile__trilho { display: flex; gap: 12px; width: max-content; animation: desfile 90s linear infinite; }
.desfile__trilho img { width: 176px; height: 236px; object-fit: cover; border-radius: 14px; flex: none; }
@keyframes desfile { to { transform: translateX(calc(-50% - 6px)); } }

/* ---------- blocos ---------- */
.bloco { padding: 96px 0; }
.bloco .btn { margin-top: 32px; }

/* ---------- como funciona: vídeo vertical ao lado dos passos ---------- */
.como { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "tela titulo" "tela fases" "tela cta"; grid-template-rows: auto auto 1fr; column-gap: 72px; align-items: start; }
.como__texto { display: contents; }
.como__tela { grid-area: tela; }
.como .titulo { grid-area: titulo; }
.como .fases { grid-area: fases; }
.como .btn { grid-area: cta; justify-self: start; align-self: start; }
.fundo--roxo .vsl { box-shadow: 10px 10px 0 var(--preto); }
.vsl { position: relative; width: 340px; aspect-ratio: 9 / 16; border: 3px solid var(--ciano); border-radius: 28px; overflow: hidden; box-shadow: 10px 10px 0 var(--roxo); }
.vsl--horizontal { width: min(640px, 100%); aspect-ratio: 16 / 9; }
.vsl iframe, .vsl video { width: 100%; height: 100%; border: 0; display: block; background: #000; object-fit: cover; }
.vsl__vazio { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; text-align: center; padding: 24px; }
.vsl__play { width: 72px; height: 72px; color: var(--rosa); }
.vsl__aviso { color: var(--apagado); font-size: 15px; max-width: 18ch; }

/* as quatro fases de como funciona (é uma sequência de verdade) */
.fases { display: grid; gap: 26px; margin-top: 36px; }
.fases li { display: grid; grid-template-columns: 40px 1fr; column-gap: 18px; align-items: start; }
.fases__n { grid-row: 1 / 3; font: 400 16px/1 var(--pixel); color: var(--preto); background: var(--mint); width: 40px; height: 40px; display: grid; place-items: center; clip-path: var(--degrau); }
.fases h3 { font-size: 17px; font-weight: 700; }
.fases p { color: var(--apagado); font-size: 15px; }

/* ---------- araras = fases do jogo ---------- */
.araras { padding-bottom: 24px; }
.nivel--amarelo { --acc: var(--amarelo); } .nivel--mint { --acc: var(--mint); } .nivel--rosa { --acc: var(--rosa); } .nivel--ciano { --acc: var(--ciano); }

.atalhos-barra { position: sticky; top: var(--faixa-h, 40px); z-index: 40; margin-top: 40px; padding: 12px 0; background: var(--preto); border-bottom: 1px solid var(--linha); }
.atalhos { display: flex; justify-content: center; gap: 12px; max-width: var(--larg); margin: 0 auto; padding: 0 24px; }
.atalho { display: grid; justify-items: center; gap: 4px; min-width: 132px; padding: 10px 18px; border: 2px solid var(--acc); border-radius: 999px; text-decoration: none; transition: background-color .15s, color .15s; }
.atalho strong { font: 400 12px/1 var(--pixel); letter-spacing: -.1em; color: var(--acc); }
.atalho span { font-size: 12px; font-weight: 700; }
.atalho[aria-current="true"] { background: var(--acc); }
.atalho[aria-current="true"] strong, .atalho[aria-current="true"] span { color: var(--preto); }

/* cada fase abre com uma faixa xadrez na cor dela */
.nivel { padding: 64px 0 24px; }
.nivel::before { content: ''; display: block; height: 20px; margin-bottom: 56px; background: conic-gradient(var(--acc) 0 25%, transparent 0 50%, var(--acc) 0 75%, transparent 0) 0 0 / 20px 20px repeat-x; }
.nivel:first-child { padding-top: 48px; }
.nivel__topo { display: grid; grid-template-columns: 1fr auto; gap: 8px 32px; align-items: end; }
.nivel__fase { font: 400 12px/1 var(--pixel); color: var(--acc); text-transform: uppercase; }
.nivel__nome { margin-top: 12px; font-size: 28px; font-weight: 800; line-height: 1.15; }
.nivel__frase { margin-top: 8px; color: var(--apagado); }
.nivel__placar { grid-column: 2; grid-row: 1 / 4; text-align: right; }
.nivel__placar strong { display: block; font: 400 56px/1 var(--pixel); letter-spacing: -.1em; color: var(--acc); white-space: nowrap; }
.nivel__placar strong small { font-size: .43em; vertical-align: .9em; margin-right: .3em; }
.nivel__placar .selo { margin-top: 16px; background: var(--acc); }

/* tela de seleção: grade de peças + peça em destaque */
.araras .moldura { max-width: 1280px; }
.selecao { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 36px; margin-top: 40px; align-items: start; }
.selecao__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 14px; padding-top: 12px; }
.selecao__opcao { position: relative; display: grid; align-content: start; gap: 8px; padding: 0; border: 0; background: none; color: var(--apagado); font: inherit; text-align: left; cursor: pointer; }
.selecao__foto { display: block; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; outline: 3px solid transparent; outline-offset: 3px; transition: outline-color .15s; }
.selecao__foto img { width: 100%; height: 100%; object-fit: cover; }
.selecao__off { position: absolute; top: 8px; left: 8px; font: 800 13px/1 var(--texto); color: var(--preto); background: var(--acc); padding: 6px 8px; clip-path: var(--degrau-p); }
.selecao__precos { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.selecao__precos s { font-size: 13px; color: var(--apagado); }
.selecao__precos strong { font: 400 15px/1.2 var(--pixel); letter-spacing: -.1em; color: var(--acc); }
.selecao__nome { font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.selecao__opcao[aria-pressed="true"] { color: var(--tela); }
.selecao__opcao[aria-pressed="true"] .selecao__foto { outline-color: var(--acc); }
.selecao__opcao[aria-pressed="true"]::before { content: 'P1'; position: absolute; z-index: 1; top: -12px; right: 6px; font: 400 9px/1 var(--pixel); color: var(--preto); background: var(--acc); padding: 5px 6px; clip-path: var(--degrau-p); }
@media (hover: hover) { .selecao__opcao:hover .selecao__foto { outline-color: color-mix(in srgb, var(--acc) 45%, transparent); } }
.selecao__opcao:focus-visible { outline: none; }
.selecao__opcao:focus-visible .selecao__foto { outline-color: var(--mint); }

/* peça em destaque: a FOTO é o card; embaixo, uma linha só (nome, preço e link) */
.destaque { position: sticky; top: calc(var(--faixa-h, 40px) + 84px); overflow: hidden; background: #0E0C14; border: 2px solid var(--acc); border-radius: 22px; }
.destaque__fotos { position: relative; height: min(calc(100svh - 250px), 760px); min-height: 420px; background: #000; }
.destaque__trilho { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.destaque__trilho::-webkit-scrollbar { display: none; }
.destaque__trilho img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; scroll-snap-align: start; }
.destaque__off { position: absolute; top: 14px; left: 14px; font: 800 15px/1 var(--texto); color: var(--preto); background: var(--acc); padding: 8px 12px; border-radius: 999px; }
.destaque__seta { position: absolute; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -20px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; cursor: pointer; opacity: 0; transition: opacity .2s; }
.destaque__seta svg { width: 20px; height: 20px; }
.destaque__seta--ant { left: 12px; } .destaque__seta--ant svg { transform: scaleX(-1); }
.destaque__seta--prox { right: 12px; }
.destaque__fotos:hover .destaque__seta, .destaque__seta:focus-visible { opacity: 1; }
@media (hover: none) { .destaque__seta { display: none; } }
.destaque__pontos { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 6px; }
.destaque__pontos button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .55); cursor: pointer; transition: width .2s, background-color .2s; }
.destaque__pontos button[aria-current="true"] { width: 22px; background: #fff; }
.destaque__info { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; }
.destaque__nome { font-size: 18px; font-weight: 700; line-height: 1.25; }
.destaque__preco { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.destaque__preco strong { font: 900 26px/1 var(--texto); letter-spacing: -.02em; color: var(--acc); }
.destaque__preco s { font-size: 14px; color: var(--apagado); }
.destaque__link { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 2px solid var(--acc); border-radius: 999px; color: var(--tela); font: 800 13px/1 var(--texto); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: background-color .15s, color .15s; }
.destaque__link svg { width: 18px; height: 18px; }
@media (hover: hover) { .destaque__link:hover { background: var(--acc); color: var(--preto); } }
.btn--claro { background: var(--tela); color: var(--preto); border-color: var(--tela); }
@media (hover: hover) { .btn--claro:hover { background: var(--acc); border-color: var(--acc); } }

.nivel__proximo { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: 56px; padding: 20px 0; border-top: 1px solid var(--linha); }
.nivel__proximo p { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.nivel__proximo p .px { color: var(--acc); }
.nivel__proximo .btn { margin: 0; min-height: 48px; }

/* ---------- fundo de raios (a referência do marketing), em duas trocas de seção ---------- */
.raios { position: relative; overflow: hidden; display: grid; justify-items: center; padding: 120px 24px;
  background:
    radial-gradient(rgba(0, 0, 0, .3) 1.3px, transparent 1.7px) 0 0 / 9px 9px,
    repeating-conic-gradient(from -6deg at 50% 50%,
      var(--rosa) 0 11deg, var(--preto) 11deg 12deg,
      var(--amarelo) 12deg 23deg, var(--preto) 23deg 24deg,
      var(--ciano) 24deg 35deg, var(--preto) 35deg 36deg,
      var(--roxo) 36deg 47deg, var(--preto) 47deg 48deg,
      var(--mint) 48deg 59deg, var(--preto) 59deg 60deg); }
/* bordas em degraus de pixel na entrada e na saída dos raios */
.fundo { position: relative; background: var(--bg); color: var(--tela); }
.fundo--mint { --bg: var(--mint); --tela: #000; --apagado: rgba(0, 0, 0, .72); --linha: rgba(0, 0, 0, .22); }
.fundo--ciano { --bg: var(--ciano); --tela: #000; --apagado: rgba(0, 0, 0, .72); --linha: rgba(0, 0, 0, .22); }
.fundo--amarelo { --bg: var(--amarelo); --tela: #000; --apagado: rgba(0, 0, 0, .72); --linha: rgba(0, 0, 0, .22); }
.fundo--roxo { --bg: var(--roxo); --tela: #FFF8E6; --apagado: rgba(255, 248, 230, .84); --linha: rgba(255, 255, 255, .28); }
.raios::before, .raios::after, .fundo::before, .fundo::after { content: ''; position: absolute; left: 0; right: 0; height: 24px; background-repeat: repeat-x; background-size: 48px 24px; }.raios::before, .fundo::before { top: -1px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 16'%3E%3Cpath d='M0 0H32V4H28V8H24V12H20V16H12V12H8V8H4V4H0Z' fill='black'/%3E%3C/svg%3E"); }
.raios::after, .fundo::after { bottom: -1px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 16'%3E%3Cpath d='M0 16H32V12H28V8H24V4H20V0H12V4H8V8H4V12H0Z' fill='black'/%3E%3C/svg%3E"); }
.painel { position: relative; max-width: 640px; padding: 40px 44px; text-align: center; background: var(--preto); border: 4px solid var(--tela); box-shadow: 12px 12px 0 var(--preto); }

.continua__pisca { font: 400 16px/1 var(--pixel); color: var(--amarelo); text-transform: uppercase; animation: pisca 1.1s steps(1) infinite; }
.continua__titulo { margin-top: 26px; font: 400 32px/1.6 var(--pixel); text-transform: uppercase; }
.continua__texto { margin: 18px auto 0; max-width: 34ch; font-size: 18px; color: var(--apagado); }
@keyframes pisca { 50% { opacity: 0; } }

/* ---------- bônus (cupom progressivo) ---------- */
.bonus { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 48px; align-items: end; }
.bonus li { --cor: var(--rosa); position: relative; display: grid; align-content: end; gap: 10px; min-height: calc(170px + var(--n) * 36px); padding: 20px 18px; background: var(--cor); color: var(--preto); clip-path: var(--degrau); transition: transform .15s; }
.bonus li:nth-child(1) { --cor: var(--rosa); --n: 0; } .bonus li:nth-child(2) { --cor: var(--amarelo); --n: 1; } .bonus li:nth-child(3) { --cor: var(--mint); --n: 2; }
.bonus li:nth-child(4) { --cor: var(--ciano); --n: 3; } .bonus li:nth-child(5) { --cor: var(--tela); --n: 4; }
.bonus li.ativo { transform: translateY(-14px); }
.bonus li.ativo::before { content: 'Seu cupom'; position: absolute; top: 14px; left: 18px; font: 400 9px/1 var(--pixel); text-transform: uppercase; }
.bonus__pct { font: 900 54px/1 var(--texto); letter-spacing: -.03em; }
.bonus__min { font-size: 15px; font-weight: 800; }
.bonus__trava { display: inline-flex; align-items: center; justify-self: start; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--preto); color: var(--tela); font-size: 12px; font-weight: 700; }
.bonus__trava .px { width: 14px; height: 14px; color: var(--amarelo); }

.calc { margin-top: 48px; max-width: 560px; }
.calc label { display: block; font-weight: 700; font-size: 17px; }
.calc__campo { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 4px 22px; border: 2px solid var(--mint); border-radius: 999px; }
.calc__campo span { font: 400 14px/1 var(--pixel); color: var(--mint); }
.calc__campo input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--tela); font: 700 22px/1 var(--texto); padding: 14px 0; outline: none; }
.calc__campo:focus-within { box-shadow: 0 0 0 3px rgba(166, 255, 154, .35); }
.xp { margin-top: 16px; height: 14px; border: 2px solid var(--linha); padding: 2px; }
.xp__barra { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--amarelo) 0 10px, transparent 10px 12px); transition: width .35s steps(12); }
.calc__resultado { margin-top: 14px; min-height: 3.2em; color: var(--apagado); }
.calc__resultado strong { color: var(--tela); }

.trava { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--linha); }
.trava p { display: flex; gap: 10px; align-items: center; max-width: 52ch; font-weight: 600; }
.trava .btn { margin: 0; }

/* ---------- frete ---------- */
.frete__grade { display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: center; }
.frete__caminhao { width: 140px; height: 140px; color: var(--preto); }

/* ---------- para quem é ---------- */
.publico__lista { display: grid; gap: 14px; margin-top: 28px; }
.publico__lista li, .canal__lista li { display: flex; gap: 12px; align-items: center; font-weight: 600; }

/* ---------- Canal ---------- */
.canal { --tela: #FFF8E6; --apagado: #A9A49A; --linha: #26222B; padding: 48px; color: var(--tela); background: var(--preto); border: 3px solid var(--preto); border-radius: 26px; box-shadow: 12px 12px 0 var(--rosa); }
.canal__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; margin-top: 32px; }
.canal__sub { margin-top: 16px; font-size: 14px; color: var(--apagado); }
.canal__nota { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--mint); }

/* ---------- galeria ---------- */
.galeria { display: grid; gap: 12px; margin-top: 40px; }
.galeria__bloco { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 240px); gap: 12px; }
.galeria__bloco img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center 25%; border-radius: 14px; }
.galeria__bloco img:first-child { grid-column: 1 / 3; grid-row: 1 / 3; object-position: center 15%; }
.galeria__bloco--inv img:first-child { grid-column: 3 / 5; }

/* ---------- FAQ ---------- */
.faq { margin-top: 32px; border-top: 1px solid var(--linha); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: 20px 48px 20px 0; font-weight: 700; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 400 16px/1 var(--pixel); color: var(--rosa); }
.faq details[open] summary::after { content: '-'; }
.resposta { padding: 0 0 22px; color: var(--apagado); max-width: 64ch; }
.resposta strong { color: var(--tela); }
.resposta a { color: var(--ciano); }

/* ---------- tela final (raios) ---------- */
.final { gap: 8px; padding-top: 110px; padding-bottom: 110px; }
.final__logo { width: min(520px, 92%); filter: drop-shadow(10px 10px 0 var(--preto)); }
.final .painel { margin-top: 12px; padding: 28px 36px 32px; }
.final__texto { font-size: 18px; color: var(--tela); max-width: 34ch; margin: 0 auto; }
.final .btn { margin-top: 24px; }

/* ---------- rodapé ---------- */
.rodape { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 40px 24px 48px; font-size: 13px; color: var(--apagado); }
.rodape img { width: 110px; }
.rodape__links { display: flex; gap: 12px 24px; flex-wrap: wrap; justify-content: center; }
.rodape__links a { color: var(--tela); }

/* ---------- responsivo ---------- */
@media (max-width: 1024px) {
  .selecao { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
  .selecao__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bonus { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .bonus li { padding: 16px 12px; }
  .bonus__pct { font-size: 36px; }
  .bonus__min { font-size: 13px; }
  .como { column-gap: 48px; }
  .vsl { width: 300px; }
}
@media (max-width: 800px) {
  .hero { padding-bottom: 110px; }
  .vantagens__lista { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
  .como { grid-template-columns: 1fr; grid-template-areas: "titulo" "tela" "fases" "cta"; grid-template-rows: none; }
  .como__tela { justify-self: center; margin-top: 28px; }
  .vsl { width: min(300px, 78vw); }
  .vsl--horizontal { width: 100%; }
  .nivel__topo { grid-template-columns: 1fr; }
  .nivel__placar { grid-column: 1; grid-row: auto; text-align: left; margin-top: 16px; }
  .selecao { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
  .selecao__grade { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 14px 24px 6px; margin: 0 -24px; scrollbar-width: none; }
  .selecao__grade::-webkit-scrollbar { display: none; }
  .selecao__opcao { flex: 0 0 168px; scroll-snap-align: start; }
  .destaque { position: static; }
  .destaque__fotos { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
  .canal__lista { grid-template-columns: 1fr; }
  .frete__grade { grid-template-columns: 1fr; gap: 24px; }
  .frete__caminhao { width: 96px; height: 96px; }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  .moldura { padding: 0 18px; }
  .hud { padding: 8px 12px; }
  .hud__logo img { width: 96px; }
  .hud__logo img { width: 84px; }
  .hud__relogio { padding: 8px 10px; font-size: 12px; }
  .hero { padding: 24px 12px 90px; }
  .btn--rosa { font-size: 14px; padding: 16px 22px; }
  .vantagens { padding: 8px 0 44px; }
  .frete__caminhao { width: 88px; height: 88px; }
  .canal { box-shadow: 8px 8px 0 var(--rosa); }
  .hero__sub { margin-top: 22px; font-size: 18px; }
  .hero__oferta { font-size: 16px; }
  .btn { width: 100%; white-space: normal; text-align: center; }
  .btn__seta { width: 24px; height: 24px; }
  .onda--hero { height: 72px; }
  .vantagens__lista li { font-size: 14px; gap: 10px; }
  .vantagens__lista .px { width: 28px; height: 28px; }
  .desfile { padding-bottom: 28px; }
  .desfile__trilho img { width: 128px; height: 172px; border-radius: 12px; }
  .divisor--xadrez, .nivel::before { height: 16px; background-size: 16px 16px; }
  .bloco { padding: 64px 0; }
  .bloco .btn { margin-top: 28px; }
  .titulo { font-size: 16px; gap: 10px; }
  .titulo::before { width: 9px; height: 12px; }
  .bloco__texto { font-size: 15px; }
  .vsl { border-radius: 22px; box-shadow: 8px 8px 0 var(--roxo); }
  .vsl__play { width: 56px; height: 56px; }
  .vsl__aviso { font-size: 14px; }
  .fases { gap: 20px; margin-top: 32px; }
  .fases h3 { font-size: 16px; }
  .fases p { font-size: 14px; }
  .atalhos-barra { margin-top: 28px; padding: 10px 0; }
  .atalhos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 0 10px; }
  .atalho { min-width: 0; padding: 8px 2px; border-radius: 14px; }
  .atalho strong { font-size: 9px; }
  .atalho span { font-size: 9px; letter-spacing: .02em; white-space: nowrap; }
  .nivel { padding: 44px 0 12px; }
  .nivel::before { margin-bottom: 40px; }
  .nivel__nome { font-size: 24px; }
  .nivel__frase { font-size: 15px; }
  .nivel__placar strong { font-size: 40px; }
  .nivel__placar .selo { margin-top: 12px; font-size: 13px; }
  .selecao__grade { padding: 14px 18px 6px; margin: 0 -18px; gap: 10px; }
  .selecao__opcao { flex-basis: 158px; }
  .selecao__nome { font-size: 12px; }
  .selecao__precos s { font-size: 11px; }
  .selecao__precos strong { font-size: 12px; }
  .destaque { border-radius: 18px; }
  .destaque__info { padding: 14px; gap: 12px; }
  .destaque__nome { font-size: 16px; }
  .destaque__preco strong { font-size: 22px; }
  .destaque__link { padding: 10px 14px; font-size: 12px; }
  .nivel__proximo { margin-top: 40px; }
  .nivel__proximo p { font-size: 15px; align-items: flex-start; }
  .raios { padding: 88px 16px; }
  .raios::before, .raios::after, .fundo::before, .fundo::after { height: 16px; background-size: 32px 16px; }
  .painel { padding: 28px 20px; border-width: 3px; box-shadow: 8px 8px 0 var(--preto); }
  .continua__pisca { font-size: 13px; }
  .continua__titulo { margin-top: 20px; font-size: 18px; line-height: 1.7; }
  .continua__texto { font-size: 16px; }
  .bonus { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; }
  .bonus li { min-height: 0; grid-template-columns: 84px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 6px; align-items: center; padding: 16px 16px;
    margin-right: calc((4 - var(--n)) * 14px); }
  .bonus__pct { grid-row: 1 / 3; font-size: 36px; }
  .bonus__trava { font-size: 11px; }
  .bonus li.ativo { transform: translateX(8px); }
  .bonus li.ativo::before { display: none; }
  .calc { margin-top: 36px; }
  .trava { margin-top: 32px; }
  .canal { padding: 28px 20px; border-radius: 20px; box-shadow: 6px 6px 0 color-mix(in srgb, var(--rosa) 30%, transparent); }
  .canal__lista { margin-top: 24px; }
  .canal__lista li, .publico__lista li { align-items: flex-start; font-size: 15px; }
  .galeria, .galeria__bloco { gap: 8px; }
  .galeria { margin-top: 28px; }
  .galeria__bloco { grid-template-columns: repeat(2, 1fr); grid-template-rows: 290px 160px 160px; }
  .galeria__bloco img { border-radius: 12px; }
  .galeria__bloco img:first-child, .galeria__bloco--inv img:first-child { grid-column: 1 / 3; grid-row: 1 / 2; }
  .faq summary { font-size: 15px; padding: 18px 40px 18px 0; }
  .resposta { font-size: 15px; }
  .final__texto { font-size: 16px; }
}
@media (max-width: 370px) {
  .nivel__placar strong { font-size: 32px; }
  .continua__titulo { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .desfile__trilho, .continua__pisca, .hero__logo img, .hero__logo::after { animation: none; }
  .hero__fatia { display: none; }
  .btn, .atalho, .selecao__foto, .bonus li, .xp__barra { transition: none; }
}