/* ==========================================================================
   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;
  }

  /* Loja ainda sem nenhum post: o painel nao existe e a coluna dele viraria
     uma faixa preta ao lado do destaque. Uma coluna so, e o palco ocupa a
     largura inteira. O componente poe esta classe sozinho. */
  .home-destaque-sem-noticias {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── 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: 0.5rem;
  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.5rem;
  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.5rem;
  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: 0.5rem;
  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 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background 0.2s ease;
}

/* Barra roxa que cresce na esquerda ao passar o mouse (no lugar da antiga caixa
   roxa com borda, que dava "cara de IA"). Acompanha um fundo neutro bem leve e
   o título clareando. */
.home-noticia::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 3px;
  height: 62%;
  border-radius: 999px;
  background: linear-gradient(180deg, #8b3cff, #bd42ff);
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  /* Estado normal = fechar RÁPIDO. Sem isto, ao trocar de card a barra sumia
     devagar e deixava um pontinho no card que o mouse já saiu. */
  transition: transform 0.14s ease;
}

.home-noticia:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Só ao entrar é que a barra cresce devagar (com o toque elástico). */
.home-noticia:hover::before {
  transform: translateY(-50%) scaleY(1);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.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;
}

/* ── Card de fundo do destaque (só desktop) ─────────────────────────────────
   Referência do Victor: o destaque inteiro (slides + bolinhas) dentro de um
   card, par do painel de Notícias. O card é o ::before da própria grade,
   ocupando a coluna 1 nas duas linhas (palco e controles), atrás de tudo via
   z-index -1 + isolation. Assim nem os slides nem o JS do carrossel mudam. */
@media (min-width: 1024px) {
  .home-destaque {
    isolation: isolate;
  }

  .home-destaque::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / span 2;
    z-index: -1;
    align-self: stretch;
    border: 1px solid #211d2e;
    border-radius: 0.5rem;
    background:
      radial-gradient(60% 80% at 0% 0%, rgba(189, 66, 255, 0.14), transparent 70%),
      linear-gradient(180deg, #16131f 0%, #100e18 100%);
    pointer-events: none;
  }

  .home-palco {
    padding: 2.25rem 2.25rem 0 2.75rem;
  }

  .home-controles {
    padding-left: calc(300px + 2.5rem + 2.75rem);
    padding-right: 2.25rem;
    padding-bottom: 1.25rem;
  }
}

/* Setas junto das bolinhas, embaixo da arte (estilo Apple). Nas laterais
   elas sempre acabavam em cima da arte ou da borda do card. Aqui elas voltam
   pro fluxo da fileira de controles, como já é abaixo de 1400px. */
@media (min-width: 1400px) {
  /* Arte maior sem mexer no card: o texto fica onde está (4rem da esquerda),
     e a arte ganha largura tirando folga da direita (2rem) e do vão
     texto|arte (1.5rem). ~340px -> ~388px a 1623 de tela. */
  .home-palco {
    padding-left: 4rem;
    padding-right: 2rem;
  }

  .home-slide {
    gap: 1.5rem;
  }

  .home-controles {
    padding-left: calc(300px + 1.5rem + 4rem);
    padding-right: 2rem;
  }

  /* Setas de volta nas laterais, na altura do meio do banner (o Victor
     preferiu assim a tê-las junto das bolinhas). Aparecem com o mouse sobre
     o destaque; em tela sem mouse ficam sempre visíveis. */
  .home-controles > .home-seta:first-child {
    left: 0.875rem;
  }

  .home-controles > .home-seta:last-child {
    right: calc(296px + 2rem + 0.25rem);
  }

  @media (hover: hover) {
    .home-controles > .home-seta:first-child {
      opacity: 0;
      transform: translate(6px, -50%);
    }

    .home-controles > .home-seta:last-child {
      opacity: 0;
      transform: translate(-6px, -50%);
    }

    .home-destaque:hover .home-controles > .home-seta,
    .home-controles > .home-seta:focus-visible {
      opacity: 1;
      transform: translateY(-50%);
    }
  }
}

@media (min-width: 1400px) {
  .home-destaque .home-controles > .home-seta:active {
    transform: translateY(-50%) scale(0.88);
  }
}

/* Visual das setas (todas as larguras de desktop): círculo translúcido sem
   borda, mola leve no clique. */
@media (min-width: 1024px) {
  .home-seta {
    width: 1.875rem;
    height: 1.875rem;
    border: 0;
    background: rgba(255, 255, 255, 0.07);
    color: #cfccda;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .home-seta:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
  }

  .home-controles > .home-seta:active {
    transform: scale(0.88);
    transition-duration: 0.1s;
  }
}

/* ── Baralho de artes (só desktop) ──────────────────────────────────────────
   Atrás da arte do slide atual aparecem as dos DOIS próximos, como cartas:
   giradas, deslocadas pra cima/direita e escurecidas, servindo de preview do
   que vem. O home-hero.js marca cada slide com data-pos (0 = frente, 1 e 2 =
   atrás, "fim" = a que acabou de sair) e `inert` nas de trás. Ao trocar, a
   carta 1 vem pra frente, a 2 vira 1, e a que saiu voa pra esquerda sumindo.
   No desktop todos os slides ficam "visíveis"; quem some é o texto (só o da
   frente aparece) e a arte das cartas fora do baralho (opacidade 0). */
@media (min-width: 1024px) {
  .home-slide {
    visibility: visible;
    opacity: 1;
    z-index: 0;
  }

  .home-slide.ativo { z-index: 3; }
  .home-slide[data-pos="1"] { z-index: 2; }
  .home-slide[data-pos="2"] { z-index: 1; }
  .home-slide[data-pos="fim"] { z-index: 4; }

  .home-slide:not(.ativo) .home-slide-texto {
    visibility: hidden;
    opacity: 0;
  }

  .home-slide-texto {
    transition: opacity 0.35s ease 0.1s;
  }

  .home-slide-arte {
    transform-origin: 50% 60%;
    opacity: 0;
    transform: translate(2.25rem, -1.75rem) rotate(9deg) scale(0.86);
    filter: brightness(0.35);
    transition:
      transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 0.45s ease,
      filter 0.45s ease,
      box-shadow 0.45s ease;
  }

  .home-slide.ativo .home-slide-arte {
    opacity: 1;
    transform: none;
    filter: none;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.7);
  }

  .home-slide[data-pos="1"] .home-slide-arte {
    opacity: 0.75;
    transform: translate(0.875rem, -0.75rem) rotate(3.5deg) scale(0.95);
    filter: brightness(0.5);
  }

  .home-slide[data-pos="2"] .home-slide-arte {
    opacity: 0.45;
    transform: translate(1.625rem, -1.375rem) rotate(7deg) scale(0.9);
    filter: brightness(0.38);
  }

  .home-slide[data-pos="fim"] .home-slide-arte {
    opacity: 0;
    transform: translate(-3.5rem, 0.75rem) rotate(-8deg) scale(0.92);
  }

  /* Cartas de trás interativas: o slide inteiro não captura o mouse (senão a
     caixa transparente do slide da frente cobriria a ponta das cartas), só
     o texto e a arte. Passar o mouse numa carta de trás puxa ela um pouco
     pra fora do baralho e clareia; clicar traz ela pra frente (home-hero.js). */
  .home-slide,
  .home-slide.ativo {
    pointer-events: none;
  }

  .home-slide.ativo .home-slide-texto,
  .home-slide.ativo .home-slide-arte,
  .home-slide[data-pos="1"] .home-slide-arte,
  .home-slide[data-pos="2"] .home-slide-arte {
    pointer-events: auto;
  }

  .home-slide[data-pos="1"] .home-slide-arte,
  .home-slide[data-pos="2"] .home-slide-arte {
    cursor: pointer;
  }

  .home-slide[data-pos="1"] .home-slide-arte:hover {
    opacity: 0.95;
    transform: translate(1.5rem, -1.5rem) rotate(5deg) scale(0.96);
    filter: brightness(0.8);
  }

  .home-slide[data-pos="2"] .home-slide-arte:hover {
    opacity: 0.85;
    transform: translate(2.5rem, -2.25rem) rotate(9deg) scale(0.92);
    filter: brightness(0.7);
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .home-slide-arte,
  .home-slide-texto {
    transition: opacity 0.2s ease;
  }
}

/* Bolinhas + setas centralizadas no CARD inteiro (Victor achou que ficavam
   muito pra direita centralizadas só sob a arte). */
@media (min-width: 1024px) {
  .home-controles,
  .home-controles[class] {
    padding-left: 0;
    padding-right: 0;
  }
}