/* ifGifts — home (o Conceito D que virou a página principal; protótipo em conceitos/d, só dev). Marca neon (docs/marca/README.md): noite + ciano → violeta → rosa,
   Bricolage Grotesque nos títulos, Nunito no texto. O brilho é luz: só no escuro, um por peça.
   Ousadia num lugar só: a tela do jogo de verdade com a fita em órbita do logo passando por trás e pela frente. */
/* fontes locais (css/fonts, OFL): Bricolage 800 (opsz 96) e Nunito variável, só latin.
   As reservas têm métrica ajustada para a troca não empurrar o layout. */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/bricolage-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Nunito; font-style: normal; font-weight: 200 1000; font-display: swap; src: url('fonts/nunito-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage Reserva'; src: local('Arial Black'), local('Arial Bold'), local('Arial'); size-adjust: 88%; ascent-override: 98%; descent-override: 26%; }
@font-face { font-family: 'Nunito Reserva'; src: local('Arial'), local('Helvetica'); size-adjust: 101%; ascent-override: 100%; descent-override: 35%; }
/* tudo da home vive dentro de .hm (a página) ou .dsf (a camada do desafio): nada vaza para o criador nem para o jogo */
.hm, .dsf {
  --noite: #07071a;
  --noite-2: #0e0b2e;
  --sup: #16124a;
  --txt: #eef2ff;
  --suave: #a6b1dc;
  --ciano: #2bc4ff;
  --violeta: #9b5cfa;
  --rosa: #ff4fbf;
  --ciano-cl: #8fe6ff;
  --lilas-cl: #b9a6ff;
  --rosa-cl: #ff9bdd;
  --grad: linear-gradient(90deg, #2bc4ff 0%, #5b7bfa 35%, #9b5cfa 60%, #e040fb 82%, #ff4fbf 100%);
  --display: 'Bricolage Grotesque', 'Bricolage Reserva', 'Arial Black', system-ui, sans-serif;
  --texto: Nunito, 'Nunito Reserva', ui-rounded, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sx: max(20px, env(safe-area-inset-left));
  --brilho: drop-shadow(0 0 8px rgba(155, 92, 250, .38));
}
/* a página da home: o fundo vai até a borda (o <body> é o mesmo do jogo e do criador) */
html.lp-early body, html.lp-on body { background: #07071a; overflow-x: clip; }
html.lp-early, html.lp-on { scroll-padding-top: 72px; }
:where(.hm, .dsf) *, :where(.hm, .dsf) *::before, :where(.hm, .dsf) *::after { box-sizing: border-box; }
.hm, .dsf { color: var(--txt); font: 500 17px/1.5 var(--texto); -webkit-font-smoothing: antialiased; }
.hm { background: var(--noite); }
html.dsf-on, html.dsf-on body { overflow: hidden; }
:where(.hm, .dsf) img { max-width: 100%; }
:where(.hm, .dsf) a { color: inherit; }
:where(.hm, .dsf) button { font: inherit; color: inherit; }
.hm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:where(.hm, .dsf) :focus-visible { outline: 3px solid var(--ciano-cl); outline-offset: 3px; border-radius: 10px; }
.hm-pula { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 999px; background: var(--txt); color: var(--noite); font-weight: 800; text-decoration: none; }
.hm-pula:focus { top: 12px; }
.hm-h2 { margin: 0 0 14px; font: 800 clamp(30px, 8vw, 56px)/1.02 var(--display); letter-spacing: -.03em; text-wrap: balance; }

/* ---------------- botões ---------------- */
.hm-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 24px;
  border: 0; border-radius: 999px; font: 800 17px/1.1 var(--texto); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .12s, box-shadow .2s, background-color .2s;
}
.hm-btn:active { transform: scale(.97); }
/* botão principal: gradiente neon com texto noite (5,0:1 no violeta, 9,9:1 no ciano) */
.hm-btn-p { background: var(--grad); color: var(--noite); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 8px 28px -8px rgba(155, 92, 250, .7); }
.hm-btn-p:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 10px 34px -6px rgba(155, 92, 250, .9); }
.hm-btn-g { background: rgba(22, 18, 74, .55); color: var(--txt); box-shadow: inset 0 0 0 1.5px rgba(143, 230, 255, .55); }
.hm-btn-g:hover { background: rgba(22, 18, 74, .9); box-shadow: inset 0 0 0 1.5px var(--ciano-cl), 0 0 20px rgba(43, 196, 255, .25); }
.hm-btn-s { min-height: 42px; padding: 0 18px; font-size: 15px; }
.hm-faisca { width: 18px; height: 18px; fill: var(--rosa-cl); flex: none; }

/* ---------------- atalho de quem acabou de jogar ---------------- */
.hm-atalho { position: sticky; top: 0; z-index: 40; padding: calc(8px + env(safe-area-inset-top)) var(--sx) 8px; background: var(--grad); color: var(--noite); text-align: center; }
.hm-atalho p { margin: 0; font-weight: 800; font-size: 15px; line-height: 1.3; }
.hm-atalho a { margin-left: 6px; color: var(--noite); text-decoration-thickness: 2px; text-underline-offset: 3px; white-space: nowrap; }
.hm-atalho[hidden] { display: none; }


/* ---------------- 1. herói ---------------- */
.hm-heroi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 6px var(--sx) 28px; max-width: 1280px; margin: 0 auto; }
.hm-heroi-txt { display: contents; }
.hm-heroi h1 { order: 1; margin: 0; font: 800 clamp(44px, 12.4vw, 104px)/.92 var(--display); letter-spacing: -.045em; text-wrap: balance; }
.hm-heroi-sub { order: 2; margin: -4px 0 0; max-width: 30em; color: var(--suave); font-size: clamp(16px, 4.2vw, 20px); line-height: 1.45; }
.hm-heroi-jogo { order: 3; position: relative; min-width: 0; }
.hm-heroi-ctas { order: 4; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hm-heroi-ctas .hm-btn { padding: 0 12px; }
.hm-heroi-nota { order: 5; margin: -6px 0 0; color: var(--suave); font-size: 14px; font-weight: 700; }

.hm-tela {
  position: relative; z-index: 1; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #1a1446;
  box-shadow: 0 0 0 1.5px rgba(185, 166, 255, .35), 0 24px 60px -20px rgba(155, 92, 250, .55), 0 0 0 6px rgba(7, 7, 26, .9), 0 0 0 7.5px rgba(43, 196, 255, .25);
}
.hm-tela-poster, .hm-tela-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.hm-tela-cv { opacity: 0; transition: opacity .5s; }
.hm-tela.is-on .hm-tela-cv { opacity: 1; }
.hm-tela-selo {
  position: absolute; left: 10px; top: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px;
  border-radius: 999px; background: rgba(7, 7, 26, .72); font: 800 12px/1 var(--texto); color: var(--txt); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hm-tela-selo i { width: 8px; height: 8px; border-radius: 50%; background: var(--rosa); box-shadow: 0 0 8px var(--rosa); }
.hm-tela.is-on .hm-tela-selo i { animation: pisca 1.4s ease-in-out infinite; }
@keyframes pisca { 50% { opacity: .3; } }
.hm-tela-pausa { position: absolute; right: 8px; bottom: 8px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(7, 7, 26, .65); cursor: pointer; }
.hm-tela-pausa svg { width: 16px; height: 16px; fill: none; stroke: var(--txt); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hm-tela-pausa .hm-i-play { display: none; fill: var(--txt); stroke-width: 2; }
.hm-tela-pausa[aria-pressed="true"] .hm-i-pausa { display: none; }
.hm-tela-pausa[aria-pressed="true"] .hm-i-play { display: block; }

/* a fita em órbita: metade de trás (sob a tela) e metade da frente (sobre a tela) */
.hm-tela-wrap { position: relative; }
.hm-orbita { position: absolute; left: -6%; width: 112%; top: -8%; height: 128%; overflow: visible; pointer-events: none; }
.hm-orbita-tras { z-index: 0; }
.hm-orbita-frente { z-index: 2; }
.hm-orbita path { fill: none; stroke: url(#og); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hm-orbita-tras path { stroke-width: 3; opacity: .7; }
.hm-orbita-halo { stroke-width: 12; opacity: .2; }
.hm-orbita-fio { stroke-width: 3.5; filter: drop-shadow(0 0 5px rgba(155, 92, 250, .8)); }
.hm-orbita-faisca { fill: #fff !important; stroke: none !important; filter: drop-shadow(0 0 4px #8fe6ff); }
@media (prefers-reduced-motion: no-preference) {
  .hm-orbita-fio { stroke-dasharray: 2 0; }
  .hm-tela.is-on ~ .hm-orbita-frente .hm-orbita-faisca { animation: brilha 2.4s ease-in-out infinite; transform-origin: 336px 216px; }
  @keyframes brilha { 50% { opacity: .35; transform: scale(.7); } }
}

.hm-ocasioes { position: relative; z-index: 3; margin-top: 18px; }
.hm-ocasioes-t { margin: 0 0 8px; font-weight: 800; font-size: 14px; color: var(--suave); }
.hm-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--sx)); padding: 2px var(--sx) 6px; scroll-snap-type: x proximity; }
.hm-chips::-webkit-scrollbar { display: none; }
.hm-chips button {
  flex: none; scroll-snap-align: start; height: 38px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(22, 18, 74, .75); color: var(--txt); font: 800 14px/1 var(--texto); box-shadow: inset 0 0 0 1px rgba(185, 166, 255, .25);
}
.hm-chips button[aria-checked="true"] { background: var(--txt); color: var(--noite); box-shadow: 0 0 18px -2px rgba(43, 196, 255, .6); }
.hm-chips small { display: none; }
.hm-chips [data-now] small { display: inline; }
.hm-chips small { margin-left: 6px; font-size: 11px; font-weight: 800; color: var(--rosa-cl); }
.hm-chips button[aria-checked="true"] small { color: #be185d; }

/* ---------------- 2. a caixa (rolagem curta: 150vh, palco grudado) ---------------- */
.hm-caixa { position: relative; height: 150vh; height: 150svh; }
.hm-caixa-palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: radial-gradient(120% 70% at 50% 40%, #1b1150 0%, var(--noite) 70%); }
.hm-caixa-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s; }
.hm-caixa.is-3d .hm-caixa-cv { opacity: 1; }
.hm-caixa.is-3d .hm-caixa-2d { display: none; }
.hm-caixa-txt { position: absolute; left: var(--sx); right: var(--sx); bottom: calc(28px + env(safe-area-inset-bottom)); z-index: 2; max-width: 34em; }
.hm-caixa-txt h2 { margin: 0 0 10px; font: 800 clamp(34px, 9.4vw, 72px)/.98 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.hm-caixa-txt p { margin: 0; color: var(--suave); font-size: clamp(16px, 4.2vw, 19px); }
/* reserva 2D: a caixa do logo treme (--p), clareia e o cartão sobe */
.hm-caixa-2d { --p: 0; position: absolute; inset: 0 0 32% 0; display: grid; place-items: center; }
.hm-c2-luz { position: absolute; width: 90vmin; height: 90vmin; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(143, 230, 255, .5) 30%, rgba(255, 79, 191, .25) 60%, transparent); opacity: calc(max(0, var(--p) - .55) * 2.2); transform: scale(calc(.4 + var(--p))); }
.hm-c2-caixa { position: relative; width: min(62vw, 320px); height: auto; transform: translateY(calc(var(--p) * 8%)) scale(calc(1 - max(0, var(--p) - .6) * .6)); opacity: calc(1 - max(0, var(--p) - .75) * 3); }
.hm-caixa-2d.treme .hm-c2-caixa { animation: treme2 .18s linear infinite; }
@keyframes treme2 { 25% { translate: -4px 2px; rotate: -1.5deg; } 75% { translate: 4px -2px; rotate: 1.5deg; } }
.hm-c2-cartao {
  position: absolute; display: grid; gap: 2px; padding: 18px 26px 20px; border-radius: 18px; text-align: center; background: #100c2a; width: min(78vw, 360px);
  box-shadow: 0 0 0 2px rgba(185, 166, 255, .5), 0 0 40px rgba(255, 79, 191, .35);
  opacity: calc((var(--p) - .7) * 4); transform: translateY(calc((1 - var(--p)) * 140px)) scale(calc(.7 + var(--p) * .3));
}
.hm-c2-cartao b { font: 800 clamp(40px, 12vw, 64px)/1 var(--display); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hm-c2-cartao span { font: 700 26px/1.2 Caveat, 'Bradley Hand', cursive; color: var(--txt); }

/* ---------------- 3. como funciona ---------------- */
.hm-como { padding: 72px var(--sx) 40px; max-width: 1280px; margin: 0 auto; }
.hm-passos { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 22px; }
.hm-passo { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: center; }
.hm-passo-vis { position: relative; border-radius: 16px; overflow: hidden; background: var(--sup); box-shadow: 0 0 0 1px rgba(185, 166, 255, .25); }
.hm-vis-criador { aspect-ratio: 3 / 4; }
.hm-vis-criador img { display: block; width: 100%; height: auto; margin-top: -8%; }
.hm-vis-link { aspect-ratio: 3 / 4; display: grid; place-items: center; padding: 10px; background: #0b141a; }
.hm-zap { width: 100%; padding: 5px; border-radius: 10px 10px 10px 2px; background: #005c4b; }
.hm-zap img { display: block; width: 100%; height: auto; border-radius: 6px; }
.hm-passo .hm-zap-url { margin: 4px 2px 0; font-size: 10px; line-height: 1.2; font-weight: 700; color: #b9f5e8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-vis-jogo { aspect-ratio: 3 / 4; }
.hm-vis-jogo canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hm-passo-n { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-bottom: 6px; border-radius: 50%; background: var(--grad); color: var(--noite); font: 800 15px/1 var(--display); }
.hm-passo h3 { margin: 0 0 4px; font: 800 24px/1.1 var(--display); letter-spacing: -.02em; }
.hm-passo p { margin: 0; color: var(--suave); font-size: 16px; line-height: 1.45; }

/* ---------------- 4. empresas ---------------- */
.hm-empresas { padding: 48px var(--sx); }
.hm-emp-in {
  max-width: 1280px; margin: 0 auto; padding: 30px 22px 26px; border-radius: 26px;
  background: linear-gradient(160deg, #18134d 0%, #0e0b2e 70%); box-shadow: inset 0 0 0 1px rgba(185, 166, 255, .25);
}
.hm-emp-lead { margin: 0 0 18px; color: var(--suave); max-width: 36em; }
.hm-emp-lista { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; }
.hm-emp-lista li { position: relative; padding-left: 26px; color: var(--suave); line-height: 1.45; }
.hm-emp-lista li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 14px; height: 14px; background: var(--ciano-cl); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.hm-emp-lista b { color: var(--txt); }

/* ---------------- 5. preço + perguntas ---------------- */
.hm-preco { display: grid; gap: 36px; padding: 32px var(--sx) 40px; max-width: 1280px; margin: 0 auto; }
.hm-preco-h { margin: 0 0 8px; font: 800 clamp(28px, 7.4vw, 44px)/1.05 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.hm-preco-n { font-size: 1.9em; line-height: .8; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; vertical-align: -.08em; }
.hm-preco-p { margin: 0 0 16px; color: var(--suave); }
.hm-preco-link { font-weight: 800; color: var(--ciano-cl); text-underline-offset: 4px; }
.hm-faq-h { font-size: clamp(26px, 7vw, 40px); }
.hm-faq details { border-bottom: 1px solid rgba(185, 166, 255, .2); }
.hm-faq summary { list-style: none; cursor: pointer; padding: 16px 34px 16px 0; position: relative; font-weight: 800; font-size: 17px; }
.hm-faq summary::-webkit-details-marker { display: none; }
.hm-faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 2.5px solid var(--ciano-cl); border-bottom: 2.5px solid var(--ciano-cl); transform: rotate(45deg); transition: transform .2s; }
.hm-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.hm-faq details p { margin: 0 0 16px; color: var(--suave); }

/* ---------------- 6. fim ---------------- */
.hm-fim { position: relative; padding: 40px var(--sx) 64px; text-align: center; display: grid; justify-items: center; gap: 18px; overflow: hidden; }
.hm-fim::before { content: ""; position: absolute; left: 50%; top: 10px; width: 520px; height: 260px; margin-left: -260px; border-radius: 50%; border: 2px solid transparent; border-top-color: rgba(43, 196, 255, .35); border-right-color: rgba(255, 79, 191, .35); transform: rotate(-12deg); pointer-events: none; }
.hm-fim-marca { width: 120px; height: 120px; }
.hm-fim h2 { margin: 0; max-width: 14em; font: 800 clamp(32px, 8.6vw, 64px)/1 var(--display); letter-spacing: -.035em; text-wrap: balance; }


/* ---------------- peças da home integradas ao app (cabeçalho, criador, empresas, manifesto, rodapé) ---------------- */
/* cabeçalho compartilhado (.lp-nav do css/landing.css) dentro da home */
.hm .lp-nav { position: relative; z-index: 30; }
/* altura fixa de linha: a troca da fonte não mexe na altura do cabeçalho (CLS) */
.hm .lang-sel button { line-height: 16px; }
.hm .lp-nav .account { line-height: 18px; }
.hm-caixa-extra { margin: 10px 0 0 !important; font-size: 15px !important; font-weight: 700; color: var(--ciano-cl) !important; }
.hm-emp-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.hm-emp-link { font-weight: 800; color: var(--ciano-cl); text-underline-offset: 4px; }
.hm-emp-link[hidden] { display: none; }
.hm-emp-contato { margin: 18px 0 0; border-top-color: rgba(185, 166, 255, .2); color: var(--suave); }
.hm-preco-card .hm-preco-p { margin-bottom: 12px; }

/* manifesto: tipografia com peso, o resto em silêncio */
.hm-manifesto { max-width: 1280px; margin: 0 auto; padding: 72px var(--sx) 40px; }
.hm-manifesto h2 { margin: 0 0 22px; max-width: 15em; font: 800 clamp(34px, 9vw, 84px)/.98 var(--display); letter-spacing: -.04em; text-wrap: balance; }
.hm-manifesto p { margin: 0; max-width: 30em; font-size: clamp(18px, 4.6vw, 24px); line-height: 1.45; color: var(--suave); text-wrap: pretty; }

/* fim: a chamada do criador (js/criador.js pinta #wzLaunch) + a missão */
.hm-fim.lp-make { padding: 40px var(--sx) 56px; }
.hm-fim .wz-launch { width: 100%; max-width: 560px; }
.hm-missao { position: relative; margin: 8px 0 0; max-width: 26em; color: var(--suave); font-size: 15px; font-weight: 700; text-wrap: balance; }

/* rodapé compartilhado (.lp-foot) com a linha da missão e o Instagram */
.hm .lp-foot { background: transparent; border-top: 1px solid rgba(185, 166, 255, .15); }

/* ---------------- desktop ---------------- */
@media (min-width: 900px) {
  .hm-heroi { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: '. jogo' 'txt jogo' 'ctas jogo' 'nota jogo' '. jogo'; grid-template-rows: 1fr auto auto auto 1fr; column-gap: 56px; row-gap: 22px; padding: 36px max(40px, 4vw) 72px; min-height: calc(100vh - 90px); }
  .hm-heroi-txt { grid-area: txt; display: grid; gap: 22px; }
  /* as fichas ficam penduradas embaixo da tela: a troca de fonte nas fichas não mexe na posição do jogo (CLS) */
  .hm-heroi-jogo { grid-area: jogo; align-self: center; }
  .hm-ocasioes { position: absolute; left: 0; right: 0; top: 100%; }
  .hm-heroi { padding-bottom: 150px; }
  /* a conta chega pelo JS: o lugar dela (deslogado) já fica reservado no cabeçalho */
  .hm .lp-nav .account[hidden] { display: flex !important; visibility: hidden; width: 254px; height: 36px; }
  .hm-heroi-ctas { grid-area: ctas; }
  .hm-heroi-nota { grid-area: nota; }
  .hm-heroi h1 { font-size: clamp(56px, 5.8vw, 100px); }
  .hm-heroi-ctas { display: flex; flex-wrap: wrap; }
  .hm-heroi-ctas .hm-btn { padding: 0 26px; min-height: 58px; font-size: 18px; }
  .hm-heroi-nota { margin: 0; }
  .hm-chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0; }
  .hm-caixa-txt { left: max(40px, 6vw); right: auto; top: 50%; bottom: auto; transform: translateY(-50%); max-width: 30em; }
  .hm-caixa-2d { inset: 0 0 0 40%; }
  .hm-como { padding: 110px max(40px, 4vw) 60px; }
  .hm-passos { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .hm-passo { grid-template-columns: 1fr; align-items: start; }
  .hm-passo-vis { aspect-ratio: 4 / 3 !important; }
  .hm-vis-criador img { width: 52%; margin: 4% auto 0; border-radius: 10px; }
  .hm-vis-link { padding: 22px 40px; }
  .hm-empresas { padding: 60px max(40px, 4vw); }
  .hm-emp-in { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; padding: 48px 52px; }
  .hm-emp-in .hm-h2, .hm-emp-lead { grid-column: 1; }
  .hm-emp-lista { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .hm-emp-ctas, .hm-emp-contato { grid-column: 1; }
  .hm-preco { grid-template-columns: 5fr 7fr; gap: 72px; padding: 60px max(40px, 4vw) 80px; }
}

/* =============================== desafio (camada do mini-game, conceitos/d/desafio.js) =============================== */
.dsf { position: fixed; inset: 0; z-index: 100; background: var(--noite); color: var(--txt); overscroll-behavior: contain; }
.dsf[hidden] { display: none; }
.dsf.entra { animation: dsfEntra .35s cubic-bezier(.2, 1, .3, 1); }
@keyframes dsfEntra { from { opacity: 0; transform: scale(1.04); } }
.dsf-palco { position: absolute; inset: 0; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer; }
.dsf-palco[hidden] { display: none; }
.dsf-palco:focus { outline: none; }
.dsf-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dsf-topo { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: calc(12px + env(safe-area-inset-top)) var(--sx) 0; pointer-events: none; }
.dsf-topo > * { pointer-events: auto; }
.dsf-topo-d { display: flex; gap: 8px; }
.dsf-est { display: inline-flex; align-items: center; gap: 6px; font: 800 20px/1 var(--display); }
.dsf-est i { width: 18px; height: 18px; background: var(--txt); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.dsf-ic { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(7, 7, 26, .6); box-shadow: inset 0 0 0 1.5px rgba(143, 230, 255, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dsf-ic svg { width: 20px; height: 20px; fill: none; stroke: var(--txt); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dsf-som .dsf-som-cx { fill: var(--txt); stroke-width: 2; }
.dsf-som .dsf-som-off { display: none; }
.dsf-som[aria-pressed="false"] .dsf-som-on { display: none; }
.dsf-som[aria-pressed="false"] .dsf-som-off { display: block; }
.dsf-pavio { position: absolute; left: var(--sx); right: var(--sx); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 2; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.dsf-trilho { flex: 1; height: 8px; border-radius: 999px; background: rgba(246, 244, 255, .12); overflow: hidden; }
.dsf-fogo { height: 100%; width: 0; border-radius: 999px; background: var(--grad); }
.dsf-pavio img { width: 34px; height: 34px; }
.dsf-derrota { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 24px var(--sx); background: rgba(7, 7, 26, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dsf-derrota[hidden] { display: none; }
.dsf-derrota-in { width: min(440px, 100%); padding: 28px 24px 22px; border-radius: 26px; text-align: center; background: var(--noite-2); box-shadow: inset 0 0 0 1.5px rgba(255, 79, 191, .7), 0 0 40px rgba(255, 79, 191, .3); transform: rotate(-1.5deg); animation: cai .42s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes cai { from { transform: translateY(-40px) rotate(-8deg) scale(.8); opacity: 0; } }
.dsf-dt { margin: 0 0 8px; font: 800 clamp(28px, 8vw, 40px)/1.02 var(--display); letter-spacing: -.02em; color: var(--rosa-cl); text-wrap: balance; }
.dsf-ds { margin: 0 0 20px; font-weight: 700; font-size: 18px; text-wrap: balance; }
.dsf-leve { margin: 14px 0 0; font-size: 14px; font-weight: 700; color: var(--suave); }
/* embrulho */
.dsf-emb { position: absolute; inset: 0; z-index: 5; overflow: hidden; touch-action: manipulation; background: var(--noite); }
.dsf-emb[hidden] { display: none; }
.dsf-emb.abre { background: transparent; transition: background .3s; }
.dsf-papel {
  position: absolute; inset: -4%; background-color: #150d3d; will-change: transform;
  background-image: radial-gradient(circle at 20% 30%, rgba(43, 196, 255, .9) 0 1.4px, transparent 2.5px), radial-gradient(circle at 70% 80%, rgba(255, 79, 191, .9) 0 1.4px, transparent 2.5px), radial-gradient(120% 90% at 30% 20%, rgba(155, 92, 250, .45), transparent 60%), linear-gradient(135deg, #1a1050, #0b0726 60%, #22104f);
  background-size: 46px 46px, 64px 64px, auto, auto;
}
.dsf-papel-a { clip-path: polygon(0 0, 100% 0, 100% 8%, 92% 14%, 88% 22%, 79% 27%, 74% 36%, 65% 41%, 60% 50%, 52% 54%, 45% 62%, 37% 66%, 31% 75%, 22% 80%, 17% 88%, 8% 93%, 0 100%); }
.dsf-papel-b { clip-path: polygon(100% 8%, 92% 14%, 88% 22%, 79% 27%, 74% 36%, 65% 41%, 60% 50%, 52% 54%, 45% 62%, 37% 66%, 31% 75%, 22% 80%, 17% 88%, 8% 93%, 0 100%, 100% 100%); }
.dsf-fita-v, .dsf-fita-h { position: absolute; opacity: .9; }
.dsf-fita-v { left: 50%; top: 0; bottom: 0; width: 60px; margin-left: -30px; background: linear-gradient(180deg, rgba(43, 196, 255, .75), rgba(155, 92, 250, .75), rgba(255, 79, 191, .75)); box-shadow: 0 0 26px rgba(43, 196, 255, .6), inset 6px 0 0 rgba(255, 255, 255, .35); }
.dsf-fita-h { top: 50%; left: 0; right: 0; height: 60px; margin-top: -30px; background: linear-gradient(90deg, rgba(43, 196, 255, .75), rgba(155, 92, 250, .75), rgba(255, 79, 191, .75)); box-shadow: 0 0 26px rgba(255, 79, 191, .6), inset 0 6px 0 rgba(255, 255, 255, .35); }
.dsf-laco { position: absolute; left: 50%; top: 50%; width: min(300px, 72vw); transform: translate(-50%, -66%); z-index: 2; filter: drop-shadow(0 0 14px rgba(255, 79, 191, .7)); }
.dsf-laco svg { display: block; width: 100%; overflow: visible; }
.dsf-laco path, .dsf-laco circle { fill: url(#dsfLg); fill-opacity: .38; stroke: url(#dsfLg); stroke-width: 9; stroke-linejoin: round; stroke-linecap: round; }
.dsf-laco circle { fill: var(--txt); fill-opacity: 1; }
.dsf-etiqueta { position: absolute; z-index: 3; left: calc(50% + min(96px, 21vw)); top: calc(50% + 34px); background: var(--txt); color: var(--noite); border-radius: 8px 22px 22px 8px; padding: 9px 18px 9px 28px; font: 800 20px/1 var(--display); transform: rotate(12deg); transform-origin: 0 50%; box-shadow: 0 0 24px rgba(43, 196, 255, .5); }
.dsf-etiqueta span { font: 700 13px/1 var(--texto); display: block; margin-bottom: 4px; }
.dsf-etiqueta::before { content: ""; position: absolute; left: 10px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-radius: 50%; background: var(--noite); }
.dsf-racha { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.dsf-racha path { opacity: 0; fill: none; stroke: #fff; stroke-width: 5px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px var(--ciano)) drop-shadow(0 0 26px var(--rosa)); transition: opacity .12s; }
.dsf-emb[data-n="1"] .dsf-r1, .dsf-emb[data-n="2"] .dsf-r1, .dsf-emb[data-n="2"] .dsf-r2, .dsf-emb[data-n="3"] path { opacity: 1; }
.dsf-tap { position: absolute; inset: 0; z-index: 5; background: none; border: 0; cursor: pointer; }
.dsf-dica { position: absolute; left: 0; right: 0; bottom: calc(30px + env(safe-area-inset-bottom)); z-index: 6; text-align: center; pointer-events: none; }
.dsf-dica p { display: inline-block; margin: 0 0 14px; padding: 11px 20px; border-radius: 999px; background: rgba(7, 7, 26, .8); font: 800 18px/1.2 var(--texto); box-shadow: inset 0 0 0 1.5px rgba(143, 230, 255, .7); }
.dsf-pips { display: flex; justify-content: center; gap: 12px; }
.dsf-pips i { width: 14px; height: 14px; border-radius: 50%; background: rgba(246, 244, 255, .2); transition: transform .2s, background .2s; }
.dsf-pips i.on { background: var(--txt); transform: scale(1.3); box-shadow: 0 0 12px var(--ciano), 0 0 22px var(--rosa); }
.dsf-clarao { position: absolute; inset: 0; z-index: 7; background: radial-gradient(circle at 50% 50%, #fff, #c9f4ff 30%, rgba(255, 79, 191, .6) 70%); opacity: 0; pointer-events: none; }
.dsf-emb.chega .dsf-papel-a { animation: entraA .55s cubic-bezier(.2, 1.2, .4, 1) both; }
.dsf-emb.chega .dsf-papel-b { animation: entraB .55s cubic-bezier(.2, 1.2, .4, 1) .06s both; }
.dsf-emb.chega .dsf-laco { animation: laco .6s cubic-bezier(.2, 1.7, .4, 1) .45s both; }
.dsf-emb.chega .dsf-etiqueta { animation: tag 1.2s cubic-bezier(.2, 1.4, .4, 1) .7s both; }
.dsf-emb.chega .dsf-dica { animation: dica .4s ease-out 1s both; }
@keyframes entraA { from { transform: translate(-105%, -20%) rotate(-10deg); } }
@keyframes entraB { from { transform: translate(105%, 20%) rotate(10deg); } }
@keyframes laco { from { transform: translate(-50%, -66%) scale(0) rotate(-30deg); } }
@keyframes tag { 0% { transform: rotate(80deg); opacity: 0; } 40% { opacity: 1; } 100% { transform: rotate(12deg); } }
@keyframes dica { from { transform: translateY(30px); opacity: 0; } }
.dsf-emb.treme { animation: treme .32s linear; }
@keyframes treme { 10% { transform: translate(-9px, 3px) rotate(-1deg); } 25% { transform: translate(8px, -4px) rotate(1deg); } 40% { transform: translate(-6px, 2px); } 60% { transform: translate(5px, -2px) rotate(.5deg); } 80% { transform: translate(-2px, 1px); } }
.dsf-emb.abre .dsf-papel-a { transition: transform .9s cubic-bezier(.3, 0, .2, 1); transform: translate(-80%, -90%) rotate(-28deg); }
.dsf-emb.abre .dsf-papel-b { transition: transform .9s cubic-bezier(.3, 0, .2, 1); transform: translate(80%, 90%) rotate(24deg); }
.dsf-emb.abre .dsf-laco { transition: transform .9s cubic-bezier(.3, -.4, .3, 1), opacity .9s; transform: translate(-50%, -260%) rotate(220deg) scale(.6); opacity: 0; }
.dsf-emb.abre .dsf-etiqueta { transition: transform 1s, opacity .6s; transform: translate(60vw, -40vh) rotate(160deg); opacity: 0; }
.dsf-emb.abre .dsf-dica, .dsf-emb.abre .dsf-racha { opacity: 0; transition: opacity .2s; }
.dsf-emb.abre .dsf-clarao { animation: clarao .8s ease-out; }
@keyframes clarao { 0% { opacity: 0; } 12% { opacity: .95; } 100% { opacity: 0; } }
/* o que tinha dentro */
.dsf-fim { position: absolute; inset: 0; z-index: 4; overflow-y: auto; display: grid; align-content: center; justify-items: start; padding: calc(70px + env(safe-area-inset-top)) var(--sx) calc(40px + env(safe-area-inset-bottom)); background: radial-gradient(90% 60% at 80% 10%, rgba(155, 92, 250, .35), transparent 70%), var(--noite); }
.dsf-fim[hidden] { display: none; }
.dsf-fim:focus { outline: none; }
.dsf-fim > * { max-width: 640px; }
.dsf-fim-arte { position: absolute; right: -40px; top: 40px; width: min(300px, 64vw); height: auto; opacity: .5; pointer-events: none; }
.dsf-carimbo { position: relative; margin: 0 0 6px; font: 800 clamp(56px, 17vw, 132px)/1 var(--display); letter-spacing: -.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: var(--brilho); transform: rotate(-6deg); transform-origin: 20% 60%; }
.dsf-fim.revela .dsf-carimbo { animation: carimbo .6s cubic-bezier(.2, 1.8, .35, 1) .15s both; }
@keyframes carimbo { from { transform: rotate(-24deg) scale(3); opacity: 0; } 60% { opacity: 1; } }
.dsf-fim-h { position: relative; margin: 0 0 6px; font: 800 clamp(34px, 9vw, 64px)/1 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.dsf-fim-stats { position: relative; margin: 0 0 14px; font-weight: 800; color: var(--ciano-cl); }
.dsf-fim-p { position: relative; margin: 0 0 24px; color: var(--suave); font-size: 18px; }
.dsf-fim-ctas { position: relative; display: flex; flex-wrap: wrap; gap: 12px; }
.dsf-fim-nota { position: relative; margin: 16px 0 0; color: var(--suave); font-size: 15px; font-weight: 700; }
.dsf-conf { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 8; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .hm *, .hm *::before, .hm *::after, .dsf *, .dsf *::before, .dsf *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hm-caixa { height: auto; }
  .hm-caixa-palco { position: relative; height: 100svh; }
  .dsf-emb.abre .dsf-papel-a, .dsf-emb.abre .dsf-papel-b, .dsf-emb.abre .dsf-laco, .dsf-emb.abre .dsf-etiqueta { opacity: 0; transform: none; }
}