/* Página inicial: destaque em tela cheia que troca (estilo página de jogo), cards dos jogos, clientes */
@property --rk1{syntax:"<color>";inherits:true;initial-value:#2b2440}
@property --rk2{syntax:"<color>";inherits:true;initial-value:#15111f}
@property --rk3{syntax:"<color>";inherits:true;initial-value:#09080d}
@property --rkA{syntax:"<color>";inherits:true;initial-value:#f2a7c8}
@property --rkAt{syntax:"<color>";inherits:true;initial-value:#2a1220}
body.home{--rkScroll:0;transition:--rk1 1.4s ease,--rk2 1.4s ease,--rk3 1.4s ease,--rkA 1.2s ease,--rkAt 1.2s ease}
.home .stage-wrap.hero{display:none!important} /* abertura antiga removida */

/* fundo da parte de cima: cor da thumb que vai escurecendo conforme desce */
.home main{background:linear-gradient(180deg,var(--rk3) 0,var(--rk3) min(86vh,900px),#050507 calc(min(86vh,900px) + 90vh)) no-repeat}
.home .cta-wrap{background:transparent}
.nichos.rk-hide{display:none}
/* banner "KARL TS" acima do botão: removido em todas as páginas */
.stage-wrap.nos{display:none}

/* destaque em tela cheia, escurecido, conteúdo embaixo à esquerda (estilo página de jogo) */
.rk{position:relative;isolation:isolate;height:min(86vh,900px);min-height:560px;overflow:hidden;background:var(--rk3)}
.rk-stage{position:absolute;inset:0;z-index:0}
.rk-slide{position:absolute;inset:0;display:block;opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.rk-slide.is-on{opacity:1;pointer-events:auto}
.rk-slide img{width:100%;height:100%;object-fit:cover;object-position:center 35%;transform:scale(1.04);transition:transform 8s ease-out}
.rk-slide.is-on img{transform:scale(1)}
.rk-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.6) 0,rgba(0,0,0,.25) 16%,rgba(0,0,0,.35) 45%,color-mix(in srgb,var(--rk3) 88%,transparent) 78%,var(--rk3) 100%),rgba(0,0,0,.18)}
.rk-pp{position:absolute;z-index:3;top:clamp(96px,12vh,128px);right:clamp(16px,3vw,44px)}
.rk-in{position:absolute;z-index:2;left:0;right:0;bottom:clamp(36px,7vh,80px);max-width:1440px;margin:0 auto;padding:0 clamp(20px,6vw,96px);display:flex;align-items:flex-end;gap:clamp(24px,4vw,60px)}
.rk-logo{flex:none;width:clamp(120px,14vw,210px);display:flex;align-items:flex-end;justify-content:center}
.rk-logo img{max-width:100%;max-height:clamp(110px,15vh,190px);object-fit:contain;filter:drop-shadow(0 8px 24px rgba(0,0,0,.5));opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s var(--ease,ease)}
.rk-logo img.in{opacity:1;transform:none}
.rk-copy{flex:1;min-width:0;max-width:920px;opacity:0;transform:translateY(14px);transition:opacity .8s ease .2s,transform .8s var(--ease,ease) .2s}
.rk.ready .rk-copy{opacity:1;transform:none}
.rk-kick{margin:0 0 12px;font-weight:700;font-size:clamp(17px,1.5vw,22px);color:#fff}
.rk-kick a{color:rgba(255,255,255,.62);text-decoration:none;transition:color .25s}
.rk-kick a:hover{color:#fff}
.rk-kick i{font-style:normal;color:rgba(255,255,255,.45);margin:0 6px}
.rk-desc{margin:0;max-width:640px;font-size:clamp(16px,1.3vw,20px);line-height:1.5;color:rgba(255,255,255,.88)}
.rk-btns{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:26px}

/* botões no estilo pílula (Watch Now) */
.rk-btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:62px;padding:0 32px;border-radius:999px;background:var(--rkA);color:var(--rkAt);border:1.5px solid transparent;font-weight:700;font-size:19px;letter-spacing:.005em;white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease,transform .2s var(--ease,ease)}
.rk-btn svg{width:20px;height:20px;flex:none}
.rk-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;transition:opacity .3s ease;z-index:-1}
.rk-btn:hover::after{opacity:.12}
.rk-btn:hover{box-shadow:0 10px 34px color-mix(in srgb,var(--rkA) 45%,transparent)}
.rk-btn:active{transform:scale(.97)}
.rk-btn.dark{background:rgba(18,18,22,.82);color:#fff}
.rk-btn.dark:hover{box-shadow:0 10px 30px rgba(0,0,0,.4)}
.rk-btn.dark::after{background:#fff}
.rk-btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28);backdrop-filter:none}
.rk-btn.ghost:hover{box-shadow:none;border-color:rgba(255,255,255,.6)}
.rk-btn.ghost::after{background:#fff}
.rk-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* controle: pausar + pílulas com progresso */
.rk-pp{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.55);transition:background .3s ease}
.rk-pp:hover{background:rgba(255,255,255,.18)}
.rk-pp svg{width:16px;height:16px}
.rk-dots{display:flex;align-items:center;gap:8px;margin-left:auto;padding-left:10px}
.rk-dots button{position:relative;width:28px;height:22px;display:flex;align-items:center;cursor:pointer;transition:width .45s var(--ease,ease)}
.rk-dots button i{position:relative;display:block;width:100%;height:6px;border-radius:99px;background:rgba(255,255,255,.28);overflow:hidden}
.rk-dots button i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#fff;transform:scaleX(0);transform-origin:left center}
.rk-dots button.is-on{width:64px}
.rk-dots.anim button.is-on i::after{animation:rkFill var(--dur,6.5s) linear forwards}
.rk.paused .rk-dots button.is-on i::after{animation-play-state:paused}
.rk-dots button:hover i{background:rgba(255,255,255,.5)}
@keyframes rkFill{to{transform:scaleX(1)}}

/* cards dos jogos */
.rk-games{position:relative;z-index:2;max-width:1440px;margin:0 auto;padding:clamp(20px,4vh,44px) clamp(20px,6vw,96px) 10px}
.rk-games h2{margin:0 0 20px;font-size:clamp(24px,2.4vw,34px);font-weight:700}
.rk-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,22px)}
.rk-card{display:block;color:#fff;text-decoration:none}
.rk-card-im{position:relative;display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#111;isolation:isolate}
.rk-card-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transform:scale(1.04);transition:opacity .8s ease,transform 1.2s var(--ease,ease)}
.rk-card-im img.on{opacity:1;transform:none}
.rk-card-dots{position:absolute;left:0;right:0;bottom:7px;z-index:2;display:flex;justify-content:center;gap:4px;pointer-events:none}
.rk-card-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.45);box-shadow:0 1px 3px rgba(0,0,0,.4);transition:width .3s,background .3s}
.rk-card-dots i.on{width:14px;border-radius:3px;background:#fff}
.rk-card-im::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;transition:opacity .35s ease}
.rk-card:hover .rk-card-im img.on{transform:scale(1.04)}
.rk-card:hover .rk-card-im::after{opacity:.08}
.rk-card-t{display:block;padding:12px 2px 0}
.rk-card-t small{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;color:rgba(255,255,255,.55)}
.rk-card-t b{display:block;margin-top:3px;font-size:clamp(17px,1.4vw,21px);font-weight:700}

/* faixa de clientes */
.clientes{background:transparent;padding:34px 0 8px;position:relative;z-index:2}
.cl-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;max-width:1240px;margin:0 auto 18px;padding:0 24px}
.cl-head h2{margin:0;font-size:clamp(20px,2.4vw,28px);font-weight:800}
.cl-head p{margin:4px 0 0;color:rgba(255,255,255,.65);font-size:15px}
.cl-count{font-weight:700;font-size:13px;color:rgba(255,255,255,.55);white-space:nowrap}
.cl-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.cl-track{display:flex;gap:22px;width:max-content;padding:6px 0 10px;animation:clScroll var(--dur,60s) linear infinite;will-change:transform}
.cl-marquee:hover .cl-track,.cl-marquee:focus-within .cl-track{animation-play-state:paused}
@keyframes clScroll{to{transform:translate3d(calc(-50% - 11px),0,0)}}
.cl{flex:none;width:118px;display:grid;justify-items:center;gap:2px;padding:4px 0;color:#fff;text-decoration:none;transition:transform .35s var(--ease,ease)}
.cl:hover{transform:translateY(-3px)}
.cl .av{width:84px;height:84px;margin-bottom:8px;border-radius:50%;overflow:hidden;background:#fff;color:#111;display:grid;place-items:center;font-weight:800;font-size:22px;box-shadow:0 0 0 2px rgba(255,255,255,.14);transition:box-shadow .35s ease}
.cl:hover .av{box-shadow:0 0 0 3px #fff}
.cl .av img{width:100%;height:100%;object-fit:cover;display:block}
.cl b{font-size:14px;line-height:1.2;text-align:center}
.cl small{font-size:11.5px;color:rgba(255,255,255,.55);text-align:center}
.cl.star .av{box-shadow:0 0 0 3px #fff}


/* botão principal da página e da thumb aberta */
.cta-wrap{display:flex;justify-content:center;align-items:center;width:100%;padding:40px 16px 76px;text-align:center;background:transparent}
.cta-wrap .cta{margin:0 auto}
body:not(.home) .cta-wrap{padding:28px 16px 40px}
body:not(.home) .clientes{padding-top:56px}
body:not(.home) .rk-btn.big{background:#fff;color:#111}
body:not(.home) .rk-btn.big:hover{box-shadow:0 10px 34px rgba(255,255,255,.25)}
body:not(.home) .rk-games{padding-bottom:70px}
.rk-card.is-cur .rk-card-im{box-shadow:0 0 0 3px #fff}
.rk-btn.big{width:auto;height:76px;padding:0 44px;font-size:24px;font-weight:800;border-radius:999px;border:1.5px solid transparent;background:var(--rkA);color:var(--rkAt)}
.rk-btn.big svg{width:24px;height:24px}
.home .cta-wrap .cta.rk-btn:hover{background:var(--rkA);color:var(--rkAt);transform:none}
body:not(.home) .cta-wrap .cta.rk-btn:hover{background:#fff;color:#111;transform:none}
/* no visualizador de thumb */
.lightbox{flex-direction:column;gap:20px}
.lightbox .lb-close{position:absolute;top:16px;right:20px;z-index:2}
.lightbox img{max-height:min(78vh,calc(100vh - 150px))}
.lb-cta{opacity:0;transform:translateY(10px);transition:opacity .4s ease .1s,transform .45s var(--ease,ease) .1s,box-shadow .35s ease}
.lightbox.is-open .lb-cta{opacity:1;transform:none}

@media (max-width:980px){
  .rk-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .rk{height:auto;min-height:0;overflow:visible;background:transparent}
  .rk-stage{position:relative;aspect-ratio:16/9;margin-top:64px}
  .rk-shade{inset:64px 0 auto;aspect-ratio:16/9;background:linear-gradient(0deg,var(--rk3) 0,transparent 45%)}
  .rk-pp{top:76px;right:12px;width:34px;height:34px}
  .rk-in{position:relative;bottom:auto;flex-direction:column;align-items:flex-start;gap:14px;padding:0 16px;margin-top:-40px}
  .rk-logo{width:110px;justify-content:flex-start}.rk-logo img{max-height:80px}
  .rk-btns{margin-top:18px;gap:10px}
  .rk-btn{height:52px;padding:0 22px;font-size:16px}
  .rk-btn.big{height:62px;font-size:19px;padding:0 30px}
  .rk-dots{margin-left:0;padding-left:0;width:100%}
  .rk-dots button{width:20px}.rk-dots button.is-on{width:44px}
  .rk-games{padding:28px 16px 6px}
  .rk-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:0 0 6px;scrollbar-width:none}
  .rk-card{flex:0 0 72%;scroll-snap-align:start}
  .cl-head{padding:0 16px}
  .cl{width:100px}.cl .av{width:70px;height:70px}
}
@media (prefers-reduced-motion:reduce){.cl-track{animation:none}.cl-marquee{overflow-x:auto}.rk-slide img{transition:none;transform:none}.rk-dots.anim button.is-on i::after{animation:none;transform:none}}

/* barra do topo: faixa preta semitransparente fixa (estilo Rockstar) */
body .nav{position:fixed;padding-top:0;background:rgba(8,8,10,.62);border-bottom:1px solid rgba(255,255,255,.06);box-shadow:0 8px 30px rgba(0,0,0,.18)}
@media (max-width:720px){.home .rk-stage{margin-top:68px}.home .rk-shade{inset:68px 0 auto}}

/* destaque: a thumb inteira e nítida (sem cortar nem esticar) sobre um fundo desfocado dela mesma */
.rk-slide .rk-bg{position:absolute;inset:-60px;background-size:cover;background-position:center;filter:blur(38px) saturate(1.25);opacity:.7;transform:scale(1.1)}
.rk-slide img.rk-fg{position:absolute;left:50%;top:clamp(80px,10vh,110px);width:min(860px,86vw,calc((min(86vh,900px) - 400px) * 16 / 9));height:auto;aspect-ratio:16/9;object-fit:contain;transform:translateX(-50%) scale(.97);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);transition:transform 1.1s ease,opacity 1.1s ease}
.rk-slide.is-on img.rk-fg{transform:translateX(-50%) scale(1)}
.rk-shade{background:linear-gradient(180deg,rgba(0,0,0,.45) 0,rgba(0,0,0,.1) 20%,rgba(0,0,0,.15) 55%,color-mix(in srgb,var(--rk3) 85%,transparent) 82%,var(--rk3) 100%)}
@media (max-width:720px){.rk-slide .rk-bg{display:none}.rk-slide img.rk-fg,.rk-slide.is-on img.rk-fg{inset:0;top:0;left:0;width:100%;height:100%;transform:none;border-radius:0;box-shadow:none;object-fit:cover}}

/* Início: carrossel igual ao das páginas de jogo + texto embaixo */
.p-hero.home-car{--c1:#050507;background:transparent}
.rk.rk-text{height:auto;min-height:0;overflow:visible;background:transparent}
.rk.rk-text .rk-stage,.rk.rk-text .rk-shade,.rk.rk-text .rk-pp,.rk.rk-text .rk-dots,.rk.rk-text .rk-logo{display:none}
.rk.rk-text .rk-in{position:relative;bottom:auto;justify-content:center;text-align:center;padding-top:8px;padding-bottom:10px}
.rk.rk-text .rk-copy{max-width:760px;margin:0 auto}
.rk.rk-text .rk-desc{margin:0 auto}
.rk.rk-text .rk-btns{justify-content:center}
#jogos{scroll-margin-top:80px}
@media (max-width:720px){.rk.rk-text .rk-in{margin-top:0;padding-top:14px}}