/* ==========================================================================
   Home do Halloween no formato da KaySto (23/10/2026, pedido do dono), no tema zumbi verde.
   Banner do evento com recorte embaixo (notch) + PARTICIPE DO EVENTO no recorte, combo com o recorte espelhado,
   as 3 capas com a seta (PC e celular), faixa de vantagens, carrossel dos jogos e avaliações. Botões com cantos mais retos
   (raio ~10px), pedido do dono. Medidas do banner e do combo em "u"/"fu" = 1px do quadro de 1370 de largura
   (436/495 no celular), pelas container queries.
   ========================================================================== */
.hh { --eo: cubic-bezier(0.23, 1, 0.32, 1); --mola: cubic-bezier(0.34, 1.56, 0.64, 1);
  --verde-0: #070d04; --verde-1: #0c1705; --verde-2: #1d3208; --verde-3: #4f7a0f; --verde-4: #78b01b; }
.hh-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hh img { max-width: none; }

/* o recorte: um tile com o buraco (SVG) no meio e três retângulos lisos em volta; muda a largura sem deformar */
.hb, .hb-cta { --nu: max(100cqw / 1370, .925px); }
/* recorte (24/10, como o anexo da KaySto): o buraco é o contorno da pílula do PARTICIPE DO EVENTO afastado 9, com
   filetes de raio 12 onde encontra a borda (raio do buraco = altura/2 + 9; fundo = raio - vão/2). PC: botão 260x54,
   celular: 230x50, vão de 24 entre o banner e o combo. */
.hb { --npw: 300; --nph: 24; --gap: 24;
  --np: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H300V24H0Z M5.43 24A12 12 0 0 0 15.82 18A36 36 0 0 1 47 0H253A36 36 0 0 1 284.18 18A12 12 0 0 0 294.57 24Z'/%3E%3C/svg%3E"); }
.kc-shape { --pw: 300; --th: 24; --bh: 11;
  --tp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H300V24H0Z M5.43 0A12 12 0 0 1 15.82 6A36 36 0 0 0 47 24H253A36 36 0 0 0 284.18 6A12 12 0 0 1 294.57 0Z'/%3E%3C/svg%3E");
  --bp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 11' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H300V11H0Z M120.77 11A8 8 0 0 0 128.02 6.37A11 11 0 0 1 138 0H162A11 11 0 0 1 171.98 6.37A8 8 0 0 0 179.23 11Z'/%3E%3C/svg%3E"); }

/* ------------------------------------------------------------ banner do evento */
.hb-wrap { container: hb / inline-size; position: relative; z-index: 2; margin-top: calc(var(--uk-header-h) + 10px); }
@media (max-width: 1023px) { .hb-wrap { margin-top: 0; } }
.hb { --u: calc(100cqw / 1370); position: relative; display: block; height: calc(150 * var(--u)); border-radius: calc(26 * var(--u));
  overflow: hidden; isolation: isolate; color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent; user-select: none;
  background: radial-gradient(42% 130% at 50% 0, #9dd425, #3f6a0c 45%, transparent 78%), linear-gradient(#1d3208, #070d04);
  margin-bottom: calc(var(--gap) * var(--nu));
  -webkit-mask: var(--np) 50% 100% / calc(var(--npw) * var(--nu)) calc(var(--nph) * var(--nu)) no-repeat,
    linear-gradient(#000 0 0) 0 0 / calc(50% - var(--npw) * var(--nu) / 2 + 1px) 100% no-repeat,
    linear-gradient(#000 0 0) 100% 0 / calc(50% - var(--npw) * var(--nu) / 2 + 1px) 100% no-repeat,
    linear-gradient(#000 0 0) 50% 0 / calc(var(--npw) * var(--nu)) calc(100% - var(--nph) * var(--nu) + 1px) no-repeat;
  mask: var(--np) 50% 100% / calc(var(--npw) * var(--nu)) calc(var(--nph) * var(--nu)) no-repeat,
    linear-gradient(#000 0 0) 0 0 / calc(50% - var(--npw) * var(--nu) / 2 + 1px) 100% no-repeat,
    linear-gradient(#000 0 0) 100% 0 / calc(50% - var(--npw) * var(--nu) / 2 + 1px) 100% no-repeat,
    linear-gradient(#000 0 0) 50% 0 / calc(var(--npw) * var(--nu)) calc(100% - var(--nph) * var(--nu) + 1px) no-repeat; }
.hb-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; pointer-events: none; }
.hb::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 9, 3, .45), transparent 26%, transparent 70%, rgba(5, 9, 3, .4)); }
.hb-stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hb-it { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u));
  height: calc(var(--h, 0) * var(--u)); }
.hb-it:not(.hb-glow):not(.hb-btn) { height: auto; }
.hb-fl { position: relative; transform-origin: var(--to, 50% 50%); rotate: var(--r, 0deg); }
.hb-fl img { display: block; width: 100%; height: auto; filter: drop-shadow(0 calc(8 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, .55)); }
.hb-glow { border-radius: 50%; mix-blend-mode: screen; opacity: .8;
  background: radial-gradient(closest-side, rgba(157, 212, 37, .55), rgba(157, 212, 37, .2) 50%, transparent); }
.hb-head b { display: block; font: 900 calc(23 * var(--u)) / 1.05 Montserrat, sans-serif; letter-spacing: -.02em; white-space: nowrap;
  background: linear-gradient(90deg, #fff 62%, #c6f25a); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .85)); }
.hb-fg img { filter: blur(calc(5 * var(--u))) drop-shadow(0 10px 20px rgba(0, 0, 0, .5)); opacity: .9; }
.hb-btn .hb-fl { height: calc(var(--h) * var(--u)); display: grid; place-items: center; overflow: hidden;
  border-radius: calc(10 * var(--u)); border: calc(1 * var(--u)) solid #4f7a0f;
  background: radial-gradient(103% 103% at 50% 0, #c6f25a 25%, #9dd425 46%, #6ea218 70%, #3f6a0c);
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .35); transition: scale .35s cubic-bezier(.2, .8, .2, 1); }
.hb-btn b { font: 900 calc(15.5 * var(--u)) / 1 Montserrat, sans-serif; letter-spacing: -.02em; color: #0b1205; white-space: nowrap; }
.hb-btn::before { content: ''; position: absolute; inset: 0; border-radius: calc(10 * var(--u)); opacity: 0;
  box-shadow: 0 0 calc(24 * var(--u)) calc(2 * var(--u)) rgba(157, 212, 37, .65); }
.hb-btn .hb-fl::after, .hb-cta::after, .kc-off::after, .kc-cta::after, .kg-btn::after {
  content: ''; position: absolute; top: -30%; bottom: -30%; left: 0; width: 28%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(244, 255, 214, .5), transparent); transform: translateX(-160%) skewX(-18deg);
  animation: hh-brilho 4.2s cubic-bezier(.45, 0, .2, 1) 1.2s infinite; }
.hb-spot { position: absolute; left: 0; top: 0; z-index: 2; width: calc(440 * var(--u)); height: calc(440 * var(--u));
  margin: calc(-220 * var(--u)) 0 0 calc(-220 * var(--u)); border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(198, 242, 90, .32), rgba(157, 212, 37, .12) 45%, transparent);
  mix-blend-mode: screen; transition: opacity .5s, transform .35s cubic-bezier(.22, .61, .36, 1); will-change: transform; }
.hb.is-hot .hb-spot { opacity: 1; }
.hb .cel { display: none; }

/* entrada: cada peça entra do seu jeito, em cascata; depois boia, balança ou respira */
.hb.is-armed:not(.is-in) .hb-it, .hb.is-armed:not(.is-in) .hb-bg { opacity: 0; }
.hb.is-in .hb-bg { animation: hh-fade .8s ease-out both; }
.hb.is-in .hb-it { animation: var(--in, hh-fade) var(--ind, .8s) cubic-bezier(.2, .8, .2, 1) var(--indl, 0s) both; }
.hb.is-in .hb-bob > .hb-fl { animation: hh-bob var(--bd, 5s) ease-in-out var(--bdl, 0s) infinite; }
.hb.is-in .hb-breathe > .hb-fl { animation: hh-respira var(--bd, 3.6s) ease-in-out var(--bdl, 0s) infinite; }
.hb.is-in .hb-glow { animation: hh-fade 1s ease .35s both, hh-pisca var(--bd, 3.4s) ease-in-out var(--bdl, 0s) infinite; }
.hb.is-in .hb-btn::before { animation: hh-pulso 2.8s ease-in-out 1.4s infinite; }
/* fora da tela as voltas param (o JS põe .is-off); antes do JS chegar, tudo roda normal */
.hb.is-off *, .hb.is-off *::before, .hb.is-off *::after { animation-play-state: paused !important; }
/* sem JS nenhum, o banner aparece sozinho depois de 3 s */
.hb.is-armed:not(.is-in) .hb-it, .hb.is-armed:not(.is-in) .hb-bg { animation: hh-aparece .4s ease 3s forwards; }
@keyframes hh-aparece { to { opacity: 1; } }
@media (hover: hover) and (pointer: fine) { .hb-it { transition: translate .7s cubic-bezier(.22, .61, .36, 1); } }
@media (hover: hover) {
  .hb-char > .hb-fl, .hb-girl > .hb-fl, .hb-let > .hb-fl { transition: scale .7s cubic-bezier(.2, .8, .2, 1), rotate .7s cubic-bezier(.2, .8, .2, 1); }
  .hb:hover .hb-char > .hb-fl { scale: 1.06; rotate: -3deg; }
  .hb:hover .hb-girl > .hb-fl { scale: 1.06; rotate: 3deg; }
  .hb:hover .hb-let > .hb-fl { scale: 1.05; }
  .hb:hover .hb-btn .hb-fl { scale: 1.06; }
  .hb:active .hb-btn .hb-fl { scale: .97; transition-duration: .12s; }
}

/* PARTICIPE DO EVENTO: mora no recorte, com o centro no meio do vão entre o banner e o combo (os dois recortes têm
   30 de fundo e o vão é --gap, então sobra a mesma folga em cima e embaixo). Pílula, como no anexo da KaySto. */
.hb-cta { --cw: 260; --ch: 54; --gap: 24; position: absolute; left: 50%; z-index: 3; bottom: calc((var(--gap) / 2 - var(--ch) / 2) * var(--nu));
  width: calc(var(--cw) * var(--nu)); height: calc(var(--ch) * var(--nu)); translate: -50% 0; display: grid; place-items: center; overflow: hidden;
  border-radius: calc(var(--ch) / 2 * var(--nu)); border: calc(1.2 * var(--nu)) solid #6ea218; color: #fff; text-decoration: none;
  background: radial-gradient(105% 105% at 50% 0, #9dd425, #5f8f14 25%, #34540c 50%, #1f330a 70%, #0e1707);
  box-shadow: 0 calc(12 * var(--nu)) calc(26 * var(--nu)) rgba(0, 0, 0, .45), inset 0 1px 0 rgba(220, 255, 170, .25);
  transition: scale .35s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; animation: hh-cta-in .55s var(--eo) .32s both; }
.hb-cta b { position: relative; font: 900 calc(19 * var(--nu)) / 1 Montserrat, sans-serif; letter-spacing: -.01em; white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.hb-cta::after { animation-delay: 1.6s; }
@media (hover: hover) { .hb-cta:hover { scale: 1.04; box-shadow: 0 16px 34px rgba(0, 0, 0, .5), 0 0 26px rgba(157, 212, 37, .45); }
  .hb-cta:active { scale: .97; transition-duration: .12s; } }
.hb-cta:focus-visible, .hb:focus-visible, .kc-cta:focus-visible, .kg:focus-visible { outline: 2px solid #c6f25a; outline-offset: 3px; }

@container hb (max-width: 679px) {
  .hb, .hb-cta { --nu: calc(100cqw / 495); }
  .hb { --u: calc(100cqw / 436); height: calc(200 * var(--u)); border-radius: calc(20 * var(--u)); --npw: 269; --nph: 22;
    --np: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 269 22' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H269V22H0Z M5.26 22A12 12 0 0 0 15.49 16.26A34 34 0 0 1 44.5 0H224.5A34 34 0 0 1 253.51 16.26A12 12 0 0 0 263.74 22Z'/%3E%3C/svg%3E"); }
  .hb-it { left: calc(var(--mx, var(--x)) * var(--u)); top: calc(var(--my, var(--y)) * var(--u)); width: calc(var(--mw, var(--w)) * var(--u));
    height: calc(var(--mh, var(--h, 0)) * var(--u)); }
  .hb .pc { display: none; }
  .hb .cel { display: block; }
  .hb-head.cel b { font-size: calc(12.5 * var(--u)); text-align: center; white-space: normal; line-height: 1.15; }
  .hb-cta { --cw: 230; --ch: 50; }
  .hb-cta b { font-size: calc(17 * var(--nu)); }
}

/* ------------------------------------------------------------------- combo */
.kc-host { container: kc / inline-size; display: flex; flex-direction: column; }
.kc { --fu: clamp(.62px, 100cqw / 1370, 1px); --nu: max(100cqw / 1370, .925px); position: relative; isolation: isolate; display: grid;
  grid-template-columns: minmax(0, 1fr); align-items: start; min-height: calc(500 * var(--fu));
  padding: calc(84 * var(--fu)) calc(116 * var(--fu)) calc(70 * var(--fu)) calc(130 * var(--fu)); color: #fff; }
.kc-shape { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: calc(25 * var(--fu)); background: #0b1605;
  -webkit-mask: var(--tp) 50% 0 / calc(var(--pw) * var(--nu)) calc(var(--th) * var(--nu)) no-repeat,
    var(--bp) 50% 100% / calc(var(--pw) * var(--nu)) calc(var(--bh) * var(--nu)) no-repeat,
    linear-gradient(#000 0 0) 0 0 / calc(50% - var(--pw) * var(--nu) / 2 + 1px) 100% no-repeat,
    linear-gradient(#000 0 0) 100% 0 / calc(50% - var(--pw) * var(--nu) / 2 + 1px) 100% no-repeat,
    linear-gradient(#000 0 0) 50% calc(var(--th) * var(--nu) - 1px) / calc(var(--pw) * var(--nu)) calc(100% - (var(--th) + var(--bh)) * var(--nu) + 2px) no-repeat;
  mask: var(--tp) 50% 0 / calc(var(--pw) * var(--nu)) calc(var(--th) * var(--nu)) no-repeat,
    var(--bp) 50% 100% / calc(var(--pw) * var(--nu)) calc(var(--bh) * var(--nu)) no-repeat,
    linear-gradient(#000 0 0) 0 0 / calc(50% - var(--pw) * var(--nu) / 2 + 1px) 100% no-repeat,
    linear-gradient(#000 0 0) 100% 0 / calc(50% - var(--pw) * var(--nu) / 2 + 1px) 100% no-repeat,
    linear-gradient(#000 0 0) 50% calc(var(--th) * var(--nu) - 1px) / calc(var(--pw) * var(--nu)) calc(100% - (var(--th) + var(--bh)) * var(--nu) + 2px) no-repeat; }
.kc-shape::after { content: ''; position: absolute; inset: 0; background: radial-gradient(87% 108% at 50% 6.5%, rgba(157, 212, 37, 0) 55%, #6ea218); opacity: .9; }
.kc-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: overlay; opacity: .9;
  transform: scale(1.05); transition: transform .9s var(--eo); }
.kc-spot { position: absolute; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(198, 242, 90, .24), rgba(157, 212, 37, .09) 45%, transparent); mix-blend-mode: screen; opacity: 0;
  transition: opacity .5s ease, transform .35s var(--eo); }
.kc.is-hot .kc-spot { opacity: 1; }
.kc-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.kc-content > * { animation: hh-sobe .6s var(--eo) both; animation-delay: calc(.12s + var(--i, 0) * 70ms); }
.kc-badge { display: inline-flex; align-items: center; gap: calc(8 * var(--fu)); height: calc(34 * var(--fu)); padding: 0 calc(16 * var(--fu)) 0 calc(6 * var(--fu));
  border: calc(1.2 * var(--fu)) solid #9dd425; border-radius: calc(10 * var(--fu)); background: rgba(47, 74, 12, .45); backdrop-filter: blur(8px);
  font: 800 calc(13.5 * var(--fu)) / 1 Montserrat, sans-serif; letter-spacing: .04em; white-space: nowrap; }
.kc-badge img { width: calc(28 * var(--fu)); height: calc(28 * var(--fu)); object-fit: contain; }
.kc-title { margin: calc(16 * var(--fu)) 0 0; font: 900 calc(54 * var(--fu)) / calc(56 * var(--fu)) Montserrat, sans-serif; letter-spacing: -.03em; color: #fff; }
.kc-title > span { display: block; white-space: nowrap; }
.kc-title .kc-row2 { display: flex; align-items: center; }
.kc-off { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  margin-left: calc(12 * var(--fu)); padding: calc(4 * var(--fu)) calc(16 * var(--fu)); border-radius: calc(12 * var(--fu));
  border: calc(1.4 * var(--fu)) solid #4f7a0f; color: #0b1205; rotate: -1deg;
  background: radial-gradient(130% 130% at 47% 0, #c6f25a 38%, #9dd425 69%, #6ea218);
  animation: hh-pop .55s var(--mola) .5s both; }
.kc-desc { margin: calc(16 * var(--fu)) 0 0; max-width: calc(560 * var(--fu)); font: 500 calc(17.5 * var(--fu)) / calc(25 * var(--fu)) Geist, sans-serif; color: rgba(255, 255, 255, .8); }
.kc-act { display: flex; align-items: center; gap: calc(22 * var(--fu)); margin-top: calc(20 * var(--fu)); }
.kc-cta { position: relative; overflow: hidden; display: flex; align-items: center; height: calc(58 * var(--fu)); padding: 0 calc(54 * var(--fu)) 0 calc(18 * var(--fu));
  border: calc(1.1 * var(--fu)) solid #4f7a0f; border-radius: calc(11 * var(--fu)); color: #0b1205; text-decoration: none; white-space: nowrap;
  background: radial-gradient(110% 130% at 47% 0, #c6f25a 38%, #9dd425 69%, #6ea218); box-shadow: 0 calc(16 * var(--fu)) calc(13 * var(--fu)) rgba(0, 0, 0, .25);
  font: 900 calc(19 * var(--fu)) / 1 Montserrat, sans-serif; letter-spacing: -.01em; transition: filter .2s ease, scale .25s cubic-bezier(.2, .8, .2, 1); }
.kc-cta-ic { position: absolute; right: calc(10 * var(--fu)); top: 50%; translate: 0 -50%; display: grid; place-items: center;
  width: calc(32 * var(--fu)); height: calc(32 * var(--fu)); border-radius: calc(8 * var(--fu)); background: #0b1205; }
.kc-cta-ic svg { width: calc(16 * var(--fu)); height: calc(12 * var(--fu)); fill: #c6f25a; transition: transform .25s var(--eo); }
.kc-cta::after { animation-delay: 1.9s; }
@media (hover: hover) and (pointer: fine) { .kc-cta:hover { filter: brightness(1.08); } .kc-cta:hover .kc-cta-ic svg { transform: translateX(2px); } .kc-cta:active { scale: .97; } }
.kc-note { font: 800 calc(15 * var(--fu)) / 1 Montserrat, sans-serif; letter-spacing: .01em; color: rgba(255, 255, 255, .9); white-space: nowrap; }
.kc-trust { display: flex; align-items: center; gap: calc(7 * var(--fu)); margin-top: calc(34 * var(--fu));
  font: 800 calc(15 * var(--fu)) / 1 Montserrat, sans-serif; white-space: nowrap; }
.kc-trust > svg, .kc-trust > i { flex: none; width: calc(22 * var(--fu)); height: calc(22 * var(--fu)); color: #c6f25a; }
.kc-trust > span { margin-right: calc(14 * var(--fu)); }
.kc-trust span i { font-style: normal; font-weight: 500; }
/* as 3 capas com a seta apontando para elas (PC e celular; o dono trocou a simulação do /pack por isto em 24/10).
   Na abertura entram em leque, uma depois da outra, e a seta aparece e "clica"; depois as capas boiam. A entrada mexe
   em translate/scale/rotate e o boiar em transform, então uma não briga com a outra. O bloco segue o mouse (JS). */
.kc-covers { position: absolute; z-index: 1; --cu: calc(1.62 * var(--fu)); right: calc(150 * var(--fu)); top: 50%;
  width: calc(165 * var(--cu)); height: calc(285 * var(--cu)); margin-top: calc(-142.5 * var(--cu)); pointer-events: none;
  transition: transform .7s var(--eo); }
.kc-covers > * { position: absolute; display: block; }
.kc-covers img { object-fit: cover; box-shadow: 0 14px 28px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); }
.kc-covers img:not([src]) { visibility: hidden; }
.kc-c1 { left: calc(33 * var(--cu)); top: calc(3 * var(--cu)); width: calc(95 * var(--cu)); height: calc(131 * var(--cu)); border-radius: calc(9 * var(--cu)); rotate: 13.8deg;
}
.kc-c2 { left: calc(37 * var(--cu)); top: calc(54 * var(--cu)); width: calc(102 * var(--cu)); height: calc(141 * var(--cu)); border-radius: calc(10 * var(--cu)); rotate: 25.4deg;
}
.kc-c3 { left: calc(29 * var(--cu)); top: calc(111 * var(--cu)); width: calc(118 * var(--cu)); height: calc(163 * var(--cu)); border-radius: calc(11 * var(--cu)); rotate: 12.7deg;
}
.kc-cur { left: calc(6 * var(--cu)); top: calc(195 * var(--cu)); width: calc(25 * var(--cu)); height: calc(35 * var(--cu)); rotate: 98deg;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }
/* até as imagens chegarem (.is-in, script logo depois dos dados no home.html) as capas e a seta ficam escondidas */
.kc-covers:not(.is-in) > * { opacity: 0; }
.kc-covers.is-in .kc-c1 { animation: kc-entra .9s var(--mola) .1s both, hh-bob2 5.4s ease-in-out -1.2s infinite; }
.kc-covers.is-in .kc-c2 { animation: kc-entra .9s var(--mola) .25s both, hh-bob2 6.2s ease-in-out -3s infinite; }
.kc-covers.is-in .kc-c3 { animation: kc-entra .9s var(--mola) .4s both, hh-bob2 4.8s ease-in-out -.4s infinite; }
.kc-covers.is-in .kc-cur { animation: kc-seta .6s var(--mola) .85s both, hh-toque 3.4s var(--eo) 1.8s infinite; }
@keyframes kc-entra { from { opacity: 0; translate: calc(80 * var(--cu)) calc(36 * var(--cu)); scale: .72; rotate: 32deg; } }
@keyframes kc-seta { from { opacity: 0; translate: calc(-26 * var(--cu)) calc(18 * var(--cu)); scale: .4; } }
/* a seta fica no meio do dente arredondado embaixo do combo */
.kc-chev { position: absolute; left: 50%; top: calc(100% - 5.5 * var(--nu) - 3.5 * var(--fu)); z-index: 1; width: calc(12 * var(--fu)); height: calc(7 * var(--fu)); translate: -50% 0;
  fill: #c6f25a; pointer-events: none; animation: hh-chev 1.8s ease-in-out infinite; }
.kc-host.is-off *, .kc-host.is-off *::after { animation-play-state: paused !important; }
@media (max-width: 999.98px) { .kc-covers { --cu: calc(1.5 * var(--fu)); right: calc(90 * var(--fu)); } }
@container kc (max-width: 679px) {
  .kc, .kg-rot { --fu: calc(100cqw / 495); }
  .kc { --nu: var(--fu); display: block; min-height: 0; height: calc(275 * var(--fu)); padding: calc(36 * var(--fu)) 0 0 calc(30 * var(--fu)); }
  .kc-shape { border-radius: calc(26 * var(--fu)); --pw: 269; --th: 22; --bh: 11;
    --tp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 269 22' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H269V22H0Z M5.26 0A12 12 0 0 1 15.49 5.74A34 34 0 0 0 44.5 22H224.5A34 34 0 0 0 253.51 5.74A12 12 0 0 1 263.74 0Z'/%3E%3C/svg%3E");
    --bp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 269 11' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H269V11H0Z M105.27 11A8 8 0 0 0 112.52 6.37A11 11 0 0 1 122.5 0H146.5A11 11 0 0 1 156.48 6.37A8 8 0 0 0 163.73 11Z'/%3E%3C/svg%3E"); }
  .kc-badge { height: calc(29 * var(--fu)); font-size: calc(12 * var(--fu)); padding-right: calc(14 * var(--fu)); }
  .kc-badge img { width: calc(22 * var(--fu)); height: calc(22 * var(--fu)); }
  .kc-title { margin-top: calc(9 * var(--fu)); font-size: calc(30 * var(--fu)); line-height: calc(34 * var(--fu)); }
  .kc-off { margin-left: calc(8 * var(--fu)); padding: calc(2 * var(--fu)) calc(10 * var(--fu)); border-radius: calc(9 * var(--fu)); }
  .kc-desc { display: none; }
  .kc-act { flex-direction: column-reverse; align-items: flex-start; gap: calc(8 * var(--fu)); margin-top: calc(12 * var(--fu)); }
  .kc-note { font-size: calc(12 * var(--fu)); }
  .kc-cta { height: calc(48 * var(--fu)); font-size: calc(16.5 * var(--fu)); padding-right: calc(46 * var(--fu)); }
  .kc-cta-ic { width: calc(26 * var(--fu)); height: calc(26 * var(--fu)); }
  .kc-trust { gap: calc(4 * var(--fu)); margin-top: calc(11 * var(--fu)); font-size: calc(8.6 * var(--fu)); }
  .kc-trust > svg, .kc-trust > i { width: calc(13 * var(--fu)); height: calc(13 * var(--fu)); }
  .kc-trust > span { margin-right: calc(6 * var(--fu)); }
  .kc-trust > .t3, .kc-trust > .t3 + span { display: none; }   /* "Sem PowerShell" já está na faixa de vantagens logo abaixo */
  .kc-covers { --cu: var(--fu); right: auto; left: calc(330 * var(--fu)); top: calc(-10 * var(--fu)); margin-top: 0; }
}

/* --------------------------------------------------------- faixa de vantagens */
.tb { margin-top: 1.5rem; }
.tb__track { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 18px;
  background: radial-gradient(70% 160% at 50% 175%, rgba(157, 212, 37, .45), rgba(157, 212, 37, 0) 70%), linear-gradient(180deg, #091204, #0e1a06);
  box-shadow: inset 0 0 0 1px rgba(157, 212, 37, .16), inset 0 1px 0 rgba(220, 255, 170, .07); }
@media (min-width: 990px) { .tb__track { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tb__item { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 0; padding: 16px 18px; }
.tb__item + .tb__item::before { content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(157, 212, 37, .32), transparent); }
.tb__icon { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 13px;
  background: radial-gradient(105% 105% at 50% 0, rgba(157, 212, 37, .28), rgba(16, 26, 9, .9) 70%); box-shadow: inset 0 0 0 1px rgba(157, 212, 37, .35), 0 8px 18px -8px rgba(157, 212, 37, .55);
  transition: transform .35s var(--eo); }
.tb__icon img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.tb__txt { min-width: 0; }
.tb__txt h3 { margin: 0 0 3px; font: 800 15px/1.15 Montserrat, sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb__txt p { margin: 0; font: 500 12.5px/1.3 Geist, sans-serif; color: rgba(255, 255, 255, .62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb__track::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 18%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(220, 255, 170, .07), transparent); transform: translateX(-120%) skewX(-18deg); animation: tb-brilho 7s cubic-bezier(.45, 0, .2, 1) 2s infinite; }
.tb.is-armed .tb__item { opacity: 0; }
.tb.is-in .tb__item { opacity: 1; animation: hh-sobe .55s var(--eo) both; animation-delay: calc(var(--i, 0) * 70ms); }
@media (hover: hover) and (pointer: fine) { .tb__item:hover .tb__icon { transform: translateY(-3px) scale(1.07) rotate(-4deg); } }
@media (max-width: 640px) { .tb__item { justify-content: flex-start; padding: 12px; gap: 9px; } .tb__icon { width: 40px; height: 40px; border-radius: 11px; }
  .tb__icon img { width: 36px; height: 36px; } .tb__txt h3 { font-size: 12.5px; white-space: normal; } .tb__txt p { font-size: 10.5px; white-space: normal; } }

/* ------------------------------------------------------ carrossel dos jogos */
.kg-rot { --fu: calc(100cqw / 1370); margin-top: .85rem; }
.kg-track { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.kg-track::-webkit-scrollbar { display: none; }
.kg-track > .kg { flex: 0 0 100%; scroll-snap-align: start; }
.kg-track > .kg:not(.is-on) .kg-btn::after { animation-play-state: paused; }
.kg-dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.kg-dot { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .24); cursor: pointer;
  transition: width .35s var(--eo), background-color .35s ease; }
.kg-dot::before { content: ''; position: absolute; inset: -8px -4px; }
.kg-dot.is-on { width: 22px; background: #9dd425; }
.kg { position: relative; display: block; height: calc(129 * var(--fu)); overflow: hidden; isolation: isolate; border-radius: calc(18 * var(--fu)); color: #fff; text-decoration: none;
  background: radial-gradient(75% 94% at 50% 6.5%, rgba(157, 212, 37, 0), rgba(30, 50, 8, .3) 30%, rgba(79, 122, 15, .6) 65%, #9dd425), #142407; }
.kg-art { position: absolute; inset: 0; pointer-events: none; }
.kg-tex { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: soft-light; opacity: .7; }
.kg-l { position: absolute; left: calc(var(--x) * var(--fu)); top: calc(var(--y) * var(--fu)); width: calc(var(--w) * var(--fu)); height: auto; rotate: var(--r, 0deg);
  filter: drop-shadow(0 calc(8 * var(--fu)) calc(14 * var(--fu)) rgba(0, 0, 0, .55)); transition: transform .5s var(--eo); }
.kg-l.b { filter: blur(calc(var(--b) * var(--fu))); opacity: .85; }
.kg-g { position: absolute; left: calc(var(--x) * var(--fu)); top: calc(var(--y) * var(--fu)); width: calc(var(--w) * var(--fu)); height: calc(var(--h) * var(--fu)); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(198, 242, 90, .55), transparent); mix-blend-mode: screen; }
.kg-title { position: absolute; left: calc(140 * var(--fu)); top: calc(31 * var(--fu)); z-index: 2; width: calc(430 * var(--fu));
  font: 900 calc(30 * var(--fu)) / 1.08 Montserrat, sans-serif; letter-spacing: -.035em; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.kg-btn { position: absolute; left: calc(1077 * var(--fu)); top: calc(39 * var(--fu)); z-index: 2; display: grid; place-items: center; overflow: hidden;
  width: calc(180 * var(--fu)); height: calc(52 * var(--fu)); border-radius: calc(11 * var(--fu)); border: calc(1 * var(--fu)) solid #4f7a0f; color: #0b1205;
  background: radial-gradient(105% 105% at 50% 0, #d6ff6e, #9dd425 40%, #6ea218 75%, #3f6a0c); box-shadow: 0 calc(10 * var(--fu)) calc(18 * var(--fu)) rgba(0, 0, 0, .35);
  transition: scale .3s var(--eo); }
.kg-btn b { position: relative; font: 900 calc(17.5 * var(--fu)) / 1 Montserrat, sans-serif; letter-spacing: -.02em; white-space: nowrap; }
.kg-btn::after { animation-delay: 2.6s; }
@media (hover: hover) and (pointer: fine) { .kg:hover .kg-btn { scale: 1.05; } .kg:active .kg-btn { scale: .97; transition-duration: .12s; }
  .kg:hover .kg-l:not(.b) { transform: translateY(-4px) scale(1.04); } }
@container kc (max-width: 679px) {
  .kg-rot { --fu: calc(100cqw / 495); }   /* repetido aqui: a regra de cima (.kg-rot do PC) vem depois do bloco do combo */
  .kg { height: calc(100 * var(--fu)); border-radius: calc(16 * var(--fu)); }
  .kg .pc { display: none; }
  .kg-l, .kg-g { left: calc(var(--mx, var(--x)) * var(--fu)); top: calc(var(--my, var(--y)) * var(--fu)); width: calc(var(--mw, var(--w)) * var(--fu)); }
  .kg-g { height: calc(var(--mh, var(--h)) * var(--fu)); }
  .kg-title { left: calc(22 * var(--fu)); top: calc(26 * var(--fu)); width: calc(200 * var(--fu)); font-size: calc(19 * var(--fu)); line-height: 1.05; }
  .kg-btn { left: calc(368 * var(--fu)); top: calc(33 * var(--fu)); width: calc(110 * var(--fu)); height: calc(34 * var(--fu)); border-radius: calc(8 * var(--fu)); }
  .kg-btn b { font-size: calc(12 * var(--fu)); }
}

/* ---------------------------------------------------------- avaliações (faixa) */
.klr { --s: .8; padding-block: 1.1rem .4rem; }
@media (min-width: 640px) { .klr { --s: 1; } }
.klr[hidden] { display: none; }
.klr__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.klr__track, .hr__track { display: flex; width: max-content; }
.klr.is-active .klr__track { animation: hh-rola var(--dur, 70s) linear infinite; will-change: transform; }
.klr:hover .klr__track, .klr:focus-within .klr__track, .klr.is-off .klr__track,
.hr:hover .hr__track, .hr.is-off .hr__track { animation-play-state: paused; }
.klr__group, .hr__group { display: flex; flex: 0 0 auto; gap: calc(16px * var(--s, 1)); padding-right: calc(16px * var(--s, 1)); }
.klr-card { position: relative; width: calc(332px * var(--s)); min-height: calc(200px * var(--s)); flex: 0 0 auto; display: flex; flex-direction: column;
  padding: calc(24px * var(--s)); border-radius: calc(20px * var(--s)); border: 1px solid rgba(255, 255, 255, .05);
  background: radial-gradient(267% 429% at -23.9% 113.3%, #0d120a 35.5%, #142010 43.6%, #1c3010 51.7%, #284512 59.7%, #3a6214 67.8%, #63971b 83.9%, #9dd425);
  transition: transform .3s var(--eo), box-shadow .3s ease, border-color .3s ease; }
.klr-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .5), 0 0 0 1px rgba(157, 212, 37, .35); }
.klr-card__head { display: flex; align-items: flex-start; gap: calc(12px * var(--s)); margin-bottom: calc(16px * var(--s)); }
.klr-card__avatar { flex: none; width: calc(48px * var(--s)); height: calc(48px * var(--s)); border-radius: calc(12px * var(--s)); }
.klr-card__id { display: flex; flex-direction: column; min-width: 5rem; }
.klr-card__name { font: 800 calc(16px * var(--s)) / 1.2 Montserrat, sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.klr-card__stars, .hr-card__stars { display: flex; gap: calc(3px * var(--s, 1)); margin-top: calc(5px * var(--s, 1)); }
.klr-card__stars svg, .hr-card__stars svg { width: calc(14px * var(--s, 1)); height: calc(14px * var(--s, 1)); }
.hh-estrela--on { color: #ffd34d; } .hh-estrela--off { color: rgba(255, 255, 255, .2); }
.klr-card__bought { margin-left: auto; display: inline-flex; align-items: center; gap: calc(5px * var(--s)); max-width: calc(140px * var(--s)); padding: calc(5px * var(--s)) calc(9px * var(--s));
  border-radius: calc(7px * var(--s)); background: rgba(157, 212, 37, .12); border: 1px solid rgba(157, 212, 37, .28); color: #d6ff9c;
  font: 700 calc(10.5px * var(--s)) / 1.2 Geist, sans-serif; }
.klr-card__bought svg { flex: none; width: calc(12px * var(--s)); height: calc(12px * var(--s)); }
.klr-card__bought span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.klr-card__text { margin: 0; padding-right: calc(64px * var(--s)); font: 500 calc(14px * var(--s)) / calc(23px * var(--s)) Geist, sans-serif; color: rgba(255, 255, 255, .75);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.klr-card__capa { position: absolute; right: calc(24px * var(--s)); bottom: calc(22px * var(--s)); width: calc(48px * var(--s)); aspect-ratio: 2 / 3; border-radius: calc(7px * var(--s));
  overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 6px 14px rgba(0, 0, 0, .45); transition: transform .2s ease, border-color .2s ease; }
.klr-card__capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.klr-card__capa:hover { transform: scale(1.07); border-color: rgba(198, 242, 90, .6); }

/* --------------------------------------------- avaliações (fim da home, grande) */
.hr { padding: 3rem 0 1rem; }
.hr[hidden] { display: none; }
.hr__head { text-align: center; margin-bottom: 1.6rem; }
.hr__title { font: 900 clamp(1.6rem, 3.6vw, 2.4rem) / 1.1 Montserrat, sans-serif; letter-spacing: -.02em; color: #fff; }
.hr__title span { color: #9dd425; }
.hr__sub { margin-top: .5rem; font: 500 .95rem/1.45 Geist, sans-serif; color: rgba(255, 255, 255, .62); }
.hr__score { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1rem; padding: .45rem 1rem .45rem .5rem; border-radius: 10px;
  background: rgba(157, 212, 37, .08); box-shadow: inset 0 0 0 1px rgba(157, 212, 37, .28); font: 600 .85rem Geist, sans-serif; color: rgba(255, 255, 255, .7); }
.hr__score img { width: 30px; height: 30px; object-fit: contain; }
.hr__score b { font: 900 1.15rem Montserrat, sans-serif; color: #fff; }
.hr__viewport { overflow: hidden; padding-block: 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.hr.is-active .hr__track { animation: hh-rola-volta var(--dur, 80s) linear infinite; }
.hr-card { flex: 0 0 auto; width: 330px; padding: 20px 22px; border-radius: 16px; background: linear-gradient(180deg, #0f1a09, #090d06);
  box-shadow: inset 0 0 0 1px rgba(157, 212, 37, .14); transition: transform .3s var(--eo), box-shadow .3s ease; }
.hr-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(157, 212, 37, .45), 0 16px 34px rgba(0, 0, 0, .5); }
.hr-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.hr-card__user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hr-card__avatar { flex: none; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font: 900 16px Montserrat, sans-serif; color: #0b1205; }
.hr-card__name { font: 800 15px/1.2 Montserrat, sans-serif; color: #fff; }
.hr-card__badge { flex: none; max-width: 120px; padding: 4px 8px; border-radius: 7px; background: rgba(157, 212, 37, .12); color: #d6ff9c;
  font: 700 10.5px/1.2 Geist, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-card__text { margin: 0; font: 500 14px/1.55 Geist, sans-serif; color: rgba(255, 255, 255, .75); display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 640px) { .hr-card { width: 270px; padding: 16px; } .hr-card__text { font-size: 13px; } }

/* ------------------------------------------- loja inteira: hover dos cards e botões */
@media (hover: hover) {
  .uk-card { transition: transform .3s var(--mola, cubic-bezier(.34, 1.56, .64, 1)), box-shadow .3s ease, border-color .3s ease; }
  .uk-card:hover { transform: translate3d(0, -4px, 0) scale(1.03); z-index: 5; border-color: transparent;
    box-shadow: 0 0 0 2px #9dd425, 0 0 0 3.5px rgba(157, 212, 37, .35), 0 0 16px rgba(157, 212, 37, .6), 0 0 34px rgba(157, 212, 37, .3), 0 12px 28px rgba(0, 0, 0, .55); }
  .uk-card:hover .uk-card__img { transform: none; }
}
.uk-row__view { padding-block: 10px; margin-block: -10px; }
.reveal-fade-up { transition: opacity .6s var(--eo, cubic-bezier(.23, 1, .32, 1)), transform .6s cubic-bezier(.23, 1, .32, 1); transition-delay: var(--delay, 0s); }

@keyframes hh-fade { from { opacity: 0; } }
@keyframes hh-sobe { from { opacity: 0; transform: translateY(14px); } }
@keyframes hh-pop { 0% { opacity: 0; transform: scale(.45); } 55% { opacity: 1; transform: scale(1.08); } 78% { transform: scale(.97); } }
@keyframes hb-up { from { opacity: 0; transform: translate3d(0, 45%, 0); } }
@keyframes hb-left { from { opacity: 0; transform: translate3d(-12%, 0, 0); } }
@keyframes hb-right { from { opacity: 0; transform: translate3d(24%, 10%, 0) rotate(7deg); } }
@keyframes hb-pop { 0% { opacity: 0; transform: scale(.45); } 55% { opacity: 1; transform: scale(1.08); } 78% { transform: scale(.97); } }
@keyframes hh-bob { 50% { transform: translate3d(0, calc(var(--by, -4) * var(--u)), 0) rotate(var(--br, 0deg)); } }
@keyframes hh-bob2 { 50% { transform: translateY(-5px); } }
@keyframes hh-respira { 50% { transform: scale(1.035); } }
@keyframes hh-pisca { 0%, 100% { opacity: .8; transform: scale(1); } 23% { opacity: .55; transform: scale(.94); } 41% { opacity: .85; transform: scale(1.07); } 64% { opacity: .62; } 82% { opacity: .78; transform: scale(1.03); } }
@keyframes hh-pulso { 50% { opacity: 1; } }
@keyframes hh-brilho { 0% { transform: translateX(-160%) skewX(-18deg); } 30%, 100% { transform: translateX(460%) skewX(-18deg); } }
@keyframes tb-brilho { 0% { transform: translateX(-120%) skewX(-18deg); } 35%, 100% { transform: translateX(680%) skewX(-18deg); } }
@keyframes hh-cta-in { from { opacity: 0; transform: translateY(10px) scale(.94); } }
@keyframes hh-toque { 0%, 62%, 100% { transform: none; } 70% { transform: scale(.86); } 78% { transform: none; } }
@keyframes hh-chev { 50% { transform: translateY(3px); } }
@keyframes hh-rola { to { transform: translate3d(-50%, 0, 0); } }
@keyframes hh-rola-volta { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }

@media (prefers-reduced-motion: reduce) {
  .hh *, .hh *::before, .hh *::after, .hr * { animation: none !important; transition: none !important; }
  .hb.is-armed .hb-it, .hb.is-armed .hb-bg, .tb.is-armed .tb__item { opacity: 1 !important; }
}