/*! ==========================================================================
  AQN Ofertas: páginas renderizadas no servidor (api/_lib/html.js e html-preco.js): /ofertas/ (e por loja e categoria), /cupons/ (e por loja),
  /preco/ (índice e histórico de cada produto), /sobre/ e as páginas de erro dessas rotas. CSS puro, sem build.
  Vem DEPOIS de assets/site.css: cabeçalho, rodapé e botões (.btn, .btn-wa) usam as classes da vitrine (compiladas lá);
  tudo o que é só destas páginas está aqui. Estruturas novas levam o prefixo .pg-. Os nomes da marcação antiga (.of, .selo, .nome, .tag, .preco, .comprar,
  .cupom, .codigo, .faq, .texto, .grade, .mig, .nota, .sub, .quando, .cta, .aviso, .legal, .vazio, .chip, .ver…) ficam porque scripts/testar-paginas.js lê
  a marcação por eles; não renomear sem mexer no teste.
  Mesma linguagem da home, das páginas legais (legal.css) e das de entrada (entrada.css), aprovadas em 10/10/2026: tokens --c-ink, --c-muted, --c-line,
  --c-wash, --c-page, --c-surface, --c-brandsoft (mudam no tema escuro, atributo data-theme) e os fixos brand #FFC400, night #18181B e wa #008069.
  Amarelo só como PREENCHIMENTO com texto night (11,1:1), nunca texto amarelo. Fonte única: Plus Jakarta Sans, pesos 500 e 700.

  ESCALA (a da vitrine): xs 12/16 · sm 14/20 · base 16/24 · lg 22/28 · xl 30 a 52 (só o h1). Espaço em escala de 4 e 8. Números com tabular-nums.

  ZOOM / PREENCHER A TELA (padrão do Fábio): o font-size do html NÃO é tocado (16px em qualquer janela); tudo em rem. O contêiner é o da vitrine: 80rem até
  1366px e, a partir daí, 93,7042vw. Ele é feito com padding lateral nas próprias seções (variável --pg-pad), então cada seção pode ter fundo de borda a borda.
  • ofertas: auto-fill 9,5rem (2 colunas fixas no celular) → 11rem → 13rem → 16,25rem a partir de 1366px (4 em 100%, 5 em 75%, 8 em 50%, como a vitrine);
  • cupons: 1 coluna no celular, auto-fill 17rem → 20,625rem a partir de 1366px (3 em 100%, 4 em 75%);
  • textos: colunas CSS de 26rem (cada coluna fica entre ~416 e ~620px, 40 a 70 caracteres por linha); a janela alarga ou o zoom diminui e entra coluna nova;
  • perguntas: 1 coluna; a partir de 1366px, auto-fill de 30rem; "Mais ofertas": colunas de 22rem;
  • histórico de um produto: gráfico e resumo em duas colunas a partir de 64rem, empilhados no celular;
  • faixa, fundos e rodapé vão de borda a borda; nada rola para o lado.

  ESTADOS: botões (normal · hover · foco · active · "copiado") · cartão de oferta (normal · hover · foco do botão) · cupom (normal · hover · copiado) · trilho
  (normal · hover · foco · página atual com traço de 2px) · pergunta (fechada · hover · foco · aberta) · tema claro/escuro. Movimento (máximo 2, como na home):
  faixa marquee e troca de tema, mais a abertura da resposta (resposta a um toque). Tudo para com prefers-reduced-motion.
========================================================================== */

/* fonte de reserva com a largura da Plus Jakarta Sans (medida em 11/10/2026 com o Arimo, que tem as métricas do Arial: a Plus Jakarta Sans é 3,9% mais larga que o Arial em 500 e 0,5% mais larga em 700).
   Enquanto a fonte da Google não chega, o texto ocupa o mesmo espaço e quase não muda de linha quando ela entra: sem isso a abertura pulava (CLS 0,18 no celular). */
@font-face { font-family: 'Plus Jakarta Sans Fallback'; font-weight: 500; src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Liberation Sans'), local('Arimo'); size-adjust: 103.9%; }
@font-face { font-family: 'Plus Jakarta Sans Fallback'; font-weight: 700; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('Helvetica-Bold'), local('Liberation Sans Bold'), local('Arimo Bold'); size-adjust: 100.5%; }
/* aparelhos sem Arial (Android): a mesma ideia com o Roboto (a Plus Jakarta Sans é 5,0% mais larga em 500 e 6,1% em 700) */
@font-face { font-family: 'Plus Jakarta Sans Fallback 2'; font-weight: 500; src: local('Roboto Medium'), local('Roboto-Medium'), local('Roboto'); size-adjust: 105%; }
@font-face { font-family: 'Plus Jakarta Sans Fallback 2'; font-weight: 700; src: local('Roboto Bold'), local('Roboto-Bold'); size-adjust: 106.1%; }
body.pg { font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback 2', system-ui, -apple-system, 'Segoe UI', sans-serif; }

:root { --pg-p: 1rem; --pg-max: 80rem; --pg-wa: #008069; --pg-wa-h: #006B58; --pg-brand: #FFC400; --pg-night: #18181B; }
@media (min-width: 768px) { :root { --pg-p: 1.5rem; } }
@media (min-width: 1024px) { :root { --pg-p: 2rem; } }
@media (min-width: 1366px) { :root { --pg-max: 93.7042vw; } }

html { scroll-padding-top: calc(var(--hdr) + 5rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.pg-main { display: block; }

/* contêiner: padding lateral que reproduz o max-w-page + px da vitrine, para a seção inteira poder ter fundo de borda a borda */
.pg-pad, .pg-main > * { padding-inline: calc(max(0px, (100% - var(--pg-max)) / 2) + var(--pg-p)); }
.pg-main > .hero-fundo, .pg-main > .pg-faixa { padding-inline: 0; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pg-ic { flex: none; width: 1rem; height: 1rem; }

/* ---------- trilho secundário (o trilho de categorias da home): lojas e áreas ---------- */
.pg-trilho { position: sticky; top: var(--hdr); z-index: 40; border-bottom: 1px solid rgb(var(--c-line)); background: rgb(var(--c-page)); }
.pg-trilho-in { position: relative; }
.pg-cats {
  display: flex; align-items: flex-end; gap: 0.25rem; margin: 0; list-style: none; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  padding: 0.5rem 0 0 calc(max(0px, (100% - var(--pg-max)) / 2) + var(--pg-p) - 0.75rem);
}
.pg-cats::-webkit-scrollbar { display: none; }
.pg-cats > li { flex: 0 0 auto; }
.pg-cats > li:last-child { padding-right: calc(var(--pg-p) + 0.5rem); }
.pg-cat {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; min-width: 4.25rem; padding: 0.5rem 0.75rem 0.75rem; border-radius: 1rem;
  color: rgb(var(--c-muted)); font-size: 0.75rem; line-height: 1rem; font-weight: 700; white-space: nowrap; text-decoration: none; transition: color 0.15s;
}
.pg-cat .pg-ic { width: 1.5rem; height: 1.5rem; }
.pg-logo { width: 1.5rem; height: 1.5rem; border-radius: 50%; object-fit: contain; background: #fff; box-shadow: 0 0 0 1px rgb(var(--c-line)); }
.pg-cat::after { content: ''; position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0; height: 0.125rem; border-radius: 999px; background: transparent; transition: background-color 0.15s; }
.pg-cat:hover { color: rgb(var(--c-ink)); }
.pg-cat[aria-current] { color: rgb(var(--c-ink)); }
.pg-cat[aria-current]::after { background: rgb(var(--c-ink)); }
.pg-fade { position: absolute; top: 0; bottom: 0; z-index: 2; width: 2.5rem; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.pg-fade.is-on { opacity: 1; }
.pg-fade-esq { left: 0; background: linear-gradient(to right, rgb(var(--c-page)), rgb(var(--c-page) / 0)); }
.pg-fade-dir { right: 0; background: linear-gradient(to left, rgb(var(--c-page)), rgb(var(--c-page) / 0)); }

/* ---------- abertura (o herói da home: caminho, título grande, frase, pílula do horário, cartão do grupo) ---------- */
.pg-abertura {
  padding-block: 1.5rem 2rem; text-align: center;
  background: radial-gradient(ellipse 60% 110% at 50% 0%, rgb(var(--c-brandsoft)) 0%, rgb(var(--c-brandsoft) / 0) 72%);
}
@media (min-width: 768px) { .pg-abertura { padding-block: 2.25rem 2.75rem; } }
@media (min-width: 1024px) { .pg-abertura { padding-block: 3.25rem 3.5rem; } }

.mig ol { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.125rem; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; line-height: 1.25rem; color: rgb(var(--c-muted)); }
.mig li { display: inline-flex; align-items: center; min-width: 0; }
.mig li + li::before {
  content: ''; flex: none; width: 1rem; height: 1rem; margin-right: 0.125rem; opacity: 0.7; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mig a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: 0.5rem; border-radius: 0.5rem; color: inherit; text-decoration: none; transition: color 0.15s; }
.mig a:hover { color: rgb(var(--c-ink)); text-decoration: underline; text-underline-offset: 0.25rem; }
.mig [aria-current='page'] { min-height: 2.75rem; padding-inline: 0.5rem; color: rgb(var(--c-ink)); font-weight: 700; overflow-wrap: anywhere; text-align: left; }

.pg-abertura h1 {
  margin: 0.25rem auto 0; max-width: 24ch; font-size: clamp(1.875rem, 4.6vw, 3.25rem); line-height: 1.06; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance;
}
.pg-abertura .sub { margin: 1rem auto 0; max-width: 56ch; font-size: 1rem; line-height: 1.5rem; color: rgb(var(--c-muted)); text-wrap: pretty; }
.quando {
  display: flex; align-items: flex-start; gap: 0.375rem; width: fit-content; max-width: 100%; margin: 1.25rem auto 0; padding: 0.375rem 0.75rem; border: 1px solid rgb(var(--c-line));
  border-radius: 1rem; background: rgb(var(--c-surface)); font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; text-align: left; font-variant-numeric: tabular-nums;
}
.quando .pg-ic { margin-top: 0.125rem; color: rgb(var(--c-muted)); }

/* a partir de 64rem a abertura vira duas colunas (texto à esquerda, cartão do grupo à direita): economiza altura e as ofertas já aparecem na primeira tela */
@media (min-width: 64rem) {
  .pg-abertura:not(.pg-abertura-erro) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); column-gap: 4rem; align-items: center; align-content: center; text-align: left; }
  .pg-abertura:not(.pg-abertura-erro) > * { grid-column: 1; }
  .pg-abertura:not(.pg-abertura-erro) > .pg-ficha { grid-column: 2; grid-row: 1 / span 4; align-self: center; max-width: none; margin: 0; }
  .pg-abertura:not(.pg-abertura-erro) .mig ol { justify-content: flex-start; margin-left: -0.5rem; }
  .pg-abertura:not(.pg-abertura-erro) h1 { margin-inline: 0; max-width: 26ch; font-size: clamp(2rem, 3.4vw, 3rem); }
  .pg-abertura:not(.pg-abertura-erro) .sub, .pg-abertura:not(.pg-abertura-erro) .quando { margin-inline: 0; }
}
@media (min-width: 2300px) { .pg-abertura:not(.pg-abertura-erro) { grid-template-columns: minmax(0, 1fr) 30rem; } }

/* cartão de destaque amarelo-claro (o da home e das páginas de entrada) com o botão verde do grupo */
.pg-ficha {
  display: flex; align-items: center; gap: 0.75rem; width: 100%; max-width: 30rem; margin: 1.5rem auto 0; padding: 1rem; text-align: left;
  border: 1px solid rgba(255, 196, 0, 0.6); border-radius: 1.5rem; background: rgb(var(--c-brandsoft));
}
@media (min-width: 768px) { .pg-ficha { gap: 1rem; padding: 1.25rem; } }
.pg-ficha-av { flex: none; width: 3.5rem; height: 3.5rem; margin: 0.25rem; border-radius: 50%; box-shadow: 0 0 0 0.125rem rgb(var(--c-brandsoft)), 0 0 0 0.25rem var(--pg-brand); }
.pg-ficha-corpo { flex: 1; min-width: 0; }
.pg-ficha-meio { max-width: 34rem; margin: 1.5rem 0 0; break-inside: avoid; column-span: all; }
.sobre .pg-ficha-meio { column-span: none; margin-top: 1.25rem; }
.cta {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; height: 3.5rem; padding: 0 1.25rem; border-radius: 999px;
  background: var(--pg-wa); color: #fff; text-decoration: none; font-size: 1rem; line-height: 1.5rem; font-weight: 700; white-space: nowrap; transition: background-color 0.15s, transform 0.15s;
}
.cta svg { flex: none; width: 1.5rem; height: 1.5rem; }
.cta:hover { background: var(--pg-wa-h); }
.cta:active { transform: scale(0.98); }
.aviso { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.25rem; color: rgb(var(--c-muted)); }
.aviso svg { flex: none; width: 1.25rem; height: 1.25rem; color: var(--pg-wa); }
[data-theme='dark'] .aviso svg { color: #34D399; }

/* ---------- faixa amarela inclinada (a assinatura da home) como divisor: só decoração ---------- */
.pg-faixa { overflow: hidden; padding-block: calc(1.25rem + 0.9vw); }
@media (min-width: 768px) { .pg-faixa { padding-block: calc(1.75rem + 0.9vw); } }
.pg-faixa-banda { margin-inline: -1rem; padding-block: 0.625rem; transform: rotate(-1deg); border-block: 0.25rem solid var(--pg-night); background: var(--pg-brand); color: var(--pg-night); }
.pg-faixa-trilho { display: flex; justify-content: center; width: 100%; }
.pg-faixa-trilho > ul + ul { display: none; }
.pg-faixa ul { display: flex; flex: none; align-items: center; margin: 0; padding: 0; list-style: none; }
.pg-faixa li { display: flex; align-items: center; padding-inline: 1.25rem; }
.pg-faixa-logo { width: 2rem; height: 2rem; border-radius: 50%; background: #fff; object-fit: contain; box-shadow: 0 0 0 0.125rem var(--pg-night); }
.pg-faixa-est svg { width: 1.25rem; height: 1.25rem; }
/* com JavaScript a lista se repete até cobrir a janela e corre devagar (paginas.js) */
.pg-faixa-trilho.anda { justify-content: flex-start; width: max-content; animation: pg-faixa 48s linear infinite; }
.pg-faixa-trilho.anda > ul + ul { display: flex; }
.pg-faixa-banda:hover .pg-faixa-trilho { animation-play-state: paused; }
@keyframes pg-faixa { to { transform: translateX(-50%); } }

/* ---------- vitrine: fundo cinza de borda a borda, como a da home ---------- */
.pg-vitrine { padding-block: 2.5rem 3rem; background: rgb(var(--c-wash)); }
@media (min-width: 768px) { .pg-vitrine { padding-block: 3.5rem 4.5rem; } }
.pg-vitrine + .pg-vitrine { padding-top: 0; }
.pg-vitrine:has(+ .pg-vitrine) { padding-bottom: 2.5rem; }
.pg-vitrine > h2 { margin: 0; font-size: 1.375rem; line-height: 1.75rem; letter-spacing: -0.01em; font-weight: 700; }
.nota { margin: 0.25rem 0 0; max-width: 72ch; font-size: 0.875rem; line-height: 1.25rem; color: rgb(var(--c-muted)); }
.nota a { color: rgb(var(--c-ink)); font-weight: 700; text-decoration: underline; text-underline-offset: 0.25rem; }

/* ---------- cartões de oferta (os da home: foto grande, selo, loja, preço de/por, botão escuro) ---------- */
.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .grade { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem; } }
@media (min-width: 64rem) { .grade { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1.5rem; } }
@media (min-width: 1366px) { .grade { grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr)); } }
.of {
  position: relative; display: flex; flex-direction: column; padding: 0.5rem; border: 1px solid rgb(var(--c-line) / 0.7); border-radius: 1.5rem; background: rgb(var(--c-surface));
  box-shadow: 0 0.125rem 0.75rem -0.25rem rgba(24, 24, 27, 0.06); transition: border-color 0.2s, box-shadow 0.2s;
}
@media (min-width: 40rem) { .of { padding: 0.75rem; } }
.of:hover { border-color: rgb(var(--c-strong)); box-shadow: 0 0.75rem 2rem -0.5rem rgba(24, 24, 27, 0.14); }
.of:has(.comprar:focus-visible) { outline: 0.125rem solid rgb(var(--c-ink)); outline-offset: 0.125rem; }
.of > article { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.foto { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 1rem; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
.foto img { width: 100%; height: 100%; object-fit: contain; padding: 0.75rem; }
.foto.logo img { padding: 2.25rem; }
.selo {
  position: absolute; top: 0.5rem; left: 0.5rem; z-index: 1; padding: 0.25rem 0.5rem; border-radius: 0.5rem; background: var(--pg-night); color: var(--pg-brand);
  font-size: 0.75rem; line-height: 1rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.nome {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.5rem; margin: 0.75rem 0.25rem 0;
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: rgb(var(--c-ink)); overflow-wrap: anywhere;
}
.tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.5rem 0.25rem 0; }
.tag {
  display: inline-flex; align-items: center; gap: 0.375rem; max-width: 100%; padding: 0.25rem 0.5rem; border-radius: 0.5rem; background: rgb(var(--c-wash)); color: rgb(var(--c-muted));
  font-size: 0.75rem; line-height: 1rem; font-weight: 500;
}
.pg-vitrine .tag { background: rgb(var(--c-wash)); }
.tag img { flex: none; width: 0.875rem; height: 0.875rem; border-radius: 50%; object-fit: contain; }
[data-theme='dark'] .tag img, [data-theme='dark'] .cupom header img { background: #fff; padding: 0.0625rem; }
.tag.cupom { background: rgb(var(--c-brandsoft)); color: rgb(var(--c-ink)); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255, 196, 0, 0.7); }
.tag.cupom .pg-ic { width: 0.875rem; height: 0.875rem; }
.preco { margin: auto 0.25rem 0; padding-top: 0.75rem; font-variant-numeric: tabular-nums; }
.preco s { display: block; min-height: 1rem; font-size: 0.75rem; line-height: 1rem; color: rgb(var(--c-muted)); }
.preco .ref { display: block; min-height: 1rem; font-size: 0.75rem; line-height: 1rem; color: rgb(var(--c-muted)); }
.preco b { display: block; font-size: 1.125rem; line-height: 1.5rem; font-weight: 700; }
@media (min-width: 40rem) { .preco b { font-size: 1.375rem; line-height: 1.75rem; } }
.comprar {
  display: flex; align-items: center; justify-content: center; min-height: 2.75rem; margin-top: 0.75rem; padding: 0.5rem 1rem; border-radius: 999px; background: rgb(var(--c-ink)); color: rgb(var(--c-onink));
  text-align: center; text-decoration: none; text-wrap: balance; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; transition: background-color 0.15s, transform 0.15s;
}
.comprar:hover { background: rgb(var(--c-inkhover)); }
.comprar:active { transform: scale(0.98); }
.of .comprar::after { content: ''; position: absolute; inset: 0; border-radius: 1.5rem; } /* o cartão inteiro é o alvo do toque (a foto e o nome abrem a oferta) */
.of .comprar:active { transform: none; }

/* ---------- cupons: cartão de ingresso, código em caixa tracejada ---------- */
.cupons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .cupons { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; } }
@media (min-width: 64rem) { .cupons { gap: 1.5rem; } }
@media (min-width: 1366px) { .cupons { grid-template-columns: repeat(auto-fill, minmax(20.625rem, 1fr)); } }
.cupom { border: 1px solid rgb(var(--c-line) / 0.7); border-radius: 1.5rem; background: rgb(var(--c-surface)); box-shadow: 0 0.125rem 0.75rem -0.25rem rgba(24, 24, 27, 0.06); transition: border-color 0.2s, box-shadow 0.2s; }
.cupom:hover { border-color: rgb(var(--c-strong)); box-shadow: 0 0.75rem 2rem -0.5rem rgba(24, 24, 27, 0.14); }
.cupom > article { display: flex; flex-direction: column; gap: 0.75rem; height: 100%; padding: 1.25rem; }
.cupom header { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; max-width: 100%; padding: 0.25rem 0.625rem 0.25rem 0.375rem; border-radius: 999px; background: rgb(var(--c-wash)); font-size: 0.75rem; line-height: 1rem; font-weight: 700; color: rgb(var(--c-muted)); }
.cupom header img { flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; object-fit: contain; background: #fff; }
.cupom h3 { margin: 0; font-size: 1.375rem; line-height: 1.75rem; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.cupom .reg { margin: -0.25rem 0 0; font-size: 0.875rem; line-height: 1.25rem; color: rgb(var(--c-muted)); overflow-wrap: anywhere; }
.codigo {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.5rem 0.5rem 1rem; border: 0.125rem dashed var(--pg-brand); border-radius: 1rem;
  background: rgb(var(--c-brandsoft));
}
.codigo code { font: 700 1.125rem/1.5rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.04em; overflow-wrap: anywhere; user-select: all; }
.codigo button {
  flex: none; min-width: 5.5rem; min-height: 2.75rem; padding: 0 1.25rem; border: 0; border-radius: 999px; background: rgb(var(--c-ink)); color: rgb(var(--c-onink));
  font: 700 0.875rem/1.25rem inherit; font-family: inherit; cursor: pointer; transition: background-color 0.15s, transform 0.15s;
}
.codigo button:hover { background: rgb(var(--c-inkhover)); }
.codigo button:active { transform: scale(0.97); }
.codigo button.copiado { background: var(--pg-wa); color: #fff; }
.cupom .abrir {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; min-height: 2.75rem; padding: 0.5rem 1rem; border: 1px solid rgb(var(--c-line)); border-radius: 999px;
  background: rgb(var(--c-surface)); color: rgb(var(--c-ink)); font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; text-align: center; text-decoration: none; transition: border-color 0.15s;
}
.cupom .abrir:hover { border-color: rgb(var(--c-ink)); }
.cupom .comprar { margin-top: auto; }
.cupom .hora { margin: auto 0 0; font-size: 0.75rem; line-height: 1rem; color: rgb(var(--c-muted)); font-variant-numeric: tabular-nums; }
.cupom .hora:empty { display: none; }
.cupom .codigo + .abrir, .cupom .abrir + .hora { margin-top: 0; }

/* seções de cupom por loja (cupons/ e cupons/<loja>/): empilhadas por padrão; com JavaScript e a partir de 40rem viram uma grade com as MESMAS colunas dos cartões, e cada seção
   ocupa as colunas que o script de html.js calcula (--span e grid-column): poucos cupons dividem a linha, muitos usam a largura toda. */
.pg-lojas { padding-block: 2.5rem 3rem; background: rgb(var(--c-wash)); }
@media (min-width: 768px) { .pg-lojas { padding-block: 3.5rem 4.5rem; } }
.pg-loja + .pg-loja { margin-top: 2.5rem; }
.pg-loja > h2 { margin: 0; font-size: 1.375rem; line-height: 1.75rem; letter-spacing: -0.01em; font-weight: 700; }
@media (min-width: 40rem) {
  .pg-lojas.em-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 2.5rem 1rem; align-items: start; }
  .pg-lojas.em-grade > .pg-loja { min-width: 0; margin-top: 0; } /* grid-column e --span vêm do script (html.js) */
  .pg-lojas.em-grade .cupons { grid-template-columns: repeat(var(--span, 1), minmax(0, 1fr)); }
}
@media (min-width: 64rem) { .pg-lojas.em-grade { column-gap: 1.5rem; } }
@media (min-width: 1366px) { .pg-lojas.em-grade { grid-template-columns: repeat(auto-fill, minmax(20.625rem, 1fr)); } }

.vazio {
  max-width: 46rem; margin-top: 1.5rem; padding: 1.25rem 1.5rem; border: 0.125rem dashed rgba(255, 196, 0, 0.8); border-radius: 1.5rem; background: rgb(var(--c-brandsoft));
}
.vazio p { margin: 0; font-size: 1rem; line-height: 1.5rem; }
.vazio p + p { margin-top: 0.5rem; }

/* ---------- texto corrido: colunas CSS, cada coluna com largura de leitura ---------- */
.texto, .pg-corpo { columns: 26rem; column-gap: 3rem; max-width: 42rem; } /* 1 coluna: no máximo ~72 caracteres por linha */
@media (min-width: 58rem) { .texto, .pg-corpo { max-width: none; } }
.texto { padding-block: 3rem 0.5rem; }
@media (min-width: 768px) { .texto { padding-block: 4.5rem 1rem; } }
.pg-corpo { padding-block: 3rem 0.5rem; }
@media (min-width: 768px) { .pg-corpo { padding-block: 4.5rem 1rem; } }
.texto h2 { column-span: all; margin: 0 0 1rem; max-width: 36rem; font-size: 1.375rem; line-height: 1.75rem; letter-spacing: -0.01em; font-weight: 700; text-wrap: balance; }
.texto p { margin: 0 0 1rem; font-size: 1rem; line-height: 1.6875rem; color: rgb(var(--c-muted)); overflow-wrap: break-word; orphans: 3; widows: 3; }
.texto p:last-child { margin-bottom: 0; }
.texto p a, .texto li a, .faq p a, .vazio a, .legal a, .contato a {
  color: rgb(var(--c-ink)); font-weight: 700; text-decoration: underline; text-decoration-thickness: 0.0625rem; text-underline-offset: 0.25rem; overflow-wrap: anywhere; border-radius: 0.25rem;
  transition: background-color 0.15s, color 0.15s;
}
.texto p a:hover, .texto li a:hover, .faq p a:hover, .vazio a:hover, .legal a:hover, .contato a:hover { background: var(--pg-brand); color: var(--pg-night); }
.contato a[target='_blank']::after {
  content: ''; display: inline-block; width: 0.75em; height: 0.75em; margin-left: 0.25em; vertical-align: -0.0625em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* /sobre/: as seções entram em colunas; "Quem cuida" é um cartão */
.sobre { columns: auto; max-width: none; padding: 0; break-inside: avoid; margin: 0 0 2.5rem; }
.sobre h2 { column-span: none; max-width: none; break-after: avoid; }
.sobre h3 { margin: 1.25rem 0 0.5rem; font-size: 1rem; line-height: 1.5rem; font-weight: 700; letter-spacing: -0.01em; break-after: avoid; }
.lista { display: grid; gap: 0.5rem; margin: 0 0 1rem; padding: 0; list-style: none; break-inside: avoid; }
.lista li { position: relative; padding-left: 1.25rem; font-size: 1rem; line-height: 1.6875rem; color: rgb(var(--c-muted)); }
.lista li::before { content: ''; position: absolute; left: 0.25rem; top: 0.6563rem; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: rgb(var(--c-ink)); }
.contato { color: rgb(var(--c-ink)) !important; }
.pessoa {
  display: flex; align-items: center; gap: 1rem; margin: 0 0 1rem; padding: 1rem; border: 1px solid rgba(255, 196, 0, 0.6); border-radius: 1.5rem; background: rgb(var(--c-brandsoft)); break-inside: avoid;
}
.pessoa img { flex: none; width: 5rem; height: 5rem; margin: 0.25rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 0.125rem rgb(var(--c-brandsoft)), 0 0 0 0.25rem var(--pg-brand); }
.texto .pessoa p { margin: 0; color: rgb(var(--c-ink)); }
.pessoa strong, .pessoa span { display: block; }
.pessoa strong { font-size: 1.125rem; line-height: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }
.pessoa span { font-size: 0.875rem; line-height: 1.25rem; color: rgb(var(--c-muted)); }

/* ---------- perguntas e respostas: acordeão (details/summary: abre por toque, Enter e Espaço, sem JavaScript) ---------- */
.faq { padding-block: 3rem 3.5rem; }
@media (min-width: 768px) { .faq { padding-block: 4.5rem 5rem; } }
.faq > h2 { margin: 0 0 1.5rem; font-size: 1.375rem; line-height: 1.75rem; letter-spacing: -0.01em; font-weight: 700; text-wrap: balance; }
.pg-faq-lista { border-top: 1px solid rgb(var(--c-line)); max-width: 56rem; }
@media (min-width: 1366px) { .pg-faq-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr)); column-gap: 3rem; align-items: start; max-width: none; } }
.pg-q { border-bottom: 1px solid rgb(var(--c-line)); }
.pg-q summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding: 1.125rem 0; list-style: none; cursor: pointer; }
.pg-q summary::-webkit-details-marker { display: none; }
.pg-q h3 { flex: 1; margin: 0; font-size: 1rem; line-height: 1.5rem; font-weight: 700; text-wrap: pretty; }
.pg-q-ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid rgb(var(--c-line)); border-radius: 50%;
  background: rgb(var(--c-surface)); color: rgb(var(--c-ink)); transition: transform 0.3s, background-color 0.2s, color 0.2s, border-color 0.2s;
}
.pg-q-ico svg { width: 1.25rem; height: 1.25rem; }
.pg-q summary:hover .pg-q-ico { border-color: rgb(var(--c-ink)); }
.pg-q[open] > summary .pg-q-ico, .dias[open] > summary .pg-q-ico { transform: rotate(180deg); background: rgb(var(--c-ink)); color: rgb(var(--c-onink)); border-color: rgb(var(--c-ink)); }
.pg-q-resp p { margin: 0; max-width: 65ch; padding: 0 3.5rem 1.5rem 0; font-size: 1rem; line-height: 1.5rem; color: rgb(var(--c-muted)); }
@media (prefers-reduced-motion: no-preference) { .pg-q[open] .pg-q-resp { animation: pg-abre 0.28s ease-out; } }
@keyframes pg-abre { from { opacity: 0; transform: translateY(-0.375rem); } }

/* ---------- "Mais ofertas": grupos de pílulas ---------- */
.explorar { padding-block: 3rem 3.5rem; background: rgb(var(--c-wash)); }
@media (min-width: 768px) { .explorar { padding-block: 4rem 4.5rem; } }
.explorar > h2 { margin: 0 0 1.5rem; font-size: 1.375rem; line-height: 1.75rem; letter-spacing: -0.01em; font-weight: 700; }
.pg-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2rem 3rem; align-items: start; }
@media (min-width: 64rem) { .pg-grupo-cats { grid-column: span 2; } }
.pg-grupo { min-width: 0; }
.explorar h3 { margin: 0 0 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; color: rgb(var(--c-muted)); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.explorar .chip {
  height: auto; min-height: 2.75rem; padding: 0 1rem; border: 1px solid rgb(var(--c-line)); border-radius: 999px; background: rgb(var(--c-surface)); color: rgb(var(--c-ink));
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; text-decoration: none; transition: border-color 0.15s, background-color 0.15s;
}
.explorar .chip:hover { border-color: rgb(var(--c-ink)); }
.explorar .chip[aria-current='page'] { border-color: var(--pg-brand); background: var(--pg-brand); color: var(--pg-night); }

/* ---------- aviso legal: nota discreta ---------- */
.legal { columns: 22rem; column-gap: 3rem; padding-block: 2rem 2.5rem; font-size: 0.875rem; line-height: 1.25rem; color: rgb(var(--c-muted)); }
.legal p { margin: 0 0 0.75rem; break-inside: avoid; }
.legal b { color: rgb(var(--c-ink)); font-weight: 700; }
.legal a { font-weight: 500; }

/* ---------- histórico de um produto ---------- */
.pg-produto { padding-block: 1rem 2rem; background: radial-gradient(ellipse 60% 110% at 50% 0%, rgb(var(--c-brandsoft)) 0%, rgb(var(--c-brandsoft) / 0) 72%); }
@media (min-width: 768px) { .pg-produto { padding-block: 1.5rem 3rem; } }
@media (min-width: 1024px) { .pg-produto { padding-block: 2.25rem 4rem; } }
/* celular: título e frase em cima; foto e preço lado a lado; botão e aviso embaixo. A partir de 48rem a foto fica na esquerda; a partir de 64rem o preço vira um cartão de compra na direita */
.pg-produto-in {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 1rem; align-items: center;
  grid-template-areas: "mig mig" "h1 h1" "sub sub" "foto preco" "acoes acoes" "aviso aviso";
}
.pg-compra { display: contents; }
.pg-produto-mig { grid-area: mig; }
.pg-produto-foto { grid-area: foto; }
.pg-produto h1 { grid-area: h1; margin: 0.25rem 0 0; font-size: clamp(1.625rem, 3.2vw, 2.5rem); line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; text-wrap: balance; overflow-wrap: anywhere; }
.pg-produto .sub { grid-area: sub; margin: 0.75rem 0 1.25rem; max-width: 60ch; font-size: 1rem; line-height: 1.5rem; color: rgb(var(--c-muted)); }
.pg-preco { grid-area: preco; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; min-width: 0; }
.pg-acoes { grid-area: acoes; margin-top: 1.25rem; }
.pg-produto .aviso { grid-area: aviso; margin-top: 0.75rem; font-size: 0.75rem; line-height: 1rem; }
@media (min-width: 48rem) {
  .pg-produto-in {
    grid-template-columns: 16rem minmax(0, 1fr); column-gap: 2.5rem; grid-template-rows: auto auto auto auto auto 1fr; align-items: start;
    grid-template-areas: "foto mig" "foto h1" "foto sub" "foto preco" "foto acoes" "foto aviso";
  }
}
@media (min-width: 64rem) {
  .pg-produto-in {
    grid-template-columns: 14rem minmax(0, 1fr) 18rem; column-gap: 2rem; grid-template-rows: auto auto 1fr;
    grid-template-areas: "foto mig compra" "foto h1 compra" "foto sub compra";
  }
  .pg-compra {
    display: block; grid-area: compra; padding: 1.5rem; border: 1px solid rgb(var(--c-line) / 0.7); border-radius: 1.5rem; background: rgb(var(--c-surface));
    box-shadow: 0 0.75rem 2rem -0.5rem rgba(24, 24, 27, 0.14);
  }
  .pg-compra .pg-acoes { margin-top: 1.25rem; }
  .pg-compra .ver { width: 100%; padding: 0 1rem; }
  .pg-produto .pg-compra .aviso { margin-top: 1rem; }
  .pg-produto .pg-compra .quando b { font-size: 2.25rem; line-height: 2.5rem; }
  .pg-produto .sub { margin-bottom: 0; }
}
@media (min-width: 1366px) { .pg-produto-in { grid-template-columns: 18rem minmax(0, 1fr) 22rem; column-gap: 2.5rem; } }
.pg-produto .mig ol { justify-content: flex-start; margin-left: -0.5rem; }
.pg-produto-foto {
  display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border: 1px solid rgb(var(--c-line) / 0.7); border-radius: 1.5rem; background: #fff;
  box-shadow: 0 0.125rem 0.75rem -0.25rem rgba(24, 24, 27, 0.06);
}
.pg-produto-foto img { width: 100%; height: 100%; object-fit: contain; padding: 0.75rem; }
@media (min-width: 48rem) { .pg-produto-foto img { padding: 1.5rem; } }
.pg-produto-foto .pg-logo-grande { width: 60%; height: 60%; padding: 0; }
.pg-produto .quando { display: block; width: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: 0.875rem; line-height: 1.25rem; }
.pg-rot { display: block; color: rgb(var(--c-muted)); }
.pg-produto .quando b { display: block; margin: 0.125rem 0; font-size: 2rem; line-height: 2.25rem; font-weight: 700; letter-spacing: -0.02em; }
@media (min-width: 48rem) { .pg-produto .quando b { font-size: 2.75rem; line-height: 3rem; } }
.pg-resto { color: rgb(var(--c-muted)); }
.pg-virg { display: none; } /* a vírgula continua no texto; com o valor em linha própria ela só atrapalharia o desenho */
.pg-selo-min {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem 0.375rem 0.625rem; border-radius: 999px; background: var(--pg-night); color: var(--pg-brand);
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 700;
}
[data-theme='dark'] .pg-selo-min { background: var(--pg-brand); color: var(--pg-night); }
.ver {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; min-height: 3.5rem; padding: 0 1.75rem; border-radius: 999px; background: rgb(var(--c-ink)); color: rgb(var(--c-onink));
  text-align: center; text-decoration: none; font-size: 1rem; line-height: 1.5rem; font-weight: 700; transition: background-color 0.15s, transform 0.15s;
}
.ver svg { flex: none; width: 1.25rem; height: 1.25rem; }
.ver:hover { background: rgb(var(--c-inkhover)); }
.ver:active { transform: scale(0.98); }
@media (min-width: 40rem) { .ver { width: auto; } }
.ver.sec { margin-top: 1rem; }

.pg-duo { display: grid; gap: 1.5rem; padding-block: 2.5rem 3rem; background: rgb(var(--c-wash)); align-items: start; }
@media (min-width: 768px) { .pg-duo { padding-block: 3.5rem 4.5rem; } }
@media (min-width: 64rem) { .pg-duo { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 2rem; } }
.grafico { min-width: 0; padding: 1.25rem; border: 1px solid rgb(var(--c-line) / 0.7); border-radius: 1.5rem; background: rgb(var(--c-surface)); box-shadow: 0 0.125rem 0.75rem -0.25rem rgba(24, 24, 27, 0.06); }
@media (min-width: 768px) { .grafico { padding: 1.75rem; } }
.grafico h2, .resumo h2 { margin: 0; font-size: 1.375rem; line-height: 1.75rem; letter-spacing: -0.01em; font-weight: 700; }
.grafico .nota { max-width: 60ch; }
.graf { margin: 1rem 0 0; }
.graf svg { display: block; width: 100%; max-width: 36rem; max-height: 32rem; height: auto; margin-inline: auto; overflow: visible; }
.graf figcaption { margin-top: 0.75rem; text-align: center; font-size: 0.875rem; line-height: 1.25rem; color: rgb(var(--c-muted)); font-variant-numeric: tabular-nums; }
.svg .gl { stroke: rgb(var(--c-line)); stroke-width: 1; }
.svg .eixo { fill: rgb(var(--c-muted)); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.svg .rot { fill: rgb(var(--c-ink)); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: rgb(var(--c-surface)); stroke-width: 3px; stroke-linejoin: round; }
.svg .area { fill: var(--pg-brand); fill-opacity: 0.22; }
.svg .linha { fill: none; stroke: rgb(var(--c-ink)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.svg .pt { fill: rgb(var(--c-surface)); stroke: rgb(var(--c-ink)); stroke-width: 1.5; }
.svg .min { fill: var(--pg-brand); stroke: rgb(var(--c-ink)); stroke-width: 2; }
.svg .ult { fill: rgb(var(--c-ink)); stroke: rgb(var(--c-surface)); stroke-width: 2; }
.dias { margin-top: 1rem; border-top: 1px solid rgb(var(--c-line)); }
.dias summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; list-style: none; cursor: pointer; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; }
.dias summary::-webkit-details-marker { display: none; }
.dias summary:hover .pg-q-ico { border-color: rgb(var(--c-ink)); }
.pg-dias-rolagem { max-height: 20rem; overflow: auto; margin-bottom: 0.5rem; border: 1px solid rgb(var(--c-line)); border-radius: 1rem; }
.pg-dias-tab { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pg-dias-tab th, .pg-dias-tab td { padding: 0.625rem 1rem; border-bottom: 1px solid rgb(var(--c-line)); font-size: 0.875rem; line-height: 1.25rem; }
.pg-dias-tab tr:last-child th, .pg-dias-tab tr:last-child td { border-bottom: 0; }
.pg-dias-tab th { text-align: left; font-weight: 500; color: rgb(var(--c-muted)); }
.pg-dias-tab td { text-align: right; font-weight: 700; }

.resumo { min-width: 0; padding-top: 0.5rem; }
@media (min-width: 64rem) { .resumo { padding-top: 1.25rem; } }
/* resumo em números: a <table> (th = rótulo, td = valor) desenhada como grade de números */
.pg-tab { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; width: 100%; max-width: 48rem; margin-top: 1rem; }
@media (min-width: 78rem) { .pg-tab { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pg-tab tbody { display: contents; }
.pg-tab tr { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; padding: 1rem; border: 1px solid rgb(var(--c-line) / 0.7); border-radius: 1.25rem; background: rgb(var(--c-surface)); }
.pg-tab tr:first-child { border-color: rgba(255, 196, 0, 0.6); background: rgb(var(--c-brandsoft)); }
.pg-tab th { padding: 0; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; text-align: left; color: rgb(var(--c-muted)); }
.pg-tab td { display: flex; flex-direction: column; margin-top: auto; padding: 0; font-size: 1.375rem; line-height: 1.75rem; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.pg-tab td small { margin-top: 0.125rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; letter-spacing: 0; color: rgb(var(--c-muted)); }
.resumo .ver.sec { margin-top: 1.25rem; }

/* ---------- páginas de erro (a linguagem do 404.html) ---------- */
.pg-abertura-erro { padding-block: 3rem; background: none; }
@media (min-width: 768px) { .pg-abertura-erro { padding-block: 5rem 4rem; } }
@media (min-width: 1024px) { .pg-abertura-erro { padding-block: 7rem 5rem; } }
.pg-abertura-erro h1 { max-width: 18ch; }
.pg-abertura-erro .sub { max-width: 36rem; }
.pg-busca { max-width: 40rem; margin: 1.5rem auto 0; }
.pg-busca-caixa {
  display: flex; align-items: center; width: 100%; border: 1px solid rgb(var(--c-line)); border-radius: 999px; background: rgb(var(--c-surface));
  box-shadow: 0 0.5rem 1.75rem -0.625rem rgba(24, 24, 27, 0.22); transition: box-shadow 0.2s, border-color 0.2s;
}
.pg-busca-caixa:hover { box-shadow: 0 0.75rem 2rem -0.5rem rgba(24, 24, 27, 0.3); }
.pg-busca-caixa:focus-within { border-color: rgb(var(--c-ink)); box-shadow: 0 0 0 1px rgb(var(--c-ink)); }
.pg-busca label { display: flex; flex: 1; min-width: 0; flex-direction: column; padding: 0.625rem 0.5rem 0.625rem 1.5rem; text-align: left; cursor: text; }
.pg-busca label span { font-size: 0.75rem; line-height: 1rem; font-weight: 700; color: rgb(var(--c-ink)); }
.pg-busca input { width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; font: inherit; font-size: 1rem; line-height: 1.5rem; color: rgb(var(--c-ink)); }
.pg-busca input::placeholder { color: rgb(var(--c-muted)); }
.pg-busca input:focus, .pg-busca input:focus-visible { outline: none; }
.pg-busca button { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin: 0.375rem; border-radius: 50%; background: rgb(var(--c-ink)); color: rgb(var(--c-onink)); transition: background-color 0.15s; }
.pg-busca button:hover { background: rgb(var(--c-inkhover)); }
.pg-busca button svg { width: 1.25rem; height: 1.25rem; }
.pg-saidas { padding-block: 0.5rem 3.5rem; }
@media (min-width: 768px) { .pg-saidas { padding-block: 1rem 5rem; } }
.pg-saidas > h2 { margin: 0; font-size: 1.375rem; line-height: 1.75rem; letter-spacing: -0.01em; font-weight: 700; }
.pg-saidas-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .pg-saidas-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 78rem) { .pg-saidas-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } }
.pg-saida {
  position: relative; display: flex; flex-direction: column; gap: 0.75rem; height: 100%; padding: 1rem; text-decoration: none; border: 1px solid rgb(var(--c-line)); border-radius: 1.5rem;
  background: rgb(var(--c-surface)); transition: border-color 0.2s, box-shadow 0.2s;
}
@media (min-width: 768px) { .pg-saida { padding: 1.25rem; } }
.pg-saida:hover { border-color: rgb(var(--c-ink)); box-shadow: 0 0.75rem 2rem -0.5rem rgba(24, 24, 27, 0.14); }
.pg-saida-destaque { border-color: rgba(255, 196, 0, 0.6); background: rgb(var(--c-brandsoft)); }
.pg-saida-topo { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pg-ico { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid rgb(var(--c-line)); border-radius: 50%; background: rgb(var(--c-wash)); color: rgb(var(--c-ink)); }
.pg-ico svg { width: 1.375rem; height: 1.375rem; }
.pg-saida-destaque .pg-ico { border-color: transparent; background: var(--pg-brand); color: var(--pg-night); }
.pg-seta-ir { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid rgb(var(--c-line)); border-radius: 50%; background: rgb(var(--c-surface)); color: rgb(var(--c-ink)); transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.pg-seta-ir svg { width: 1.125rem; height: 1.125rem; transition: transform 0.15s; }
.pg-saida:hover .pg-seta-ir { background: rgb(var(--c-ink)); border-color: rgb(var(--c-ink)); color: rgb(var(--c-onink)); }
.pg-saida:hover .pg-seta-ir svg { transform: translateX(0.125rem); }
.pg-saida b { display: block; font-size: 1rem; line-height: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }
.pg-saida small { display: block; margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; color: rgb(var(--c-muted)); }

/* ---------- janela muito larga (zoom bem reduzido): blocos de texto e de cartões param em 3000px, como as grades da vitrine; as grades de ofertas e de cupons seguem ganhando colunas ---------- */
@media (min-width: 2300px) {
  .pg-produto-in, .pg-faq-lista, .pg-grupos, .legal, .texto, .pg-corpo { max-width: 3000px; }
  .pg-duo { grid-template-columns: minmax(0, 1650px) minmax(0, 1350px); justify-content: start; }
}

/* ---------- toque (celular e tablet): alvos de 44px também no cabeçalho e no rodapé da home, que no computador seguem como na home ---------- */
@media (pointer: coarse) {
  #topo a, #topo button { min-height: 2.75rem; }
  #topo button { min-width: 2.75rem; }
  footer ul { gap: 0; }
  footer ul a { display: flex; align-items: center; min-height: 2.75rem; }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .pg-faixa-trilho.anda { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .pg-faixa-trilho.anda > ul + ul { display: none; }
  .pg-cat, .pg-cat::after, .pg-fade, .of, .cupom, .cta, .comprar, .codigo button, .ver, .pg-q-ico, .pg-saida, .pg-seta-ir, .pg-seta-ir svg, .pg-busca-caixa { transition: none; }
  .cta:active, .comprar:active, .codigo button:active, .ver:active { transform: none; }
}

/* ---------- impressão: só o conteúdo ---------- */
@media print {
  #topo, .pg-trilho, .pg-faixa, footer, .pg-ficha, .explorar { display: none !important; }
  .pg-main > * { padding-inline: 0; }
  .pg-vitrine, .pg-duo, .explorar { background: none; }
}