/*
 * GARIMPAÍ — ESTILOS EXCLUSIVOS DA PÁGINA INICIAL
 * ================================================
 *
 * Por que este arquivo existe
 * ---------------------------
 * `garimpai.css` é o bundle Tailwind JÁ COMPILADO pela versão React, com
 * purge feito a partir do JSX. Ele não pode ser regerado aqui: o projeto PHP
 * não tem Node, nem tailwind.config, nem pipeline de build. Na prática,
 * QUALQUER classe utilitária que não estivesse no JSX original simplesmente
 * não existe no CSS e o visual quebra em silêncio.
 *
 * Por isso a home não depende de utilitários Tailwind novos: tudo aqui é CSS
 * escrito à mão, com prefixo `gp-`, carregado SOMENTE na página inicial (ver
 * `$styles` em app/Views/layouts/site.php). Nenhuma outra página é afetada e
 * nenhuma regra global é redefinida.
 *
 * As cores reaproveitam as variáveis que o bundle já define em :root
 * (--accent, --primary, --border…), então a identidade vem de uma fonte só.
 */

.gp-home {
  /* Azuis da referência aprovada, derivados do azul-marinho da marca. */
  --gp-navy-900: #04101f;
  --gp-navy-850: #061829;
  --gp-navy-800: #082039;
  --gp-navy-700: #0d2b4b;
  --gp-navy-600: #12395f;

  --gp-gold: hsl(var(--accent));          /* 42 96% 52% */
  --gp-ink: #ffffff;
  --gp-ink-70: rgb(255 255 255 / 0.72);
  --gp-ink-55: rgb(255 255 255 / 0.56);
  --gp-line: rgb(255 255 255 / 0.10);

  --gp-display: Manrope, ui-sans-serif, system-ui, sans-serif;
}

/*
 * FAIXA BRANCA ANTES DO RODAPÉ.
 *
 * O wrapper da página é `min-h-screen flex flex-col` com `<main class="flex-1">`.
 * Numa página curta (catálogo vazio, por exemplo) o main ESTICA para preencher
 * a janela, e essa sobra — que fica depois da última seção — mostrava o
 * `bg-background` claro entre a newsletter e o rodapé.
 *
 * Aqui a sobra passa a ter a cor da newsletter, que é a última seção. Nada é
 * escondido e a classe só é aplicada na home (ver HomeController).
 */
.gp-main {
  background: hsl(var(--primary));
}

/* Trilho horizontal único, para hero, categorias e benefícios ficarem
   alinhados entre si e com o cabeçalho/rodapé do site. */
.gp-shell {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .gp-shell { padding-inline: 1.5rem; }
}

@media (min-width: 1024px) {
  .gp-shell { padding-inline: 2rem; }
}

/* Foco visível e consistente em tudo que é interativo na home. */
.gp-home a:focus-visible,
.gp-home button:focus-visible,
.gp-home input:focus-visible {
  outline: 2px solid var(--gp-gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ========================================================================
   1. HERO
   ===================================================================== */

.gp-hero {
  position: relative;
  overflow: hidden;
  color: var(--gp-ink);
  background:
    radial-gradient(58% 75% at 76% 32%, rgb(28 84 156 / 0.45) 0%, transparent 62%),
    radial-gradient(85% 60% at 100% 0%, hsl(var(--accent) / 0.10) 0%, transparent 55%),
    linear-gradient(180deg, var(--gp-navy-850) 0%, var(--gp-navy-800) 52%, var(--gp-navy-850) 100%);
}

/* Textura sutil; puramente decorativa. */
.gp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px);
  background-size: 22px 22px;
}

.gp-hero__inner {
  position: relative;
  display: grid;
  gap: 1.25rem;
  align-items: center;
  padding-block: 1.75rem;
}

.gp-hero__copy { min-width: 0; }

.gp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid hsl(var(--accent) / 0.45);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gp-gold);
  background: hsl(var(--accent) / 0.08);
}

.gp-badge svg { width: 0.875rem; height: 0.875rem; }

.gp-hero__title {
  margin: 0.9rem 0 0;
  font-family: var(--gp-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 4.6vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--gp-ink);
  /* Cada frase numa linha quando cabe; quando não cabe, quebra equilibrada
     em vez de deixar palavra órfã. */
  text-wrap: balance;
}

/* Segunda linha do título, em amarelo, como na referência. */
.gp-hero__title b {
  display: block;
  font-weight: 800;
  color: var(--gp-gold);
}

.gp-hero__lead {
  margin: 0.85rem 0 0;
  max-width: 34rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--gp-ink-70);
}

/* ------------------------------------------------------------ busca */

.gp-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 34rem;
  margin-top: 1.25rem;
  padding: 0.4rem 0.4rem 0.4rem 1rem;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.28);
}

.gp-search__icon {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  color: hsl(var(--primary) / 0.55);
}

.gp-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  padding-block: 0.6rem;
  font-size: 0.95rem;
  color: hsl(var(--foreground));
}

.gp-search__input::placeholder { color: hsl(var(--muted-foreground)); }

.gp-search__button {
  flex: none;
  min-height: 2.75rem;
  padding-inline: 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--gp-gold);
  color: hsl(var(--accent-foreground));
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.gp-search__button:hover { filter: brightness(1.06); }
.gp-search__button:active { transform: scale(0.98); }

/* --------------------------------------------- faixa de marketplaces */

/*
 * APENAS APRESENTAÇÃO: são os três marketplaces que o site já cobre
 * (app/Config/site.php). Nenhuma integração nova está implicada — Amazon e
 * Shopee seguem sem importação.
 *
 * Os PNG têm a MESMA altura de tela e os logos já vêm na proporção correta
 * entre si (ver tests/tools/make_marketplace_logos.ps1), então uma única
 * altura no CSS reproduz o equilíbrio do arquivo de referência.
 */
.gp-markets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2.5rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.gp-markets__item {
  display: inline-flex;
  align-items: center;
}

.gp-markets__item img {
  display: block;
  height: 2.4rem;
  width: auto;
}

/* Reserva: sem o arquivo PNG, o nome aparece como texto. */
.gp-markets__nome {
  font-family: var(--gp-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: rgb(165 186 212 / 0.85);
}

/* ------------------------------------------------- composição visual */

/*
 * ARTE DO HERO.
 *
 * `.gp-art__asset` é o caminho definitivo: uma arte ÚNICA, com transparência,
 * em assets/img/hero/composicao.(webp|png). Assim que o arquivo existir, a
 * view passa a usá-lo automaticamente.
 *
 * `.gp-art` é a composição provisória enquanto a arte não chega: halo, pódio e
 * ícones de produto. Não usa foto do catálogo dentro de moldura branca e não
 * tenta imitar a arte aprovada — é um lugar reservado assumido.
 */
.gp-art__asset {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
  margin-inline: auto;
}

.gp-art {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 320px;
  margin-inline: auto;
}

.gp-art__glow {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 46%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, hsl(var(--accent) / 0.88) 0%, hsl(var(--accent) / 0.7) 55%, hsl(var(--accent) / 0) 73%);
}

.gp-art__stage {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 66%;
  height: 15%;
  translate: -50% 0;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gp-navy-600), var(--gp-navy-800));
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.45);
}

/* Ícones soltos sobre o pódio: sem caixa, sem moldura. */
.gp-art__item {
  position: absolute;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 12px 24px rgb(3 10 22 / 0.55));
}

.gp-art__item svg {
  width: 100%;
  height: 100%;
}

/* Quatro objetos apoiados na linha do pódio, em tamanhos decrescentes —
   leitura de "produtos em exposição", não de ícone centralizado. */
.gp-art__item--1 { left: 11%;  bottom: 24%; width: 27%; aspect-ratio: 1; color: #cfe1f7; }
.gp-art__item--2 { left: 41%;  bottom: 28%; width: 19%; aspect-ratio: 1; color: #ffffff; z-index: 2; }
.gp-art__item--3 { right: 13%; bottom: 24%; width: 18%; aspect-ratio: 1; color: #cfe1f7; z-index: 3; }
.gp-art__item--4 { right: 19%; top: 9%;     width: 14%; aspect-ratio: 1; color: hsl(var(--accent)); }

/* ========================================================================
   2. CATEGORIAS — ÍCONES COLORIDOS, EXCLUSIVOS DESTA PÁGINA
   ===================================================================== */

/*
 * IMPORTANTE: estes ícones coloridos valem SÓ NA HOME. As páginas de
 * categoria, /categorias e o painel continuam usando as imagens e os ícones
 * cadastrados no banco — nada aqui os substitui.
 */
.gp-cats {
  position: relative;
  background: linear-gradient(180deg, var(--gp-navy-850) 0%, var(--gp-navy-900) 100%);
  border-top: 1px solid var(--gp-line);
}

.gp-cats__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 1.25rem 0 1.5rem;
  list-style: none;
}

.gp-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  height: 100%;
  padding: 0.9rem 0.6rem 1rem;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--gp-line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.02));
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.gp-cat:hover {
  border-color: hsl(var(--accent) / 0.5);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.03));
  transform: translateY(-2px);
}

/*
 * Ícone SOLTO, sem chapa atrás: é o que a referência mostra, e some o
 * "quadrado dentro do quadrado" que deixava o desenho pequeno demais.
 */
.gp-cat__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--gp-cat-fg, #fff);
}

.gp-cat__icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.7;
}

/* Cabide de "Moda": ícone desenhado à mão em app/Views/pages/home.php, porque
   o lucide 0.469 do projeto não tem esse desenho e Icons.php é gerado. Herda
   tamanho e cor da regra acima; o traço é um pouco mais grosso para equilibrar
   com os ícones do lucide, que têm mais massa. */
.gp-icone-cabide { stroke-width: 1.9; }

.gp-cat__name {
  font-family: var(--gp-display);
  font-weight: 800;
  font-size: 0.85rem;
  line-height: 1.25;
  color: var(--gp-ink);
}

.gp-cat__hint {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--gp-ink-55);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Paleta por atalho — só a home usa estas cores. */
.gp-cat--ofertas    { --gp-cat-fg: #fb8b3c; }
.gp-cat--tecnologia { --gp-cat-fg: #5aa6ff; }
.gp-cat--casa       { --gp-cat-fg: #3ed97f; }
.gp-cat--moda       { --gp-cat-fg: #e879f9; }
.gp-cat--games      { --gp-cat-fg: #a78bfa; }
.gp-cat--todas      { --gp-cat-fg: #38bdf8; }

/* ========================================================================
   3. SEÇÕES CLARAS (achados em destaque, ofertas)
   ===================================================================== */

.gp-light {
  background:
    radial-gradient(70% 50% at 50% 0%, hsl(215 72% 40% / 0.07) 0%, transparent 60%),
    linear-gradient(180deg, #eef4fb 0%, #ffffff 40%);
}

.gp-section { padding-block: 2rem 2.5rem; }

.gp-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.gp-section__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-family: var(--gp-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
  color: hsl(var(--foreground));
}

.gp-section__title svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  color: #f97316;
}

.gp-section__sub {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  color: hsl(var(--muted-foreground));
}

.gp-section__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: hsl(var(--primary));
  text-decoration: none;
}

.gp-section__link:hover { text-decoration: underline; }
.gp-section__link svg { width: 1rem; height: 1rem; color: hsl(var(--accent)); }

/* ========================================================================
   4. CARD DE PRODUTO — VARIANTE EXCLUSIVA DA HOME
   ===================================================================== */

/*
 * A apresentação é outra, os DADOS e as REGRAS são os mesmos: ver
 * app/Views/partials/product-card-home.php. O card compartilhado
 * (partials/product-card) continua valendo nas demais páginas.
 */
.gp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.gp-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  box-shadow: 0 1px 2px rgb(13 23 38 / 0.04), 0 8px 24px rgb(13 23 38 / 0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.gp-card:hover {
  box-shadow: 0 6px 16px rgb(13 23 38 / 0.09), 0 18px 40px rgb(13 23 38 / 0.08);
  transform: translateY(-2px);
}

/*
 * `contain` mostra o produto INTEIRO: as fotos dos marketplaces vêm em
 * enquadramentos muito diferentes e `cover` cortava parte do produto.
 * O respiro interno evita que a foto encoste na borda do card.
 */
.gp-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f5f8fc;
  border-bottom: 1px solid hsl(var(--border) / 0.7);
}

/*
 * A imagem é posicionada de forma ABSOLUTA de propósito.
 *
 * Com `height: 100%` em fluxo normal, a porcentagem não resolve contra uma
 * altura que vem de `aspect-ratio` — o valor volta para `auto`, a foto assume
 * a altura natural e ESTICA o card. Era o que deixava os quatro cards com
 * alturas diferentes e sobrando espaço. Fora do fluxo, a caixa manda.
 *
 * O padding fica na própria imagem (box-sizing: border-box vem do bundle),
 * dando o respiro sem que a foto encoste na borda.
 */
.gp-card__media img,
.gp-card__noimage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0.85rem;
  object-fit: contain;
}

/* Sem imagem cadastrada: gradiente da categoria com a inicial. */
.gp-card__noimage {
  display: grid;
  place-items: center;
  font-family: var(--gp-display);
  font-size: 1.9rem;
  font-weight: 700;
  color: hsl(var(--foreground) / 0.3);
  background: linear-gradient(135deg, hsl(var(--cat-from, 215 40% 90%)), hsl(var(--cat-to, 42 60% 92%)));
}

/* Única etiqueta do card: o desconto, quando válido. */
.gp-card__discount {
  position: absolute;
  left: 0.6rem;
  top: 0.6rem;
  padding: 0.2rem 0.5rem;
  border-radius: 7px;
  background: var(--gp-gold);
  color: hsl(var(--accent-foreground));
  font-family: var(--gp-display);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.4;
  box-shadow: 0 2px 6px rgb(13 23 38 / 0.18);
}

.gp-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.75rem 0.85rem 0.85rem;
}

.gp-card__title {
  margin: 0;
  font-family: var(--gp-display);
  font-size: 0.87rem;
  font-weight: 700;
  line-height: 1.35;
}

.gp-card__title a {
  color: hsl(var(--foreground));
  text-decoration: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.gp-card__title a:hover { color: hsl(var(--primary)); }

.gp-card__rating {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  font-size: 0.78rem;
  color: hsl(var(--muted-foreground));
}

.gp-card__rating strong { color: hsl(var(--foreground)); font-weight: 700; }

.gp-card__star {
  width: 0.9rem;
  height: 0.9rem;
  flex: none;
  fill: hsl(var(--accent));
  color: hsl(var(--accent));
}

.gp-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0.15rem 0 0;
}

.gp-card__price s {
  font-size: 0.78rem;
  color: hsl(var(--muted-foreground));
}

.gp-card__price strong {
  font-family: var(--gp-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: hsl(var(--foreground));
}

.gp-card__foot {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: auto;
  padding-top: 0.7rem;
}

/* Logo do marketplace, no mesmo azul-acinzentado — escurecido só o
   necessário para ler sobre o branco do card. */
/* `align-self` impede que o logo estique: `.gp-card__foot` é flex em coluna e
   o padrão (stretch) esticaria a imagem para a largura toda do card. */
.gp-card__mp {
  display: block;
  align-self: flex-start;
  height: 1.05rem;
  width: auto;
  filter: brightness(0.72) saturate(1.1);
}

.gp-card__mp-nome {
  font-size: 0.72rem;
  font-weight: 700;
  color: hsl(var(--muted-foreground));
}

.gp-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: 10px;
  background: var(--gp-gold);
  color: hsl(var(--accent-foreground));
  font-family: var(--gp-display);
  font-size: 0.83rem;
  font-weight: 800;
  text-decoration: none;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.gp-card__cta:hover { filter: brightness(1.06); }
.gp-card__cta:active { transform: scale(0.99); }

/* Sem link de afiliado validado a ação principal é a página do produto. */
.gp-card__cta--ghost {
  background: transparent;
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
}

.gp-card__cta--ghost:hover {
  filter: none;
  background: hsl(var(--muted));
}

.gp-card__cta-arrow { width: 0.95rem; height: 0.95rem; flex: none; }

/* ========================================================================
   5. BENEFÍCIOS
   ===================================================================== */

.gp-benefits {
  background: linear-gradient(180deg, var(--gp-navy-900), var(--gp-navy-850));
  color: var(--gp-ink);
  border-top: 1px solid var(--gp-line);
}

.gp-benefits__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 1.9rem 0;
  list-style: none;
}

.gp-benefit {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.gp-benefit svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  margin-top: 0.1rem;
  color: var(--gp-gold);
}

.gp-benefit__title {
  margin: 0;
  font-family: var(--gp-display);
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--gp-ink);
}

.gp-benefit__text {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--gp-ink-55);
}

/* ========================================================================
   6. RESPONSIVO
   ===================================================================== */

/*
 * CELULAR (até 767px)
 *
 * A meta é chegar aos produtos rápido: hero enxuto, arte decorativa baixa,
 * seis atalhos em três colunas (duas fileiras) e imagem de card mais baixa.
 */
@media (max-width: 767px) {
  .gp-hero__inner { padding-block: 1.35rem 1.5rem; }
  .gp-hero__lead { font-size: 0.9rem; }

  /* A arte é decorativa: não pode tomar a primeira tela. */
  .gp-hero__art { order: 2; }
  .gp-art { max-height: 148px; aspect-ratio: 21 / 9; }
  .gp-art__asset { max-height: 170px; }
  .gp-art__item--4 { display: none; }

  /* Seis atalhos em 3 x 2. Sem a frase de apoio, que a essa largura viraria
     três linhas e deixaria os blocos desalinhados. */
  .gp-cats__grid { gap: 0.5rem; padding: 1rem 0 1.15rem; }
  .gp-cat { padding: 0.8rem 0.35rem 0.85rem; gap: 0.35rem; }
  .gp-cat__hint { display: none; }
  .gp-cat__icon { width: 2.15rem; height: 2.15rem; }
  .gp-cat__name { font-size: 0.78rem; }

  .gp-section { padding-block: 1.6rem 2rem; }
  .gp-section__head { margin-bottom: 1rem; }

  /* Card mais baixo: imagem menos alta e tipografia compacta. */
  .gp-card__media { aspect-ratio: 1 / 1; padding: 0.6rem; }
  .gp-card__body { padding: 0.6rem 0.65rem 0.7rem; }
  .gp-card__title { font-size: 0.8rem; }
  .gp-card__price strong { font-size: 1rem; }
  .gp-card__cta { font-size: 0.78rem; padding-inline: 0.6rem; }

  .gp-benefits__grid { padding: 1.5rem 0; gap: 1.1rem; }
}

@media (max-width: 639px) {
  /* Botão mais enxuto: sobra largura para o placeholder da busca. */
  .gp-search { padding-left: 0.85rem; }
  .gp-search__button { padding-inline: 1.1rem; font-size: 0.85rem; }

  /* Três logos na mesma linha, com folga menor. */
  .gp-markets { gap: 0.6rem 1.3rem; }
  .gp-markets__item img { height: 1.85rem; }
}

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

@media (min-width: 768px) {
  .gp-hero__inner { padding-block: 2.25rem; }
  .gp-hero__lead { font-size: 1rem; }
  .gp-cats__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .gp-hero__inner {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: 2.5rem;
    padding-block: 2.5rem 2.75rem;
  }
  .gp-cats__grid { gap: 0.75rem; padding: 1.5rem 0 1.9rem; }
  .gp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gp-benefits__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
  }
}

/* Respeita quem pediu menos animação. */
@media (prefers-reduced-motion: reduce) {
  .gp-cat,
  .gp-card,
  .gp-card__cta,
  .gp-search__button { transition: none; }
  .gp-cat:hover,
  .gp-card:hover { transform: none; }
}

/* Desconto verificável JUNTO DO PREÇO (2026-10-09): a foto do card fica limpa, sem selos sobre a imagem. */
.gp-card__desconto {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 6px;
  background: var(--gp-gold);
  color: hsl(var(--accent-foreground));
  font-family: var(--gp-display);
  font-size: 0.72rem;
  font-weight: 800;
  vertical-align: middle;
}