/* =========================================================================
   Rei das Keys - seções de página (filtros, checkout, home).
   CSS puro, carregado depois do core.css pelo layouts/layout.html.
   ========================================================================= */

/* ===================== Página de categorias (filtros) ===================== */
/* Painel: topo fixo (título e Limpar) e corpo com rolagem própria,
   para o preço e as categorias ficarem ao alcance em qualquer altura de tela */
.rdk-filtros-painel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid rgb(255 255 255 / 0.08);
  background-color: rgb(var(--card) / 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.rdk-filtros-topo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem 0.85rem 1.25rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.07);
}

.rdk-filtros-corpo {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.25rem 1.25rem;
}

.rdk-filtros-rodape {
  padding: 0.85rem 1.25rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgb(255 255 255 / 0.08);
  background-color: #121016;
}

@media (min-width: 1024px) {
  .rdk-filtros-painel {
    max-height: calc(100dvh - 7.5rem);
  }
}

.rdk-f-sec {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgb(255 255 255 / 0.07);
}

.rdk-f-sec > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  font-weight: 600;
  color: rgb(255 255 255 / 0.92);
}

.rdk-f-sec > summary::-webkit-details-marker {
  display: none;
}

.rdk-f-sec > summary [data-seta],
[data-rdk-f-vermais] [data-seta] {
  color: rgb(255 255 255 / 0.5);
  transition: transform 0.2s ease;
}

.rdk-f-sec[open] > summary [data-seta],
[data-rdk-f-vermais][aria-expanded="true"] [data-seta] {
  transform: rotate(180deg);
}

/* Campos de preço digitáveis */
.rdk-f-num {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  height: 2.5rem;
  padding: 0 0.7rem;
  border-radius: 0.75rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  background-color: rgb(255 255 255 / 0.04);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: text;
  transition: border-color 0.15s ease;
}

.rdk-f-num:focus-within {
  border-color: rgb(var(--rdk-amarelo) / 0.7);
}

.rdk-f-num input {
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.95rem;
  font-weight: 800;
  box-shadow: none;
  -moz-appearance: textfield;
}

.rdk-f-num input:focus-visible {
  box-shadow: none;
}

.rdk-f-num input::-webkit-inner-spin-button,
.rdk-f-num input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.rdk-f-opcao[hidden] {
  display: none;
}

.rdk-f-opcao[data-vazio] {
  opacity: 0.45;
}

@media (max-width: 1023px) {
  .rdk-filtros {
    position: fixed;
    inset: 0;
    z-index: 70;
    visibility: hidden;
    transition: visibility 0s 0.3s;
  }

  .rdk-filtros[data-open="true"] {
    visibility: visible;
    transition: none;
  }

  .rdk-filtros-fundo {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .rdk-filtros[data-open="true"] .rdk-filtros-fundo {
    opacity: 1;
  }

  .rdk-filtros-painel {
    position: absolute;
    inset: auto 0 0 0;
    max-height: 88dvh;
    border-radius: 1.75rem 1.75rem 0 0;
    background-color: #121016;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .rdk-filtros[data-open="true"] .rdk-filtros-painel {
    transform: none;
  }
}

.rdk-f-opcao {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 2.25rem;
  padding: 0.4rem 0.6rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(255 255 255 / 0.8);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.rdk-f-opcao:hover {
  background-color: rgb(255 255 255 / 0.05);
  color: #fff;
}

.rdk-f-check {
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  border-radius: 0.35rem;
  border: 1.5px solid rgb(255 255 255 / 0.25);
  color: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.rdk-f-opcao[aria-pressed="true"] {
  color: #fff;
  background-color: rgb(var(--rdk-amarelo) / 0.08);
}

.rdk-f-opcao[aria-pressed="true"] .rdk-f-check {
  background-color: rgb(var(--rdk-amarelo));
  border-color: rgb(var(--rdk-amarelo));
  color: rgb(var(--rdk-preto));
}

.rdk-f-chip {
  height: 2rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.12);
  background-color: rgb(255 255 255 / 0.04);
  font-size: 0.75rem;
  font-weight: 700;
  color: rgb(255 255 255 / 0.8);
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.rdk-f-chip:hover,
.rdk-f-chip[aria-pressed="true"] {
  border-color: rgb(var(--rdk-amarelo) / 0.6);
  color: rgb(var(--rdk-amarelo));
}

/* Faixa de preço com duas alças */
.rdk-range {
  position: relative;
  height: 2rem;
}

.rdk-range-trilho,
.rdk-range-faixa {
  position: absolute;
  top: 50%;
  height: 6px;
  border-radius: 999px;
  transform: translateY(-50%);
  pointer-events: none;
}

.rdk-range-trilho {
  left: 0;
  right: 0;
  background-color: rgb(255 255 255 / 0.1);
}

.rdk-range-faixa {
  left: 0;
  right: 0;
  background-color: rgb(var(--rdk-amarelo));
}

.rdk-range input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}

.rdk-range input[type="range"]:focus {
  outline: none;
  box-shadow: none;
}

.rdk-range input[type="range"]::-webkit-slider-runnable-track {
  background: transparent;
  border: 0;
}

.rdk-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 22px;
  height: 22px;
  margin-top: 0;
  border-radius: 999px;
  background-color: rgb(var(--rdk-amarelo));
  border: 4px solid #121016;
  box-shadow: 0 0 0 2px rgb(var(--rdk-amarelo) / 0.5);
  cursor: grab;
}

.rdk-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background-color: rgb(var(--rdk-amarelo));
  border: 4px solid #121016;
  box-shadow: 0 0 0 2px rgb(var(--rdk-amarelo) / 0.5);
  cursor: grab;
}

.rdk-range input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgb(var(--rdk-amarelo) / 0.6);
}

/* ===================== Checkout: jogo grátis ===================== */
.rdk-brinde {
  padding: 1rem;
  border-radius: 1.1rem;
  border: 1px solid rgb(var(--rdk-amarelo) / 0.35);
  background:
    radial-gradient(120% 90% at 0% 0%, rgb(var(--rdk-roxo) / 0.35), transparent 60%),
    rgb(255 255 255 / 0.03);
}

.rdk-brinde-lista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 6.5rem;
  gap: 0.6rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0.25rem;
  padding: 0.25rem 0.25rem 0.6rem;
  margin: 0 -0.25rem;
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 0.2) transparent;
}

.rdk-brinde-card {
  min-width: 0;
  text-align: left;
  scroll-snap-align: start;
}

.rdk-brinde-capa {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 0.75rem;
  background-color: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.1);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.rdk-brinde-capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rdk-brinde-mais {
  position: absolute;
  right: 0.4rem;
  bottom: 0.4rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background-color: rgb(var(--rdk-amarelo));
  color: rgb(var(--rdk-preto));
  box-shadow: 0 6px 16px -6px rgb(0 0 0 / 0.8);
}

.rdk-brinde-card:hover .rdk-brinde-capa,
.rdk-brinde-card:focus-visible .rdk-brinde-capa {
  transform: translateY(-2px);
  border-color: rgb(var(--rdk-amarelo) / 0.7);
  box-shadow: 0 14px 30px -16px rgb(var(--rdk-amarelo) / 0.6);
}

.rdk-brinde-card:active .rdk-brinde-capa {
  transform: scale(0.97);
}

/* Jogo grátis que já está no carrinho */
.rdk-brinde-card[data-no-carrinho] .rdk-brinde-capa {
  border-color: rgb(52 211 153 / 0.7);
}

.rdk-brinde-card[data-no-carrinho] .rdk-brinde-mais {
  background-color: rgb(52 211 153);
}

.rdk-brinde-selo {
  position: absolute;
  left: 0.4rem;
  top: 0.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background-color: rgb(6 78 59 / 0.9);
  color: rgb(167 243 208);
  font-size: 0.62rem;
  font-weight: 800;
}

/* Forma de pagamento escolhida */
[data-payment-method][data-selected="true"] .rdk-gateway-check {
  border-color: rgb(var(--rdk-amarelo));
  background-color: rgb(var(--rdk-amarelo));
  box-shadow: inset 0 0 0 3px rgb(var(--card));
}

/* ===================== Celular: barras fixas de compra ===================== */
.rdk-barra-compra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  background-color: rgb(18 16 22 / 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgb(255 255 255 / 0.08);
  box-shadow: 0 -12px 30px -12px rgb(0 0 0 / 0.7);
  transform: translateY(calc(100% + 90px));
  visibility: hidden;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s 0.25s;
}

.rdk-barra-compra[data-on] {
  transform: none;
  visibility: visible;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* No checkout a barra fica no lugar da navegação de baixo */
.rdk-barra-checkout {
  bottom: 0;
  z-index: 45;
  padding-bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
}

body:has(#checkout) .rdk-bottom-nav {
  display: none;
}

@media (min-width: 768px) {
  .rdk-barra-compra {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rdk-barra-compra,
  .rdk-barra-compra[data-on] {
    transition: none;
  }
}

/* ===================== Pedido: duas formas de ativar (abas só com CSS) ===================== */
.rdk-metodos > input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.rdk-metodos-abas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.rdk-metodos-abas > label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.75rem 0.9rem;
  border-radius: 0.9rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  background-color: rgb(255 255 255 / 0.03);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.rdk-metodos-abas > label:hover {
  border-color: rgb(255 255 255 / 0.25);
}

#rdk-metodo-ps:checked ~ .rdk-metodos-abas > label[for="rdk-metodo-ps"],
#rdk-metodo-app:checked ~ .rdk-metodos-abas > label[for="rdk-metodo-app"] {
  border-color: rgb(var(--rdk-amarelo));
  background-color: rgb(var(--rdk-amarelo) / 0.08);
}

#rdk-metodo-ps:focus-visible ~ .rdk-metodos-abas > label[for="rdk-metodo-ps"],
#rdk-metodo-app:focus-visible ~ .rdk-metodos-abas > label[for="rdk-metodo-app"] {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 3px;
}

#rdk-metodo-ps:checked ~ .rdk-metodo-app,
#rdk-metodo-app:checked ~ .rdk-metodo-ps {
  display: none;
}

/* ===================== Hype: selos nos cards ===================== */
.rdk-selo {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  box-shadow: 0 6px 14px -6px rgb(0 0 0 / 0.7);
}

.rdk-selo-alta {
  background: linear-gradient(90deg, #ff7a18, #ff3d54);
  color: #fff;
}

.rdk-selo-novo {
  background-color: rgb(var(--rdk-branco));
  color: rgb(var(--rdk-preto));
}

/* Um selo por card. Ordem: Lançamento, Pode sair grátis, Em alta */
.rdk-selos:has(.rdk-selo-novo) [data-rdk-promo-badge],
.rdk-selos:has([data-rdk-promo-badge]:not(.hidden)) .rdk-selo-alta {
  display: none !important;
}

/* Sem selo repetindo o título da seção */
[data-rdk-promo-section] .rdk-selos,
[data-rdk-top-lanc] .rdk-selo-novo,
[data-rdk-em-alta] .rdk-selo-alta {
  display: none !important;
}

@media (max-width: 639px) {
  .rdk-selos {
    top: 0.375rem;
    left: 0.375rem;
  }

  .rdk-selos > span {
    gap: 0.2rem;
    padding: 0.0625rem 0.4rem;
    font-size: 10px;
  }

  .rdk-selos svg {
    width: 0.75rem;
    height: 0.75rem;
  }
}

/* ===================== Home: Top 10 lançamentos ===================== */
.rdk-top10 {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 64%;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 10px 4px 14px;
  margin: -10px -4px -14px;
  list-style: none;
}

.rdk-top10::-webkit-scrollbar {
  display: none;
}

@media (min-width: 640px) {
  .rdk-top10 {
    grid-auto-columns: calc((100% - 2 * 14px) / 3.2);
    gap: 14px;
  }
}

@media (min-width: 1024px) {
  .rdk-top10 {
    grid-auto-columns: calc((100% - 4 * 16px) / 5);
    gap: 16px;
  }
}

.rdk-top10-item {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  padding-left: 27%;
  scroll-snap-align: start;
}

/* Número grande vazado atrás da capa; o top 3 em amarelo */
.rdk-top10-num {
  position: absolute;
  left: -0.2rem;
  bottom: 3.9rem;
  z-index: 0;
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  font-size: clamp(5.5rem, 15vw, 8.5rem);
  font-weight: 700;
  line-height: 0.78;
  letter-spacing: -0.07em;
  color: rgb(var(--background));
  -webkit-text-stroke: 3px rgb(255 255 255 / 0.32);
  pointer-events: none;
  user-select: none;
}

.rdk-top10-item:nth-child(-n + 3) .rdk-top10-num {
  -webkit-text-stroke-color: rgb(var(--rdk-amarelo));
}

.rdk-top10-card {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}

/* ===================== Home: o que a loja garante ===================== */
.rdk-vantagens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.rdk-vantagens > li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.75rem;
  border-radius: 1rem;
  border: 1px solid rgb(255 255 255 / 0.07);
  background-color: rgb(255 255 255 / 0.025);
}

.rdk-vantagem-icone {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  background-color: rgb(var(--rdk-amarelo) / 0.12);
  color: rgb(var(--rdk-amarelo));
}

@media (min-width: 1024px) {
  .rdk-vantagens {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .rdk-vantagens > li {
    padding: 0.9rem 1rem;
  }

  .rdk-vantagem-icone {
    width: 2.6rem;
    height: 2.6rem;
  }
}

/* ===================== Home: faixa da promoção ===================== */
.rdk-combo {
  padding: 1.1rem;
  border-radius: 1.75rem;
  border: 1px solid rgb(var(--rdk-roxo) / 0.4);
  background:
    radial-gradient(90% 120% at 0% 0%, rgb(var(--rdk-roxo) / 0.45), transparent 60%),
    linear-gradient(180deg, rgb(255 255 255 / 0.04), rgb(255 255 255 / 0.015));
}

@media (min-width: 640px) {
  .rdk-combo {
    padding: 1.75rem 2rem 2rem;
  }
}

/* ===================== Home: categorias com capas ===================== */
.rdk-cat-tiles {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 44%;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px;
  margin: -4px;
}

.rdk-cat-tiles::-webkit-scrollbar {
  display: none;
}

@media (min-width: 640px) {
  .rdk-cat-tiles {
    grid-auto-columns: calc((100% - 3 * 12px) / 4.3);
    gap: 12px;
  }
}

@media (min-width: 1024px) {
  .rdk-cat-tiles {
    grid-auto-flow: row;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    overflow: visible;
  }
}

.rdk-cat-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  height: 11.5rem;
  padding: 0.8rem 0.9rem;
  overflow: hidden;
  scroll-snap-align: start;
  border-radius: 1.1rem;
  border: 1px solid rgb(255 255 255 / 0.08);
  background: linear-gradient(180deg, rgb(var(--rdk-roxo) / 0.3), rgb(255 255 255 / 0.03) 75%);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.rdk-cat-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgb(11 10 14 / 0.95) 22%, transparent 62%);
  pointer-events: none;
}

.rdk-cat-tile:hover,
.rdk-cat-tile:focus-visible {
  border-color: rgb(var(--rdk-amarelo) / 0.6);
  transform: translateY(-2px);
}

/* As capas seguem a altura do bloco, assim nunca descem até o nome da categoria */
.rdk-cat-tile-capas {
  position: absolute;
  inset: 0.8rem 0 auto;
  height: calc(100% - 4.9rem);
}

.rdk-cat-tile-capas img {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 0.5rem;
  box-shadow: 0 10px 24px -8px rgb(0 0 0 / 0.85);
  transition: transform 0.25s ease;
}

.rdk-cat-tile-capas img:nth-child(1) {
  z-index: 3;
  transform: translateX(-50%);
}

.rdk-cat-tile-capas img:nth-child(2) {
  z-index: 2;
  transform: translateX(-108%) translateY(5%) rotate(-8deg);
}

.rdk-cat-tile-capas img:nth-child(3) {
  z-index: 2;
  transform: translateX(8%) translateY(5%) rotate(8deg);
}

.rdk-cat-tile:hover .rdk-cat-tile-capas img:nth-child(1) {
  transform: translateX(-50%) translateY(-4%);
}

.rdk-cat-tile:hover .rdk-cat-tile-capas img:nth-child(2) {
  transform: translateX(-120%) translateY(4%) rotate(-11deg);
}

.rdk-cat-tile:hover .rdk-cat-tile-capas img:nth-child(3) {
  transform: translateX(20%) translateY(4%) rotate(11deg);
}

.rdk-cat-tile-selo {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  padding: 0.2rem 0.75rem;
  border-radius: 0.9rem;
  border: 2px solid rgb(var(--rdk-amarelo) / 0.6);
  background-color: rgb(var(--rdk-amarelo) / 0.08);
  color: rgb(var(--rdk-amarelo));
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.2;
}

/* ===================== Pedido: capas dos jogos no topo ===================== */
.rdk-pedido-capas {
  position: relative;
  width: 15rem;
  height: 15rem;
}

.rdk-pedido-capa {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7.5rem;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 0.9rem;
  border: 1px solid rgb(255 255 255 / 0.15);
  box-shadow: 0 24px 50px -20px rgb(0 0 0 / 0.95);
}

.rdk-pedido-capa:nth-child(1) { z-index: 3; transform: translate(-50%, -50%) rotate(3deg); }
.rdk-pedido-capa:nth-child(2) { z-index: 2; transform: translate(-110%, -46%) rotate(-9deg) scale(0.92); }
.rdk-pedido-capa:nth-child(3) { z-index: 1; transform: translate(10%, -44%) rotate(12deg) scale(0.88); }

/* ===================== Histórico de pedidos ===================== */
.rdk-pedido-card {
  transition: border-color 0.2s ease;
}

.rdk-pedido-card:hover {
  border-color: rgb(255 255 255 / 0.16);
}

.rdk-hist-capas {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 7.5rem;
  min-width: 5rem;
}

.rdk-hist-capas > img,
.rdk-hist-sem-capa {
  width: 5rem;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 0.6rem;
  border: 1px solid rgb(255 255 255 / 0.12);
  box-shadow: 0 14px 30px -14px rgb(0 0 0 / 0.95);
  background-color: rgb(255 255 255 / 0.05);
}

.rdk-hist-capas > img + img {
  margin-left: -2.6rem;
}

.rdk-hist-capas > img:nth-child(2) { transform: rotate(6deg) translateY(-2px); }
.rdk-hist-capas > img:nth-child(3) { transform: rotate(12deg) translateY(-4px); }

.rdk-hist-sem-capa {
  display: grid;
  place-items: center;
  color: rgb(255 255 255 / 0.4);
}

.rdk-hist-mais {
  position: absolute;
  right: -0.4rem;
  bottom: -0.4rem;
  z-index: 5;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background-color: rgb(var(--rdk-amarelo));
  color: rgb(var(--rdk-preto));
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
}

/* ===================== Afiliados: painel ===================== */
.rdk-afi-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  overflow: hidden;
  padding: 1.5rem;
  border-radius: 1.75rem;
  border: 1px solid rgb(var(--rdk-roxo) / 0.45);
  background:
    radial-gradient(70% 120% at 100% 0%, rgb(var(--rdk-amarelo) / 0.16), transparent 60%),
    radial-gradient(90% 120% at 0% 100%, rgb(var(--rdk-roxo) / 0.55), transparent 65%),
    rgb(var(--card));
}

@media (min-width: 640px) {
  .rdk-afi-hero {
    padding: 2rem 2.25rem;
  }
}

.rdk-afi-hero-lado {
  position: relative;
  display: none;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .rdk-afi-hero-lado {
    display: flex;
  }
}

.rdk-afi-pct {
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: rgb(var(--rdk-amarelo));
  text-shadow: 0 10px 40px rgb(var(--rdk-amarelo) / 0.35);
}

.rdk-afi-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 34rem;
  padding: 0.4rem 0.4rem 0.4rem 0.9rem;
  border-radius: 0.9rem;
  border: 1px dashed rgb(255 255 255 / 0.25);
  background-color: rgb(0 0 0 / 0.3);
}

.rdk-afi-rede {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.25rem;
  padding: 0 0.85rem;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.12);
  background-color: rgb(255 255 255 / 0.05);
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.rdk-afi-rede:hover {
  border-color: rgb(var(--rdk-amarelo) / 0.6);
  background-color: rgb(var(--rdk-amarelo) / 0.08);
}

.rdk-afi-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 1024px) {
  .rdk-afi-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.rdk-afi-kpi {
  min-width: 0;
  padding: 1rem;
  border-radius: 1.1rem;
  border: 1px solid rgb(255 255 255 / 0.07);
  background-color: rgb(var(--card));
}

.rdk-afi-kpi-destaque {
  grid-column: span 2;
  border-color: rgb(var(--rdk-amarelo) / 0.35);
  background: linear-gradient(160deg, rgb(var(--rdk-amarelo) / 0.12), rgb(var(--card)) 60%);
}

/* No celular o destaque e o último card ocupam a linha toda; no PC ficam 2 linhas de 3 */
@media (max-width: 1023px) {
  .rdk-afi-kpi:last-child {
    grid-column: span 2;
  }
}

@media (min-width: 1024px) {
  .rdk-afi-kpi-destaque {
    grid-column: span 1;
  }
}

.rdk-afi-kpi-rotulo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgb(255 255 255 / 0.6);
}

.rdk-afi-kpi-valor {
  margin-top: 0.4rem;
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
}

.rdk-afi-kpi-destaque .rdk-afi-kpi-valor {
  font-size: 2.2rem;
  color: rgb(var(--rdk-amarelo));
}

.rdk-afi-kpi-sub {
  margin-top: 0.25rem;
  font-size: 0.72rem;
  color: rgb(255 255 255 / 0.5);
}

.rdk-afi-card {
  min-width: 0;
  padding: 1.1rem;
  border-radius: 1.25rem;
  border: 1px solid rgb(255 255 255 / 0.07);
  background-color: rgb(var(--card));
}

@media (min-width: 640px) {
  .rdk-afi-card {
    padding: 1.4rem;
  }
}

.rdk-afi-titulo {
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
}

.rdk-afi-grafico {
  position: relative;
  touch-action: pan-y;
}

.rdk-afi-dica {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  padding: 0.35rem 0.6rem;
  border-radius: 0.6rem;
  background-color: rgb(18 16 22 / 0.95);
  border: 1px solid rgb(255 255 255 / 0.12);
  font-size: 0.72rem;
  white-space: nowrap;
  pointer-events: none;
}

.rdk-afi-vazio {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: rgb(255 255 255 / 0.5);
}

.rdk-afi-barra {
  height: 0.6rem;
  border-radius: 999px;
  background-color: rgb(255 255 255 / 0.07);
  overflow: hidden;
}

.rdk-afi-barra-fina {
  height: 0.35rem;
}

.rdk-afi-barra-cheia {
  display: block;
  height: 100%;
  border-radius: 999px;
  background-color: rgb(var(--rdk-amarelo));
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.rdk-afi-barra-roxa {
  background-color: rgb(var(--rdk-roxo-claro));
}

.rdk-afi-semana {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.5rem;
  height: 11rem;
}

.rdk-afi-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  min-width: 0;
}

.rdk-afi-col-barra {
  width: 100%;
  max-width: 2.75rem;
  border-radius: 0.5rem 0.5rem 0.2rem 0.2rem;
  background-color: rgb(var(--rdk-roxo-claro) / 0.55);
  transition: height 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.rdk-afi-col-barra.is-melhor {
  background-color: rgb(var(--rdk-amarelo));
}

.rdk-afi-top {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .rdk-afi-top {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.rdk-afi-jogo {
  display: block;
  min-width: 0;
}

.rdk-afi-jogo-capa {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  background-color: rgb(255 255 255 / 0.05);
}

.rdk-afi-jogo-capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rdk-afi-jogo-pos {
  position: absolute;
  left: 0.35rem;
  top: 0.35rem;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background-color: rgb(var(--rdk-amarelo));
  color: rgb(var(--rdk-preto));
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
}

.rdk-afi-resultado {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem;
  border-radius: 0.8rem;
  border: 1px solid rgb(255 255 255 / 0.08);
  background-color: rgb(255 255 255 / 0.03);
}

.rdk-afi-linkcard {
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid rgb(255 255 255 / 0.08);
  background-color: rgb(255 255 255 / 0.025);
}

.rdk-afi-sim {
  border-color: rgb(var(--rdk-amarelo) / 0.3);
  background: radial-gradient(80% 140% at 100% 50%, rgb(var(--rdk-amarelo) / 0.1), transparent 60%), rgb(var(--card));
}

.rdk-afi-sim-resultado {
  min-width: 12rem;
  text-align: right;
}

.rdk-afi-range {
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(var(--rdk-amarelo)) var(--rdk-pct, 10%), rgb(255 255 255 / 0.1) var(--rdk-pct, 10%));
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.rdk-afi-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background-color: rgb(var(--rdk-amarelo));
  border: 4px solid #121016;
  box-shadow: 0 0 0 2px rgb(var(--rdk-amarelo) / 0.5);
}

.rdk-afi-range::-moz-range-thumb {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 999px;
  background-color: rgb(var(--rdk-amarelo));
  border: 4px solid #121016;
}

.rdk-afi-tx {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
}

.rdk-afi-tx:last-child {
  border-bottom: 0;
}

.rdk-afi-tx-jogo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  padding: 0.15rem 0.5rem 0.15rem 0.2rem;
  border-radius: 0.5rem;
  background-color: rgb(255 255 255 / 0.05);
  font-size: 0.75rem;
  color: rgb(255 255 255 / 0.75);
}

.rdk-afi-passo {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  background-color: rgb(var(--rdk-amarelo));
  color: rgb(var(--rdk-preto));
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .rdk-afi-barra-cheia,
  .rdk-afi-col-barra {
    transition: none;
  }
}

/* ===================== Afiliados: guia "como vender" ===================== */
.rdk-guia-canal {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.1rem;
  border-radius: 1.25rem;
  border: 1px solid rgb(255 255 255 / 0.07);
  background-color: rgb(var(--card));
}

.rdk-guia-icone {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.9rem;
}

.rdk-guia-lista {
  display: grid;
  gap: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.72);
}

.rdk-guia-lista > li {
  position: relative;
  padding-left: 1.3rem;
}

.rdk-guia-lista > li::before {
  content: '';
  position: absolute;
  left: 0.2rem;
  top: 0.55rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background-color: rgb(var(--rdk-amarelo));
}

.rdk-guia-lista-nao > li::before {
  background-color: rgb(248 113 113);
}

.rdk-guia-msg {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 1.1rem;
  border: 1px solid rgb(255 255 255 / 0.07);
  background-color: rgb(var(--card));
}

.rdk-guia-msg-titulo {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  font-weight: 600;
  color: rgb(var(--rdk-amarelo));
}

.rdk-guia-msg-texto {
  flex: 1;
  padding: 0.75rem 0.9rem;
  border-radius: 0.8rem 0.8rem 0.8rem 0.2rem;
  background-color: rgb(255 255 255 / 0.05);
  font-size: 0.92rem;
  line-height: 1.5;
}

.rdk-guia-roteiro {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.55rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgb(255 255 255 / 0.72);
  counter-reset: rdk-roteiro;
}

.rdk-guia-roteiro > li {
  position: relative;
  padding-left: 1.9rem;
  counter-increment: rdk-roteiro;
}

.rdk-guia-roteiro > li::before {
  content: counter(rdk-roteiro);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background-color: rgb(var(--rdk-roxo) / 0.6);
  font-size: 0.72rem;
  font-weight: 800;
}

.rdk-guia-roteiro strong {
  color: #fff;
}

/* ===================== Home: afiliados ===================== */
.rdk-afi-home {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.5rem;
  border-radius: 2rem;
  border: 1px solid rgb(var(--rdk-amarelo) / 0.3);
  background:
    radial-gradient(60% 120% at 100% 100%, rgb(var(--rdk-roxo) / 0.6), transparent 65%),
    radial-gradient(50% 90% at 0% 0%, rgb(var(--rdk-amarelo) / 0.14), transparent 60%),
    rgb(var(--card));
}

@media (min-width: 1024px) {
  .rdk-afi-home {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    padding: 2.5rem 3rem;
  }
}

.rdk-afi-canais {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.rdk-afi-canais > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 2rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  background-color: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.1);
  font-size: 0.78rem;
  font-weight: 700;
  color: rgb(255 255 255 / 0.8);
}

/* ===================== Home: blog =====================
   O primeiro artigo é grande; os outros viram linhas com capa pequena.
   No computador: 1 artigo deitado, 2 ou 3 lado a lado, 4 com lista ao lado. */
.rdk-blog-home {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

.rdk-blog-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid rgb(255 255 255 / 0.08);
  background-color: rgb(var(--card));
  transition: border-color 0.2s;
}

.rdk-blog-card:hover {
  border-color: rgb(var(--rdk-amarelo) / 0.45);
}

.rdk-blog-card:focus-visible {
  outline: 2px solid rgb(var(--rdk-amarelo));
  outline-offset: 3px;
}

.rdk-blog-capa {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  aspect-ratio: 40 / 21;
  overflow: hidden;
  background:
    radial-gradient(80% 100% at 50% 100%, rgb(var(--rdk-roxo) / 0.75), transparent 70%),
    #1c1236;
}

.rdk-blog-capa img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.rdk-blog-card:hover .rdk-blog-capa img {
  transform: scale(1.03);
}

.rdk-blog-capa .rdk-m {
  width: 30%;
}

.rdk-blog-corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  padding: 1rem 1.125rem 1.125rem;
}

.rdk-blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(255 255 255 / 0.55);
}

.rdk-blog-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.rdk-blog-meta svg {
  color: rgb(var(--rdk-amarelo));
}

.rdk-blog-titulo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.15;
  transition: color 0.2s;
}

.rdk-blog-card:hover .rdk-blog-titulo {
  color: rgb(var(--rdk-amarelo));
}

.rdk-blog-resumo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.65);
}

.rdk-blog-ler {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.25rem;
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(var(--rdk-amarelo));
}

/* Artigos depois do primeiro: linha com capa pequena */
.rdk-blog-card:not(:first-child) {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 1rem;
}

.rdk-blog-card:not(:first-child) .rdk-blog-capa {
  border-radius: 0.65rem;
}

.rdk-blog-card:not(:first-child) .rdk-blog-corpo {
  gap: 0.3rem;
  padding: 0 0.25rem 0 0;
}

.rdk-blog-card:not(:first-child) .rdk-blog-titulo {
  -webkit-line-clamp: 2;
  font-size: 1rem;
}

.rdk-blog-card:not(:first-child) .rdk-blog-resumo,
.rdk-blog-card:not(:first-child) .rdk-blog-ler {
  display: none;
}

@media (max-width: 1023px) {
  /* Na linha estreita só cabe a data */
  .rdk-blog-card:not(:first-child) .rdk-blog-meta > span + span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rdk-blog-capa img {
    transition: none;
  }
}

@media (min-width: 1024px) {
  .rdk-blog-home {
    gap: 1rem;
  }

  /* 1 artigo: capa à esquerda, texto à direita */
  .rdk-blog-home[data-qtd="1"] .rdk-blog-card {
    flex-direction: row;
  }

  .rdk-blog-home[data-qtd="1"] .rdk-blog-capa {
    width: 56%;
  }

  .rdk-blog-home[data-qtd="1"] .rdk-blog-corpo {
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem 2.25rem;
  }

  .rdk-blog-home[data-qtd="1"] .rdk-blog-titulo {
    font-size: 2rem;
    line-height: 1.05;
  }

  .rdk-blog-home[data-qtd="1"] .rdk-blog-resumo {
    -webkit-line-clamp: 4;
    font-size: 1rem;
  }

  .rdk-blog-home[data-qtd="1"] .rdk-blog-ler {
    margin-top: 0.5rem;
    font-size: 1rem;
  }

  /* 2 ou 3 artigos: cards iguais lado a lado */
  .rdk-blog-home[data-qtd="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rdk-blog-home[data-qtd="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rdk-blog-home:is([data-qtd="2"], [data-qtd="3"]) .rdk-blog-card {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-radius: 1.25rem;
  }

  .rdk-blog-home:is([data-qtd="2"], [data-qtd="3"]) .rdk-blog-capa {
    border-radius: 0;
  }

  .rdk-blog-home:is([data-qtd="2"], [data-qtd="3"]) .rdk-blog-corpo {
    gap: 0.5rem;
    padding: 1rem 1.125rem 1.125rem;
  }

  .rdk-blog-home:is([data-qtd="2"], [data-qtd="3"]) .rdk-blog-titulo {
    -webkit-line-clamp: 3;
    font-size: 1.25rem;
  }

  .rdk-blog-home:is([data-qtd="2"], [data-qtd="3"]) :is(.rdk-blog-resumo, .rdk-blog-ler) {
    display: -webkit-box;
  }

  .rdk-blog-home:is([data-qtd="2"], [data-qtd="3"]) .rdk-blog-ler {
    display: inline-flex;
  }

  /* 4 artigos: o mais novo grande, os outros 3 em lista ao lado */
  .rdk-blog-home[data-qtd="4"] {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-auto-rows: 1fr;
  }

  .rdk-blog-home[data-qtd="4"] .rdk-blog-card:first-child {
    grid-row: span 3;
  }

  .rdk-blog-home[data-qtd="4"] .rdk-blog-card:first-child .rdk-blog-titulo {
    font-size: 1.75rem;
    line-height: 1.1;
  }

  .rdk-blog-home[data-qtd="4"] .rdk-blog-card:not(:first-child) {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 1rem;
    padding: 0.625rem;
  }

  .rdk-blog-home[data-qtd="4"] .rdk-blog-card:not(:first-child) .rdk-blog-titulo {
    font-size: 1.125rem;
  }
}