/* ==========================================================================
   Home — destaque do topo e painel de notícias
   --------------------------------------------------------------------------
   Arquivo próprio, e não dentro do core.css, que já está a poucos KB do teto
   por arquivo da CentralCart. Passar do teto faz o arquivo parar de
   sincronizar em silêncio.

   Tudo aqui é CSS escrito à mão. O build do Tailwind deste tema só gera as
   classes que já encontra em algum lugar, e uma classe nova (ainda mais com
   prefixo de breakpoint) sai do bundle sem avisar.
   ========================================================================== */

.home-destaque {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

/* A partir daqui cabem o palco e o painel de notícias lado a lado. O painel
   ocupa as duas linhas da esquerda (produto e controles) e estica junto, para
   as bases baterem. Antes ele terminava 37px acima e o conjunto parecia
   desalinhado. */
@media (min-width: 1024px) {
  .home-destaque {
    grid-template-columns: minmax(0, 1fr) 296px;
    gap: 0 2rem;
  }

  .home-palco {
    grid-column: 1;
    grid-row: 1;
  }

  .home-controles {
    grid-column: 1;
    grid-row: 2;
  }

  .home-noticias {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
  }
}

/* ── Palco do produto em destaque ────────────────────────────────────────── */
.home-palco {
  position: relative;
  min-width: 0;
  /* Uma célula só: os três slides ficam empilhados nela. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* Todos os slides ocupam a MESMA célula, e a troca é por visibilidade, não
   por display. Com display, cada slide dimensionava o palco sozinho: o de
   elogios tem 54px a menos de texto (sem preço antigo e sem a linha do PIX),
   o palco encolhia e a arte subia 27px em relação aos outros. Empilhados, o
   palco fica sempre com a altura do maior e a arte não sai do lugar. */
.home-slide {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.home-slide.ativo {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.home-slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
}

@media (min-width: 640px) {
  .home-slide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 2rem;
  }
}

/* No celular a arte vem antes do texto: é ela que identifica o jogo de
   relance, e o bloco de preço fica logo acima do botão. */
.home-slide-arte {
  order: 1;
  display: block;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid #211d2e;
  background: #0c0a16;
  /* Proporção exata das imagens de produto desta loja: 616x353. Casando a
     caixa com elas, o `cover` não tem o que cortar e a arte aparece inteira.
     Com 3/2 a imagem era 1,745 contra 1,500 da caixa e perdia ~14% da
     largura, cortada nas duas laterais. O `cover` fica como rede de proteção
     para um produto que venha com imagem de outro tamanho. */
  aspect-ratio: 616 / 353;
}

.home-slide-arte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.home-slide-arte:hover img {
  transform: scale(1.03);
}

.home-slide-texto {
  order: 2;
  min-width: 0;
}

@media (min-width: 640px) {
  .home-slide-texto {
    order: 1;
  }
  .home-slide-arte {
    order: 2;
  }
}

.home-selo {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c452ff;
}

.home-slide-titulo {
  margin-top: 0.5rem;
  font-family: var(--font-outfit);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;
}

@media (min-width: 640px) {
  .home-slide-titulo {
    font-size: 2.5rem;
  }
}

.home-slide-titulo a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.home-slide-titulo a:hover {
  color: #bd42ff;
}

.home-slide-linha {
  margin-top: 0.75rem;
  max-width: 30rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #9ca3af;
}

.home-precos-antigos {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 1.25rem;
}

.home-preco-de {
  font-size: 0.875rem;
  color: #6f6885;
  text-decoration: line-through;
}

.home-off {
  font-size: 0.75rem;
  font-weight: 700;
  color: #c452ff;
  background: rgba(189, 66, 255, 0.12);
  border: 1px solid rgba(189, 66, 255, 0.3);
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
}

.home-preco {
  margin-top: 0.25rem;
  font-family: var(--font-outfit);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;
}

.home-pix {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #4ade80;
}

.home-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  height: 3rem;
  padding: 0 1.5rem;
  border-radius: 0.75rem;
  background: linear-gradient(90deg, #8b3cff, #bd42ff);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.home-cta:hover {
  opacity: 0.9;
}

.home-esgotado {
  display: inline-flex;
  align-items: center;
  height: 3rem;
  margin-top: 1.5rem;
  padding: 0 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid #2a2438;
  background: #14121d;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #6f6885;
}

/* ── Controles ───────────────────────────────────────────────────────────── */
.home-controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.home-seta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid #2a2438;
  background: #14121d;
  color: #9b95ad;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.home-seta:hover {
  border-color: rgba(189, 66, 255, 0.5);
  color: #ffffff;
}

.home-bolinhas {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.home-bolinha {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #2e2842;
  transition: background 0.25s ease, width 0.25s ease;
}

.home-bolinha.ativa {
  width: 1.25rem;
  background: #bd42ff;
}

/* ── Painel de notícias ──────────────────────────────────────────────────── */
.home-noticias {
  border: 1px solid #211d2e;
  border-radius: 1rem;
  background: linear-gradient(180deg, #16131f 0%, #121019 100%);
  padding: 1rem;
}

.home-noticias-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.home-noticias-titulo {
  font-family: var(--font-outfit);
  font-size: 1.125rem;
  font-weight: 700;
  color: #ffffff;
}

.home-noticias-vertodas {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: #9b95ad;
  text-decoration: none;
  transition: color 0.2s ease;
}

.home-noticias-vertodas:hover {
  color: #bd42ff;
}

.home-noticia {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.home-noticia:hover {
  background: rgba(189, 66, 255, 0.06);
  border-color: rgba(189, 66, 255, 0.32);
}

.home-noticia-capa {
  flex: 0 0 64px;
  width: 64px;
  height: 40px;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #0c0a16;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2a2438;
}

.home-noticia-capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-noticia-txt {
  min-width: 0;
  flex: 1;
}

.home-noticia-titulo {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: #e9e6f0;
  transition: color 0.2s ease;
}

.home-noticia:hover .home-noticia-titulo {
  color: #ffffff;
}

.home-noticia-tempo {
  display: block;
  margin-top: 0.1875rem;
  font-size: 10px;
  color: #6f6885;
}

/* ── Ordem no celular ───────────────────────────────────────────────────────
   Fica no fim do arquivo porque reescreve propriedades já definidas acima,
   com a mesma especificidade, e nesse empate vence quem vem depois.

   Sem coluna da direita, a grade segue a ordem do HTML e os controles caíam
   depois do painel de notícias, a 400px de distância do produto que eles
   controlam. Aqui eles voltam para logo abaixo do slide. */
@media (max-width: 1023px) {
  .home-palco {
    order: 1;
  }

  .home-controles {
    order: 2;
    /* O vão da grade já separa os blocos no celular. */
    margin-top: 0;
  }

  .home-noticias {
    order: 3;
  }
}

/* ── Proporção do destaque no desktop ───────────────────────────────────────
   A arte é o que vende o banner, então ela leva a maior parte da largura: o
   texto ganha uma coluna fixa de 300px e a arte fica com todo o resto. Na
   primeira versão as duas colunas eram quase iguais (370 contra 406) e a arte
   ficava pequena demais para o espaço que tinha. */
@media (min-width: 1024px) {
  .home-slide {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 2.5rem;
  }

}

/* ── Setas nas laterais ─────────────────────────────────────────────────────
   Só a partir de 1400px. O conteúdo tem no máximo 1200px de largura, e cada
   seta precisa de ~100px do lado de fora; abaixo disso elas não caberiam sem
   empurrar a página para o lado, então continuam na fileira de controles,
   junto das bolinhas. */
@media (min-width: 1400px) {
  .home-destaque {
    position: relative;
  }

  .home-seta {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    width: 2.75rem;
    height: 2.75rem;
  }

  .home-controles > .home-seta:first-child {
    left: -3.5rem;
  }

  .home-controles > .home-seta:last-child {
    right: -3.5rem;
  }
}

/* Título da página fora da tela. Classe própria em vez do `sr-only` do
   Tailwind porque o build deste tema só gera o que já encontra em uso, e uma
   utilitária pouco usada pode simplesmente não sair no bundle. */
.home-titulo-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Bolinhas centradas sob a ARTE, não sob o palco inteiro. Centradas no palco
   elas caíam no vão entre a coluna de texto e a imagem, parecendo tortas para
   a esquerda. O recuo é a largura da coluna de texto mais o vão, de modo que
   o espaço que sobra para os controles é exatamente o da arte. As setas nas
   laterais não são afetadas: acima de 1400px elas saem do fluxo. */
@media (min-width: 1024px) {
  .home-controles {
    padding-left: calc(300px + 2.5rem);
  }
}

/* ── Destaque no celular ────────────────────────────────────────────────────
   O bloco todo ocupava 960px numa tela de 812, então nem o destaque inteiro
   cabia de uma vez e as categorias só começavam a 1152px de rolagem. O corte
   é sempre no apoio, nunca no que vende: arte, nome do jogo, preço e botão
   ficam intactos. */
@media (max-width: 639px) {
  /* A frase de apoio sai. É o item mais caro em altura (48px mais 12 de
     margem) e o menos decisivo: quem chega já vê a arte e o nome do jogo.
     Para trazer de volta, basta apagar esta regra. */
  .home-slide-linha {
    display: none;
  }

  .home-slide-titulo {
    margin-top: 0.25rem;
    font-size: 1.5rem;
  }

  .home-precos-antigos {
    margin-top: 0.75rem;
  }

  /* Preço e "à vista no PIX" na mesma linha: eles se completam e não
     precisavam de uma linha cada. */
  .home-preco,
  .home-pix {
    display: inline-block;
  }

  .home-pix {
    margin-left: 0.5rem;
  }

  .home-cta {
    margin-top: 1rem;
    /* Botão da largura da tela: alvo de toque maior e leitura mais direta
       que um botão solto no meio do bloco. */
    display: flex;
    justify-content: center;
    width: 100%;
  }

  /* Três notícias em vez de quatro. A quarta empurrava as categorias e os
     produtos para ainda mais longe do topo. */
  .home-noticia:nth-of-type(4) {
    display: none;
  }
}

/* ── Aproveitamento da primeira tela no celular ─────────────────────────────
   O painel de notícias em pé ocupava 277px logo abaixo do destaque e jogava
   as categorias populares para 941px de rolagem: quem abria a loja não via
   nenhum sinal de que havia mais coisa embaixo. Aqui ele vira uma faixa que
   corre para o lado, o mesmo padrão que a fileira de categorias já usa nesta
   home. Nenhum link é perdido, e a altura cai para cerca de um terço. */
@media (max-width: 639px) {
  .home-secao {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .home-destaque {
    gap: 1rem;
  }

  .home-noticias {
    padding: 0.875rem 0 0.875rem 0.875rem;
  }

  .home-noticias-topo {
    padding-right: 0.875rem;
  }

  .home-noticias-lista {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-right: 0.875rem;
    /* Barra de rolagem escondida: no celular ela não é usada e só suja a
       faixa. O arrasto continua funcionando. */
    scrollbar-width: none;
  }

  .home-noticias-lista::-webkit-scrollbar {
    display: none;
  }

  .home-noticia {
    flex: 0 0 15rem;
    scroll-snap-align: start;
    border-color: #211d2e;
    background: #0f0d18;
  }

  /* Com a faixa deitada cabem as quatro de novo: elas não custam mais altura,
     só mais rolagem para o lado. */
  .home-noticia:nth-of-type(4) {
    display: flex;
  }
}

/* ── Informação dentro do banner, no celular ────────────────────────────────
   A arte e o texto passam a ocupar a MESMA célula da grade, e o texto se
   ancora no rodapé dela por cima de um degradê. É o que economiza altura: o
   bloco de informação deixa de somar e passa a dividir espaço com a imagem.

   A arte fica em 4/3 e não na proporção original. Deitada, ela daria 178px de
   altura e a sobreposição cobriria o banner inteiro, que é o defeito que o
   exemplo da Nuuvem tem. Em 4/3 ela sobe para ~233px, ao custo de um corte de
   12% em cada lado. O `object-position` puxa o enquadramento um pouco para
   cima, onde costuma estar o personagem. */
@media (max-width: 639px) {
  .home-slide {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .home-slide-arte {
    grid-area: 1 / 1;
    aspect-ratio: 4 / 3;
  }

  .home-slide-arte img {
    object-position: center 35%;
  }

  .home-slide-texto {
    grid-area: 1 / 1;
    align-self: end;
    z-index: 1;
    /* Duas colunas: a informação à esquerda e o botão à direita, na mesma
       altura. Empilhados, eles sozinhos passavam de 100px. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 0.75rem;
    padding: 2rem 0.875rem 0.875rem;
    border-radius: 0 0 1rem 1rem;
    background: linear-gradient(
      to top,
      rgba(8, 6, 16, 0.96) 40%,
      rgba(8, 6, 16, 0.78) 70%,
      rgba(8, 6, 16, 0) 100%
    );
  }

  .home-selo,
  .home-slide-titulo {
    grid-column: 1 / -1;
  }

  .home-slide-titulo {
    margin-top: 0.125rem;
    font-size: 1.25rem;
  }

  .home-precos-antigos {
    grid-column: 1;
    margin-top: 0.5rem;
  }

  .home-preco {
    grid-column: 1;
    margin-top: 0;
    font-size: 1.5rem;
  }

  .home-pix {
    grid-column: 1;
    margin-left: 0.375rem;
  }

  .home-cta,
  .home-esgotado {
    grid-column: 2;
    grid-row: 3 / span 3;
    align-self: end;
    width: auto;
    margin-top: 0;
    height: 2.75rem;
    padding: 0 1rem;
  }
}

/* Aperto fino da sobreposição. Na primeira medição ela cobria 72% do banner e
   sobravam 65px de arte, o mesmo problema do exemplo que serviu de
   referência. Aqui a arte sobe para 5/4 e o bloco perde o que não é
   essencial: o "à vista no PIX" sai (o preço já é a mensagem, e a forma de
   pagamento aparece na página do produto) e o degradê do topo encolhe. */
@media (max-width: 639px) {
  .home-slide-arte {
    aspect-ratio: 5 / 4;
  }

  .home-slide-texto {
    padding-top: 1.25rem;
  }

  .home-slide-titulo {
    font-size: 1.125rem;
  }

  .home-pix {
    display: none;
  }
}

/* ── Etiqueta da notícia ─────────────────────────────────────────────────────
   Uma cor por assunto, para o olho separar os tipos de post sem precisar ler.
   O texto vem do Liquid, que deduz o assunto pelas palavras do título. */
.home-noticia-tag {
  display: block;
  margin-bottom: 0.125rem;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9b95ad;
}

.home-noticia-tag.tag-lancamento { color: #c452ff; }
.home-noticia-tag.tag-atualizacao { color: #60a5fa; }
.home-noticia-tag.tag-promocao { color: #fb923c; }
.home-noticia-tag.tag-esports { color: #4ade80; }
.home-noticia-tag.tag-guia { color: #38bdf8; }
.home-noticia-tag.tag-novidade { color: #a78bfa; }

/* A etiqueta acrescentou uma linha por notícia e o painel passou a ser mais
   alto que o palco somado aos controles. Como ele ocupa as duas linhas da
   esquerda, a sobra ia para a linha dos controles e as bases desencontravam
   de novo. Ancorando os controles no fim da linha, elas voltam a bater. */
@media (min-width: 1024px) {
  .home-controles {
    align-self: end;
  }
}

/* ── Slide de conteúdo (sem preço) ──────────────────────────────────────────
   Nos slides de produto o botão divide a linha com o preço, no celular. Aqui
   não há preço, então ele ocupa a linha inteira; sem isso ficaria encostado
   na direita com um vazio do lado esquerdo. A frase de apoio, que some nos
   slides de produto, aqui fica: nesse slide é ela que diz do que se trata. */
@media (max-width: 639px) {
  .home-slide-conteudo .home-slide-linha {
    grid-column: 1 / -1;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    /* Uma linha só. Com duas, a sobreposição ia a 67% da arte, contra 52%
       dos slides de produto, e o banner sumia atrás do texto. */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Prefixo do preço no slide de conteúdo. O valor sai do menor preço da
   categoria, então a frase precisa dizer "a partir de" em vez de fingir que
   é preço único. */
.home-preco-desde {
  display: block;
  font-family: var(--font-inter);
  font-size: 0.8125rem;
  font-weight: 500;
  color: #9ca3af;
  margin-bottom: 0.125rem;
}

/* No celular o prefixo do preço não pode roubar altura da arte. */
@media (max-width: 639px) {
  .home-preco-desde {
    font-size: 0.6875rem;
    margin-bottom: 0;
  }
}

/* No slide de conteúdo o botão dividia a linha com o preço reservando três
   fileiras da grade, número herdado dos slides de produto, que têm preço
   antigo, preço e PIX. Aqui só existem a frase e o preço, então sobravam três
   fileiras vazias e a sobreposição ia a 76% da arte. Com duas, cai para ~56%. */
@media (max-width: 639px) {
  .home-slide-conteudo .home-cta {
    grid-row: 3 / span 2;
  }
}

/* Posição explícita de cada peça no slide de conteúdo. Deixar o encaixe
   automático resolver não funcionou: mesmo com o botão ocupando duas
   fileiras, o navegador continuava criando uma a mais e a sobreposição não
   descia de 76%. Com as quatro fileiras nomeadas, não sobra nenhuma. */
@media (max-width: 639px) {
  .home-slide-conteudo .home-selo {
    grid-row: 1;
  }

  .home-slide-conteudo .home-slide-titulo {
    grid-row: 2;
  }

  .home-slide-conteudo .home-slide-linha {
    grid-row: 3;
    grid-column: 1;
  }

  .home-slide-conteudo .home-preco {
    grid-row: 4;
    grid-column: 1;
  }

  .home-slide-conteudo .home-cta {
    grid-row: 3 / span 2;
    grid-column: 2;
  }
}

/* Respiro antes do preço no slide de conteúdo. Nos slides de produto esse
   espaço vem do bloco de preço antigo, que fica acima e tem 1,25rem de
   margem. Sem preço antigo, o valor subia e encostava no subtítulo. */
@media (min-width: 640px) {
  .home-slide-conteudo .home-preco {
    margin-top: 1.25rem;
  }
}

/* O palco só entrega a rolagem vertical ao navegador; o gesto horizontal fica
   com o carrossel. Sem isso, arrastar para o lado podia disparar o "voltar"
   do navegador em vez de trocar o slide. */
.home-palco {
  touch-action: pan-y;
}