/* Vitrine Pesquizei — página de categoria. SÓ TEMA CLARO (data-theme="claro" fixo no <html>).
   Só usa tokens de tokens.css: nenhuma cor, fonte ou raio fora dele.
   Mobile-first: base = celular · 600 = 2 colunas · 768 = tablet · 1024 = 3 colunas · 1440 = 4 colunas.

   EXTENSÕES AO DESIGN SYSTEM feitas aqui (todas com tokens existentes; levar para o design system):
   1. Ícones de categoria com o ponto da marca ........ .pz-ico / .pz-pt (desenhos em assets/js/icones.js)
   2. Tile de categoria (menu) ......................... .cat / .cat-tile
   3. Banner de destaque, 3 temas ...................... .banner--suave | --tinta | --neutro (+ arte .art-*)
   4. Botão tinta e botão invertido .................... .btn.tin (sobre claro) / .btn.inv (sobre neutral-900)
                                                          o índigo fica reservado à ação da página: entrar no grupo e ir à loja
   5. Botão circular de seta ........................... .seta
   6. Sobretítulo ...................................... .sobre (estilo label em caixa alta + ponto da marca)
   7. Preço em destaque (data-lg) ...................... .preco: IBM Plex Mono 500, 22/1.2, tracking -2%, tabular
   8. Anel do logo como motivo de fundo ................ .anel (tonal, nunca girado, nunca fechado) */

/* ---------- Fontes da marca, servidas pelo nosso domínio ----------
   Antes vinham de fonts.googleapis.com: eram 949ms de render-blocking (medido no Lighthouse
   móvel de 20/09) mais duas conexões novas (googleapis + gstatic) antes de qualquer texto pintar.
   As três famílias continuam as mesmas — a decisão de marca não mudou, mudou a entrega.
   Arquivos em assets/fonts/, woff2, subconjunto latino, eixos variáveis estreitados aos pesos
   que a vitrine usa (Bricolage 600-700, Hanken 400-700): 147,7 KB -> 116,4 KB.
   Todas com font-display: swap; o <head> dá preload nas três de cima da dobra.
   Licenças: as três são SIL Open Font License 1.1 (ver assets/fonts/LICENCAS.txt). */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-var-latin.woff2") format("woff2");
  font-weight: 600 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-var-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Latin estendido só no corpo: título de oferta vem da loja e às vezes traz caractere fora do latim básico. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-var-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Medidas de layout (não são tokens de marca) */
  --pz-largura: 1200px;
  --pz-gutter: var(--space-4); /* gutter mínimo em qualquer largura */
  --foco: var(--brand);
  color-scheme: light;
}
@media (min-width: 768px) { :root { --pz-gutter: var(--space-6); } }
@media (min-width: 1024px) { :root { --pz-gutter: var(--space-8); } }
@media (min-width: 1440px) { :root { --pz-largura: 1376px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
img { display: block; height: auto; }
svg { flex: none; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--link); }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.container {
  width: 100%;
  max-width: var(--pz-largura);
  margin-inline: auto;
  padding-inline: var(--pz-gutter);
}

.pular {
  position: absolute; left: var(--space-4); top: var(--space-2); z-index: 30;
  transform: translateY(-200%);
  display: inline-flex; align-items: center; min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--bg-surface); color: var(--ink);
  border: 1px solid var(--hairline);
  font-weight: 600; text-decoration: none;
}
.pular:focus { transform: none; }
.ofertas:focus { outline: none; } /* alvo do skip link: recebe foco, mas não é controle */

/* Ícones da família (grade 48): traço em currentColor, duas manchas suaves e um acento da marca.
   Sobre superfície escura: --pz-tom: var(--indigo-800); --pz-tom-2: var(--neutral-700); --pz-ponto: var(--indigo-500). */
.pz-ico .pz-t1 { fill: var(--pz-tom, var(--indigo-100)); }
.pz-ico .pz-t2 { fill: var(--pz-tom-2, var(--neutral-100)); }
.pz-ico .pz-pt { fill: var(--pz-ponto, var(--brand)); }

/* Sobretítulo: o único tracking positivo do sistema (label, caixa alta) + o ponto da marca */
.sobre {
  display: flex; align-items: center; gap: var(--space-2);
  text-transform: uppercase; color: var(--ink-muted);
}
.sobre::before {
  content: ""; flex: none; width: 6px; height: 6px;
  border-radius: var(--radius-pill); background: var(--brand);
}

/* ---------- Botao ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  font-size: 16px; font-weight: 600; line-height: 1.25;
  border: 1px solid transparent;
  cursor: pointer; font-family: inherit; text-decoration: none; text-align: center;
}
.btn:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.pri { background: var(--brand); color: var(--on-brand); }
.pri:hover { background: var(--brand-hover); }
.sec { background: var(--bg-surface); color: var(--ink); border-color: var(--hairline); }
.sec:hover { background: var(--bg-hover); }
.gho { background: transparent; color: var(--link); }
.gho:hover { background: var(--bg-hover); }
.tin { background: var(--neutral-900); color: var(--neutral-0); }
.tin:hover { background: var(--neutral-700); }
.inv { background: var(--neutral-0); color: var(--neutral-900); }
.inv:hover { background: var(--neutral-200); }
.btn-ico { margin-right: calc(var(--space-1) * -1); }

/* Botão circular de seta (menu e destaques) */
.seta {
  width: 44px; height: 44px; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--bg-surface); color: var(--ink);
  cursor: pointer;
}
.seta:hover { background: var(--bg-hover); }
.seta:disabled { color: var(--neutral-400); background: var(--bg-page); cursor: default; }

/* ---------- 1. Cabeçalho ---------- */
.topo { background: var(--bg-page); border-bottom: 1px solid var(--hairline); }
.topo .container {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-block: var(--space-1);
}
.topo-logo { display: inline-flex; align-items: center; min-height: 44px; border-radius: var(--radius-xs); }
.topo-logo img { width: 126px; height: 24px; }
.topo .gho { padding-inline: var(--space-3); margin-right: calc(var(--space-3) * -1); font-size: 14px; }
@media (min-width: 768px) {
  .topo .container { padding-block: var(--space-3); }
  .topo-logo img { width: 147px; height: 28px; }
  .topo .gho { font-size: 16px; }
}

/* ---------- 1b. Menu de categorias: uma linha de tiles que rola para o lado ---------- */
.cats { padding-block: var(--space-2) var(--space-1); border-bottom: 1px solid var(--hairline); }
.cats-cab { display: none; }
.cats-trilho { position: relative; max-width: var(--pz-largura); margin-inline: auto; }
.cats-rolo {
  position: relative;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--pz-gutter);
  padding: var(--space-1) var(--pz-gutter);
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.cats-rolo::-webkit-scrollbar { display: none; }
.cats-lista { display: flex; width: max-content; margin-inline: auto; }
.cats-item { display: flex; scroll-snap-align: start; }
/* Sazonais: um fio separa o grupo no fim da linha */
.cats-item--divisa { margin-left: var(--space-2); padding-left: var(--space-2); position: relative; }
.cats-item--divisa::before {
  content: ""; position: absolute; left: 0; top: var(--space-2); height: 56px; width: 1px; background: var(--hairline);
}
/* Largura fixa por item: no celular cabem 4 e o 5º aparece cortado, sinal de que a linha rola */
.cat {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  width: 84px; padding: var(--space-1);
  border-radius: var(--radius-md);
  color: var(--ink-secondary); text-decoration: none;
}
.cat-tile {
  width: 56px; height: 56px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 1px solid var(--hairline);
  color: var(--ink);
}
.cat-tile .pz-ico { width: 36px; height: 36px; }
.cat-nome {
  font-size: 12px; line-height: 1.3; font-weight: 500; text-align: center;
  max-width: 100%;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.cat:hover .cat-tile { background: var(--bg-hover); }
.cat:hover { color: var(--ink); }
.cat[aria-current="page"] { color: var(--ink); }
.cat[aria-current="page"] .cat-nome { font-weight: 600; }
.cat[aria-current="page"] .cat-tile { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.cat:focus-visible { outline-offset: -2px; }
.cats-seta { display: none; }

@media (min-width: 768px) {
  .cats { padding-block: var(--space-4) var(--space-3); }
  .cats-cab { display: flex; align-items: center; justify-content: flex-end; margin-bottom: var(--space-2); }
  .cats-titulo { text-transform: uppercase; color: var(--ink-muted); }
  .cats-todas {
    display: inline-flex; align-items: center; min-height: 44px;
    font-size: 14px; font-weight: 600; color: var(--link);
    text-decoration: none; border-radius: var(--radius-xs);
  }
  .cats-todas:hover { text-decoration: underline; text-underline-offset: 3px; }
  .cats-lista { gap: var(--space-2); }
  .cat { width: 104px; }
  .cat-tile { width: 72px; height: 72px; }
  .cat-tile .pz-ico { width: 44px; height: 44px; }
  .cat-nome { font-size: 13px; line-height: 1.35; }
  .cats-item--divisa::before { height: 72px; }
  /* Fade só do lado que ainda tem item; a máscara não pinta cor nenhuma na tela */
  .cats-rolo {
    --fade-antes: 0px; --fade-depois: 0px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-antes), #000 calc(100% - var(--fade-depois)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-antes), #000 calc(100% - var(--fade-depois)), transparent 100%);
  }
  .cats.tem-antes .cats-rolo { --fade-antes: 88px; }
  .cats.tem-depois .cats-rolo { --fade-depois: 88px; }
  .cats-seta { position: absolute; top: 22px; z-index: 2; }
  .cats-seta--antes { left: calc(var(--pz-gutter) - var(--space-3)); }
  .cats-seta--depois { right: calc(var(--pz-gutter) - var(--space-3)); }
  .cats.tem-antes .cats-seta--antes, .cats.tem-depois .cats-seta--depois { display: inline-flex; }
}

/* ---------- 1c. Banners de destaque ---------- */
.destaques { padding-top: var(--space-3); }
.destaques-rolo {
  position: relative;
  display: flex; gap: var(--space-4);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  border-radius: var(--radius-lg);
}
.destaques-rolo::-webkit-scrollbar { display: none; }
.banner {
  position: relative; overflow: hidden;
  flex: 0 0 100%; min-width: 0;
  scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; align-items: center;
  min-height: 148px;
  border-radius: var(--radius-lg);
}
.banner-texto {
  position: relative; z-index: 1;
  width: 68%;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1);
  padding: var(--space-4) 0 var(--space-4) var(--space-4);
}
.banner-rotulo { text-transform: uppercase; font-size: 12px; }
.banner-titulo {
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; line-height: 1.15; letter-spacing: -0.2px;
  text-wrap: balance;
}
.banner-apoio {
  display: none; /* celular: banner baixo (rótulo, título e botão); o apoio entra a partir de 600px */
  font-size: 14px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.banner-btn { margin-top: var(--space-2); padding-block: var(--space-2); }
.banner-arte { position: absolute; top: 0; right: -44px; height: 100%; width: auto; max-width: none; }
@media (max-width: 359px) { .banner-arte { right: -76px; } }
/* Celular: o satélite da esquerda sai, para a arte nunca encostar no botão */
.art-sat--esq { display: none; }
@media (min-width: 600px) {
  .art-sat--esq { display: inline; }
  .banner { min-height: 200px; }
  .banner-apoio { display: -webkit-box; }
  .banner-arte { right: -16px; }
}

/* Temas do banner (cores só de tokens) */
.banner--suave { background: var(--indigo-50); color: var(--ink); --pz-tom-2: var(--white); }
.banner--suave .banner-rotulo { color: var(--indigo-700); }
.banner--suave .banner-apoio { color: var(--ink-secondary); }
.banner--suave .art-trilho { stroke: var(--indigo-100); }
.banner--suave .art-arco { stroke: var(--indigo-600); }
.banner--suave .art-chip { fill: var(--white); stroke: var(--indigo-100); }
.banner--suave .art-ico { color: var(--ink); }
.banner--suave .art-ico-2 { color: var(--indigo-800); }
.banner--suave .art-pt { fill: var(--indigo-600); }

.banner--tinta { background: var(--neutral-900); color: var(--neutral-0); --pz-ponto: var(--indigo-500); --pz-tom: var(--indigo-800); --pz-tom-2: var(--neutral-700); --foco: var(--neutral-0); }
.banner--tinta .banner-rotulo, .banner--tinta .banner-apoio { color: var(--neutral-200); }
.banner--tinta .art-trilho { stroke: var(--neutral-700); }
.banner--tinta .art-arco { stroke: var(--indigo-500); }
.banner--tinta .art-chip { fill: var(--neutral-900); stroke: var(--neutral-500); }
.banner--tinta .art-ico { color: var(--neutral-0); }
.banner--tinta .art-ico-2 { color: var(--neutral-200); }
.banner--tinta .art-pt { fill: var(--indigo-500); }

.banner--neutro { background: var(--bg-muted); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline); }
.banner--neutro .banner-rotulo { color: var(--ink-muted); }
.banner--neutro .banner-apoio { color: var(--ink-secondary); }
.banner--neutro .art-trilho { stroke: var(--neutral-200); }
.banner--neutro .art-arco { stroke: var(--neutral-900); }
.banner--neutro .art-chip { fill: var(--white); stroke: var(--neutral-200); }
.banner--neutro .art-ico, .banner--neutro .art-ico-2 { color: var(--ink); }
.banner--neutro .art-pt { fill: var(--brand); }

/* Controles: pontos à esquerda, contador e setas à direita */
.destaques-ctrl { display: flex; align-items: center; justify-content: space-between; min-height: 32px; }
.destaques-pontos { display: flex; align-items: center; margin-left: calc(var(--space-2) * -1); }
.ponto {
  width: 28px; height: 44px; margin-block: -6px; padding: 0; /* área de toque alta sem crescer a linha */
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer; border-radius: var(--radius-xs);
}
.ponto::before {
  content: ""; width: 8px; height: 8px; border-radius: var(--radius-pill);
  background: var(--neutral-400);
}
.ponto[aria-current="true"] { width: 40px; }
.ponto[aria-current="true"]::before { width: 24px; background: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .ponto, .ponto::before { transition: width .2s ease-out, background-color .2s ease-out; }
}
.destaques-nav { display: flex; align-items: center; gap: var(--space-2); }
.destaques-nav .seta { display: none; }
.destaques-conta {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.4;
  font-variant-numeric: tabular-nums; color: var(--ink-muted);
}
@media (min-width: 768px) {
  .destaques { padding-top: var(--space-5); }
  .banner { min-height: 264px; }
  .banner-texto { width: 58%; gap: var(--space-2); padding: var(--space-8) 0 var(--space-8) var(--space-8); }
  .banner-rotulo { font-size: 13px; }
  .banner-titulo { font-size: 28px; letter-spacing: -0.28px; }
  .banner-apoio { font-size: 16px; line-height: 1.5; }
  .banner-btn { margin-top: var(--space-3); padding-block: var(--space-3); }
  .banner-arte { right: 0; }
  .destaques-ctrl { min-height: 60px; }
  .destaques-nav { gap: var(--space-3); }
  .destaques-nav .seta { display: inline-flex; }
  .destaques-conta { font-size: 13px; margin-right: var(--space-1); }
}
@media (min-width: 1024px) {
  .banner { min-height: 300px; }
  .banner-texto { width: 56%; padding: var(--space-12) 0 var(--space-12) var(--space-12); }
  .banner-titulo { font-size: 36px; line-height: 1.1; letter-spacing: -0.54px; }
  .banner-apoio { font-size: 18px; }
  .banner-arte { right: var(--space-8); }
}
@media (min-width: 1440px) {
  .banner { min-height: 328px; }
  .banner-texto { padding-left: var(--space-16); }
  .banner-arte { right: var(--space-16); }
}

/* ---------- 2. Abertura + 3. CTA topo ---------- */
.abertura { padding-block: var(--space-3) var(--space-4); }
.abertura-contagem {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.4; color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.abertura-contagem::before {
  content: ""; display: inline-block; vertical-align: middle; width: 6px; height: 6px; margin: -2px var(--space-2) 0 0;
  border-radius: var(--radius-pill); background: var(--brand);
}
.abertura-contagem strong { font-weight: 500; color: var(--ink); }
.abertura-titulo {
  margin-top: var(--space-1);
  font-family: var(--font-display); font-weight: 700; color: var(--ink);
  font-size: 28px; line-height: 1.15; letter-spacing: -0.28px; /* display-lg no celular */
}
.abertura-apoio { margin-top: var(--space-1); color: var(--ink-secondary); max-width: 56ch; font-size: 15px; line-height: 1.5; }

.cta { display: flex; flex-direction: column; gap: var(--space-2); }
.cta-botoes { display: flex; flex-direction: column; gap: var(--space-2); }
.cta-apoio { font-size: 12px; line-height: 1.45; color: var(--ink-muted); }
.cta-chamada { font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: 0.26px; color: var(--ink); }

/* Celular: CTA do topo em linha, para a 1ª oferta caber na primeira dobra.
   O prefixo "Entrar pelo" continua no nome acessível; a chamada acima dá o contexto visual. */
.cta--topo { margin-top: var(--space-3); }
.cta--topo .cta-botoes { flex-direction: row; }
.cta--topo .btn { flex: 1 1 0; min-width: 0; padding-inline: var(--space-3); }
@media (max-width: 599px) {
  .cta--topo .cta-prefixo {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}
@media (min-width: 600px) {
  .cta-botoes { flex-direction: row; flex-wrap: wrap; gap: var(--space-3); }
  .cta--topo .btn { flex: 0 1 auto; padding-inline: var(--space-5); }
}
@media (min-width: 768px) {
  .abertura { padding-block: var(--space-6) var(--space-8); }
  .abertura-contagem { font-size: 13px; }
  .abertura-titulo { margin-top: var(--space-2); font-size: 36px; line-height: 1.1; letter-spacing: -0.54px; } /* display-xl */
  .abertura-apoio { margin-top: var(--space-2); font-size: 18px; line-height: 1.6; }
  .cta--topo { margin-top: var(--space-5); }
}
@media (min-width: 1024px) {
  .abertura { padding-block: var(--space-5) var(--space-12); }
  .abertura .container { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: var(--space-12); align-items: center; }
  .abertura-titulo { font-size: 48px; line-height: 1.05; letter-spacing: -0.96px; } /* display-2xl */
  .cta--topo {
    margin-top: 0; gap: var(--space-3);
    padding: var(--space-6);
    background: var(--bg-surface);
    border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  }
  .cta--topo .cta-botoes { flex-direction: column; flex-wrap: nowrap; gap: var(--space-2); }
  .cta--topo .btn { flex: none; width: 100%; }
  .cta--topo .cta-chamada { font-family: var(--font-display); font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -0.22px; }
  .cta--topo .cta-apoio { text-align: center; }
}

/* ---------- AvisoAfiliado (caption sobre bg-page) ----------
   Desde 20/09 o aviso aparece UMA VEZ SÓ, no fim da página (pedido do dono).
   Não existe mais cópia acima da grade nem acima da grade de categorias. */
.aviso { display: flex; flex-direction: column; gap: var(--space-2); }
.aviso p { font-size: 12px; line-height: 1.45; color: var(--ink-muted); }
.aviso p strong { color: var(--ink-secondary); font-weight: 600; }
@media (min-width: 768px) {
  .aviso { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
}

/* ---------- 4/6. Grade ---------- */
.ofertas { padding-bottom: var(--space-8); }
.ofertas-cab {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
@media (min-width: 768px) {
  .ofertas { padding-bottom: var(--space-12); }
  .ofertas-cab {
    position: static; width: auto; height: auto; margin: 0 0 var(--space-4); overflow: visible; clip: auto; clip-path: none; white-space: normal;
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  }
  .ofertas-ordem { font-family: var(--font-mono); font-size: 13px; line-height: 1.4; color: var(--ink-muted); }
}
.grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.grade > li { display: flex; min-width: 0; }
@media (min-width: 600px) { .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } }
@media (min-width: 1024px) { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }
@media (min-width: 1440px) { .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.resto { padding-block: var(--space-8); }

/* "Ver mais": logo abaixo da grade, centralizado. A contagem do que falta fica ao
   lado, discreta — número verdadeiro, nunca urgência. */
.ver-mais { display: flex; justify-content: center; margin-top: var(--space-6); }
.ver-mais-btn { min-width: min(100%, 280px); }
.ver-mais-btn[disabled] { cursor: progress; opacity: .7; }
.ver-mais-conta { font-weight: 400; color: var(--ink-muted); font-size: 14px; }
.ver-mais-conta::before { content: "·"; margin-right: var(--space-2); }
@media (min-width: 768px) { .resto { padding-block: var(--space-12); } }
.estado {
  padding: var(--space-8) var(--space-5);
  border: 1px solid var(--hairline); border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--ink-secondary);
}

/* ---------- CardOferta ----------
   Mesmos campos e mesma ordem da spec (miniatura, loja, selo, nome, preço, score, data, botão).
   Celular: miniatura à esquerda e dados à direita, para caber mais oferta por tela. 600+: card em coluna. */
.card {
  display: grid; grid-template-columns: 104px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--space-3); row-gap: var(--space-2);
  align-content: start;
  width: 100%; min-width: 0;
  padding: var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-none); /* hairline, nunca sombra */
}
.thumb {
  grid-column: 1; grid-row: 1 / span 2;
  height: 104px;
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.chips, .nome { grid-column: 2; }
.precos, .quando, .card .btn { grid-column: 1 / -1; } /* preço e score na largura toda: nunca estouram a 320px */

.chips { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: var(--space-1); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: 12px; line-height: 1.45; font-weight: 500; white-space: nowrap;
}
.loja { background: var(--bg-muted); color: var(--ink-secondary); }
.dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--brand); flex: none; }
.conf { background: var(--green-50); color: var(--green-700); font-weight: 600; }

.nome {
  align-self: start; /* não estica na linha da grade: o corte em 2 linhas fica limpo */
  font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
}
.precos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
/* O preço é o dado que vende: maior, em Plex Mono tabular. Continua sendo só o número do anúncio. */
.preco {
  font-family: var(--font-mono); font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -0.44px;
  font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap;
}
.preco-de {
  font-family: var(--font-mono); font-size: 13px; font-weight: 400; line-height: 1.4;
  font-variant-numeric: tabular-nums; color: var(--ink-muted); text-decoration: line-through; white-space: nowrap;
}
.quando {
  padding-top: var(--space-2); border-top: 1px solid var(--hairline);
  font-size: 12px; line-height: 1.45; color: var(--ink-muted);
}
.card .btn { width: 100%; }

/* Score no card: versão compacta do SeloVeredito. Cor + ícone + rótulo, sempre sobre o chip claro. */
.score-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: 12px; line-height: 1.45; font-weight: 600; white-space: nowrap;
}
.score-num {
  font-family: var(--font-display); font-size: 16px; line-height: 1; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.score-chip [data-icone] { display: inline-flex; }
.v1 { background: var(--green-50); color: var(--green-700); }
.v2 { background: var(--green-50); color: var(--green-600); }
.v3 { background: var(--amber-50); color: var(--amber-600); }
.v4 { background: var(--red-50); color: var(--red-600); }

@media (min-width: 600px) {
  .card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); }
  .thumb { height: auto; aspect-ratio: 3 / 2; }
  .chips { gap: var(--space-2); padding-inline: var(--space-1); }
  .chip, .score-chip { padding-block: var(--space-1); }
  .nome { font-size: 16px; line-height: 1.4; min-height: 2.8em; padding-inline: var(--space-1); }
  .precos { padding-inline: var(--space-1); min-height: 28px; }
  .quando { margin-top: auto; padding: var(--space-3) var(--space-1) 0; }
}
@media (hover: hover) {
  .card:hover { border-color: var(--neutral-400); }
  @media (prefers-reduced-motion: no-preference) { .card { transition: border-color .15s ease-out; } }
}

/* ---------- Anel do logo como motivo de fundo (tonal; nunca girado, nunca fechado) ---------- */
.anel { position: absolute; pointer-events: none; max-width: none; }
.anel-trilho { stroke: var(--neutral-100); }
.anel-arco { stroke: var(--indigo-100); }
.anel-ponto { fill: var(--indigo-100); }

/* ---------- 5. Faixa CTA meio ---------- */
.faixa { position: relative; overflow: hidden; background: var(--bg-muted); border-block: 1px solid var(--hairline); }
.faixa .container {
  position: relative; z-index: 1;
  padding-block: var(--space-8); display: flex; flex-direction: column; gap: var(--space-5);
}
.faixa-anel { width: 300px; height: 300px; right: -170px; top: -150px; } /* celular: só um trecho do arco no canto */
.faixa-titulo, .fim-titulo, .como-titulo {
  font-family: var(--font-display); font-weight: 700; color: var(--ink);
  font-size: 28px; line-height: 1.15; letter-spacing: -0.28px;
}
.faixa-texto { display: flex; flex-direction: column; gap: var(--space-2); }
.faixa-texto .body { color: var(--ink-secondary); max-width: 52ch; }
@media (min-width: 768px) {
  .faixa .container { padding-block: var(--space-12); }
  .faixa-anel { width: 380px; height: 380px; right: -90px; top: 50%; margin-top: -190px; }
}
@media (min-width: 1024px) {
  .faixa .container { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-12); padding-block: var(--space-16); }
  .faixa-titulo, .fim-titulo, .como-titulo { font-size: 36px; line-height: 1.1; letter-spacing: -0.54px; }
  /* O convite vira cartão pousado sobre o anel: o motivo aparece em volta, nunca atrás de botão solto */
  .faixa .cta {
    flex: none; width: 372px; gap: var(--space-3);
    padding: var(--space-6);
    background: var(--bg-surface);
    border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  }
  .faixa .cta-botoes { flex-direction: column; flex-wrap: nowrap; gap: var(--space-2); }
  .faixa .cta .btn { width: 100%; }
  .faixa .cta-apoio { text-align: center; }
  .faixa-anel { width: 520px; height: 520px; right: calc(50% - var(--pz-largura) / 2 - 40px); margin-top: -260px; }
}

/* ---------- 7. Como funciona ---------- */
.como { padding-block: var(--space-12); border-top: 1px solid var(--hairline); }
.como-cab { display: flex; flex-direction: column; gap: var(--space-2); }
.como-apoio { color: var(--ink-secondary); max-width: 56ch; }
.passos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin-top: var(--space-6); }
.passo {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
}
.passo-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.passo-ico {
  width: 56px; height: 56px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); background: var(--bg-muted); color: var(--ink);
}
.passo-n { font-family: var(--font-mono); font-size: 13px; line-height: 1.4; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.passo h3 { color: var(--ink); }
.passo p { color: var(--ink-secondary); }
@media (min-width: 768px) {
  .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-8); }
}
@media (min-width: 1024px) {
  .como { padding-block: var(--space-16); }
  .passos { gap: var(--space-6); }
  .passo { padding: var(--space-6); }
  .passo p { font-size: 16px; line-height: 1.6; }
}

/* ---------- 8. CTA fim + aviso ---------- */
.fim { padding-bottom: var(--space-12); }
.fim .container { display: flex; flex-direction: column; gap: var(--space-6); }
.fim-painel {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-8) var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
}
.fim-painel > :not(.anel) { position: relative; z-index: 1; }
.fim-anel { width: 280px; height: 280px; right: -160px; top: -150px; }
.fim-texto { display: flex; flex-direction: column; gap: var(--space-2); }
.fim-texto .body { color: var(--ink-secondary); max-width: 48ch; }
@media (min-width: 768px) {
  .fim { padding-bottom: var(--space-16); }
  .fim-painel { padding: var(--space-12); gap: var(--space-6); }
  .fim-anel { width: 400px; height: 400px; right: -70px; top: 50%; margin-top: -200px; }
}
@media (min-width: 1024px) {
  .fim-painel { padding: var(--space-16); }
  .fim-titulo { font-size: 48px; line-height: 1.05; letter-spacing: -0.96px; }
  .fim-texto .body { font-size: 18px; }
  .fim-anel { width: 480px; height: 480px; right: -120px; margin-top: -240px; }
}

/* ---------- Rodapé ---------- */
.rodape { background: var(--bg-muted); border-top: 1px solid var(--hairline); padding-block: var(--space-8) var(--space-6); }
.rodape-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.rodape-logo { display: inline-flex; align-items: center; min-height: 44px; border-radius: var(--radius-xs); }
.rodape-logo img { width: 126px; height: 24px; }
.rodape-marca p { margin-top: var(--space-2); font-size: 14px; line-height: 1.55; color: var(--ink-muted); max-width: 52ch; }
.rodape-tit { text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-1); }
.rodape-lista--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); }
.rodape-lista a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--ink-secondary);
  text-decoration: none; border-radius: var(--radius-xs);
}
.rodape-lista a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.rodape-lista a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.rodape-legal {
  margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-6);
  font-size: 12px; line-height: 1.45; color: var(--ink-muted);
}
@media (min-width: 768px) {
  .rodape { padding-block: var(--space-12) var(--space-8); }
  .rodape-grade { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) minmax(0, .8fr); gap: var(--space-8); }
  .rodape-tit { margin-top: var(--space-3); margin-bottom: var(--space-2); }
  .rodape-legal { margin-top: var(--space-8); }
}
@media (min-width: 1024px) {
  .rodape-grade { gap: var(--space-16); }
}

/* ---------- Pop-up de convite ---------- */
.popup { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.popup-fundo { position: absolute; inset: 0; background: var(--neutral-900); opacity: .55; }
.popup-card {
  position: relative;
  width: 100%;
  max-height: 50vh; max-height: 50dvh; /* celular: nunca mais que metade da tela */
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5) var(--space-4) var(--space-4);
  background: var(--bg-surface); color: var(--ink);
  border: 1px solid var(--hairline); border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.popup-card:focus { outline: none; }
.popup-card:focus-visible { outline: 2px solid var(--foco); outline-offset: -4px; }
.popup-card .sobre { padding-right: 44px; margin-bottom: calc(var(--space-2) * -1); }
.popup-card h2 { padding-right: 44px; color: var(--ink); }
.popup-card p:not(.sobre) { font-size: 14px; line-height: 1.5; color: var(--ink-secondary); }
.popup-fechar {
  position: absolute; top: var(--space-2); right: var(--space-2);
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--ink); cursor: pointer;
}
.popup-fechar:hover { background: var(--bg-hover); }
.popup-nao { align-self: center; min-height: 44px; padding-block: var(--space-2); }
@media (min-width: 600px) {
  .popup { align-items: center; padding: var(--space-6); }
  .popup-card {
    max-width: 440px; max-height: calc(100vh - var(--space-12));
    padding: var(--space-6);
    border-bottom: 1px solid var(--hairline); border-radius: var(--radius-lg);
  }
  .popup-card .cta-botoes { flex-direction: column; flex-wrap: nowrap; gap: var(--space-2); }
}
@media (prefers-reduced-motion: no-preference) {
  .popup-fundo { animation: popup-fundo .2s ease-out both; }
  .popup-card { animation: popup-sobe .24s ease-out both; }
  @keyframes popup-fundo { from { opacity: 0; } to { opacity: .55; } }
  @keyframes popup-sobe { from { opacity: 0; transform: translateY(var(--space-6)); } to { opacity: 1; transform: none; } }
}

/* ================================================================
   HOME DA VITRINE (/ofertas) + ESTADO VAZIO
   Mesma linha visual da página de categoria; nenhuma cor, raio ou
   espaçamento fora de tokens.css.
   EXTENSÕES AO DESIGN SYSTEM feitas aqui:
   9.  Seção com cabeçalho visível .......... .secao / .secao-cab
   10. Cartão de categoria (home) ........... .catcard (ícone 44, nome, contagem verdadeira)
   11. Chip de categoria no card ............ .chip.cate
   12. Estado vazio honesto ................. .vazio (usado na categoria e na home)
   ================================================================ */

.secao { padding-block: var(--space-8); }
.secao-cab { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.secao-titulo {
  font-family: var(--font-display); font-weight: 700; color: var(--ink);
  font-size: 28px; line-height: 1.15; letter-spacing: -0.28px;
}
.secao-apoio { color: var(--ink-secondary); max-width: 60ch; }
.categorias:focus { outline: none; } /* alvo do skip link: recebe foco, mas não é controle */
@media (min-width: 768px) {
  .secao { padding-block: var(--space-12); }
  .secao-cab { margin-bottom: var(--space-6); }
}
@media (min-width: 1024px) {
  .secao-titulo { font-size: 36px; line-height: 1.1; letter-spacing: -0.54px; }
}
.hoje { border-top: 1px solid var(--hairline); }

/* ---------- Grade de categorias ---------- */
.catgrade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 600px) { .catgrade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } }
@media (min-width: 1024px) { .catgrade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); } }
@media (min-width: 1440px) { .catgrade { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.catgrade-item { display: flex; min-width: 0; }

.catcard {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  width: 100%; min-width: 0; min-height: 44px;
  padding: var(--space-4) var(--space-3) var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--hairline); border-radius: var(--radius-md);
  color: var(--ink); text-decoration: none; text-align: center;
}
.catcard-tile {
  width: 64px; height: 64px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--bg-muted); color: var(--ink);
}
.catcard-tile .pz-ico { width: 44px; height: 44px; }
.catcard-corpo { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.catcard-nome { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.catcard-conta {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.4;
  font-variant-numeric: tabular-nums; color: var(--ink-muted);
}
.catcard-seta { position: absolute; top: var(--space-3); right: var(--space-3); color: var(--neutral-400); }
/* Sem oferta esta semana: o cartão continua na grade (nunca some), só mais discreto. */
.catcard--vazia .catcard-tile { background: var(--bg-page); border: 1px solid var(--hairline); color: var(--ink-muted); }
.catcard:hover { border-color: var(--neutral-400); }
.catcard:hover .catcard-tile { background: var(--bg-hover); }
.catcard:hover .catcard-seta { color: var(--ink); }
.catcard:focus-visible { outline-offset: -2px; }
@media (min-width: 600px) {
  .catcard { padding: var(--space-5) var(--space-4) var(--space-6); }
  .catcard-nome { font-size: 16px; }
  .catcard-conta { font-size: 13px; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .catcard { transition: border-color .15s ease-out; }
}

/* ---------- Chip de categoria no card (só na home) ---------- */
.cate { background: var(--indigo-50); color: var(--indigo-700); }
/* Com o terceiro chip, uns cards ficam com uma linha de chips e outros com duas.
   Reservar as duas linhas mantém preço e botão na mesma altura em toda a fileira. */
@media (min-width: 600px) { .grade--hoje .chips { min-height: 60px; } }

/* ---------- Estado vazio honesto (categoria sem oferta e faixa da home) ---------- */
.vazio {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-8) var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  text-align: center;
}
.vazio-ico {
  width: 72px; height: 72px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); background: var(--bg-muted); color: var(--ink);
}
.vazio-titulo {
  font-family: var(--font-display); font-weight: 700; color: var(--ink);
  font-size: 22px; line-height: 1.25; letter-spacing: -0.22px;
  max-width: 24ch; text-wrap: balance;
}
.vazio-texto { color: var(--ink-secondary); max-width: 56ch; font-size: 15px; line-height: 1.55; }
.cta--vazio { align-items: center; margin-top: var(--space-2); width: 100%; }
.cta--vazio .cta-botoes { width: 100%; justify-content: center; }
.cta--vazio .btn { flex: 1 1 100%; }
.cta--vazio .cta-chamada { color: var(--ink-secondary); font-weight: 600; }
.vazio-link { margin-top: var(--space-1); }
.vazio-link a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 14px; font-weight: 600; color: var(--link); border-radius: var(--radius-xs);
}
.vazio-link a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 600px) {
  .vazio { padding: var(--space-12) var(--space-8); gap: var(--space-4); }
  .vazio-titulo { font-size: 28px; line-height: 1.15; letter-spacing: -0.28px; }
  .vazio-texto { font-size: 16px; }
  .cta--vazio .cta-botoes { width: auto; }
  .cta--vazio .btn { flex: 0 1 auto; }
}

/* ================================================================
   13. BANNER COM IMAGEM PRÓPRIA (arte.tipo = 'imagem') — CONTRATO.md
   A imagem cobre o cartão; o texto NUNCA entra na imagem, é sempre HTML por cima.
   O véu é o que segura o contraste AA (4,5:1) do título e do apoio sobre
   QUALQUER foto, inclusive uma toda branca (o pior caso).

   MEDIDO NO PIXEL, sobre uma foto 100% BRANCA (o pior caso), texto em --neutral-0 #FBFAF8
   e rótulo/apoio em --neutral-200 #E2DFD8, amostrando a coluna mais clara do véu:
     1280px, fim do texto em 56% da largura ... texto 7,1:1   rótulo/apoio 5,6:1
      390px, fim do texto em 68% da largura ... texto 8,5:1   rótulo/apoio 6,7:1
     véu chapado de reserva (sem color-mix) ... texto 6,0:1   rótulo/apoio 4,7:1
   O texto ocupa 68% da largura até 767px e 56-58% acima disso — por isso o platô escuro
   do degradê vai até 72% no celular e até 62% no desktop. Em nenhum ponto do texto o
   contraste cai de 4,5:1, com qualquer foto, porque branco é o limite.
   ================================================================ */
.banner--imagem { background: var(--neutral-900); color: var(--neutral-0); --foco: var(--neutral-0); }
.banner-img { position: absolute; inset: 0; display: block; }
.banner-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Reserva: véu chapado (já passa AA). Com color-mix, vira degradê do lado do texto. */
.banner-veu { position: absolute; inset: 0; background: var(--neutral-900); opacity: .74; }
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .banner-veu {
    opacity: 1;
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--neutral-900) 80%, transparent) 0%,
      color-mix(in srgb, var(--neutral-900) 74%, transparent) 62%,
      color-mix(in srgb, var(--neutral-900) 48%, transparent) 84%,
      color-mix(in srgb, var(--neutral-900) 34%, transparent) 100%);
  }
  /* Até 767px o texto chega mais à direita (68% da largura, contra 56-58% no desktop),
     então o platô escuro vai mais longe. Mesmo corte do <source> da imagem de celular. */
  @media (max-width: 767px) {
    .banner-veu {
      background: linear-gradient(90deg,
        color-mix(in srgb, var(--neutral-900) 84%, transparent) 0%,
        color-mix(in srgb, var(--neutral-900) 78%, transparent) 72%,
        color-mix(in srgb, var(--neutral-900) 52%, transparent) 100%);
    }
  }
}
.banner--imagem .banner-rotulo, .banner--imagem .banner-apoio { color: var(--neutral-200); }

/* ================================================================
   14. ESPAÇO RESERVADO PARA O QUE O JS MONTA (CLS)
   O banner e o menu de categorias nascem vazios e o vitrine.js (defer) os preenche.
   Depois que as fontes saíram do caminho, a primeira pintura passou a acontecer ANTES
   disso: a página pintava sem banner e sem menu e depois empurrava tudo para baixo
   (CLS 0,936 medido no Lighthouse móvel). Aqui o espaço já existe desde a primeira
   pintura, nas alturas medidas no render em cada faixa.
   O <head> liga a classe pz-montando e o vitrine.js a tira no fim da montagem.
   ================================================================ */
.pz-montando .destaques[hidden], .pz-montando .cats[hidden] { display: block !important; }
/* A grade também: sem ela a página nasce curta, o CTA do meio aparece dentro da tela e some
   quando os cards entram — foi de onde vinha o grosso do deslocamento (0,69 de 0,70 medidos).
   Uma tela de altura basta: a grade cheia é sempre mais alta que isso. */
.pz-montando #grade-1, .pz-montando #catgrade, .pz-montando #grade-hoje { min-height: 100vh; }
.pz-montando .destaques { min-height: 222px; }
.pz-montando .cats { min-height: 124px; }
@media (min-width: 600px)  { .pz-montando .destaques { min-height: 244px; } }
@media (min-width: 768px)  { .pz-montando .destaques { min-height: 357px; } .pz-montando .cats { min-height: 212px; } }
@media (min-width: 1024px) { .pz-montando .destaques { min-height: 409px; } }

/* ---------- Banner só de imagem, o cartão inteiro é o link (arte.somente_imagem) ----------
   A arte já traz rótulo, título e chamada: não há texto em HTML por cima, então o véu
   também não entra — escureceria a arte do dono à toa.
   O <a> é o próprio .banner: mesma caixa, mesmo snap, mesmo raio. Nada de interativo
   dentro dele (setas e pontos do carrossel ficam em .destaques-ctrl, fora do slide). */
.banner--so-imagem { display: block; text-decoration: none; color: var(--neutral-0); }
.banner--so-imagem .banner-img img { user-select: none; -webkit-user-drag: none; }

/* BANNER SÓ DE IMAGEM: a caixa assume a PROPORÇÃO DA ARTE, não uma altura fixa.
   Sem isto o cartão fica mais largo que a arte em telas grandes e o `cover` come o
   topo e o rodapé — foi o que aconteceu com a arte de 1200×420 numa faixa de ~4:1,
   cortando o logo em cima e os selos embaixo. O `--pz-proporcao` é escrito pelo
   vitrine.js a partir das medidas reais da variante servida; sem ele, cai em 20:7,
   que é o alvo do upload. Como a proporção é conhecida antes de a imagem baixar,
   isto também reserva a altura certa e mantém o CLS em zero. */
.banner--so-imagem {
  aspect-ratio: var(--pz-proporcao, 20 / 7);
  min-height: 0;          /* a proporção manda; o piso de 148px cortaria em telas estreitas */
  align-items: stretch;
}
.banner--so-imagem .banner-img img { object-fit: contain; }

/* Com a caixa na proporção da arte, `contain` e `cover` dão o mesmo resultado —
   `contain` é a garantia de que nenhum pixel se perde se a conta divergir por
   arredondamento. O fundo aparece só nessa folga de subpixel. */
.banner--so-imagem { background: var(--bg-muted); }
/* Foco: outline e box-shadow inset ficariam ATRÁS da foto (conteúdo filho pinta por cima)
   e o cartão ainda tem overflow hidden. Então o anel é uma camada por cima, com dois tons,
   para aparecer tanto em foto clara quanto em foto escura. */
.banner--so-imagem:focus-visible { outline: none; }
.banner--so-imagem:focus-visible::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px var(--neutral-0), inset 0 0 0 6px var(--neutral-900);
}
@media (forced-colors: active) {
  .banner--so-imagem:focus-visible { outline: 3px solid CanvasText; outline-offset: -3px; }
}
/* Marca da loja: exigência da cláusula 1.8 do ML, não enfeite. Fundo sólido para ler
   sobre qualquer foto, nome por extenso, cores do Pesquizei — nunca a cor da loja. */
.banner-loja {
  position: absolute; z-index: 1; right: var(--space-3); bottom: var(--space-3);
  display: inline-flex; align-items: center; gap: var(--space-2);
  max-width: calc(100% - var(--space-6));
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--bg-surface); color: var(--ink);
  border: 1px solid var(--hairline);
  font-size: 12px; line-height: 1.45; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .banner-loja { right: var(--space-5); bottom: var(--space-5); font-size: 13px; }
}
@media (hover: hover) {
  .banner--so-imagem:hover .banner-loja { background: var(--bg-hover); }
}

/* ================================================================
   15. BUSCA NO CATÁLOGO — opção B do mockup (site/design/mockup-busca.html),
   aprovada pelo dono com UMA mudança: no desktop o campo é CENTRALIZADO.
   Só tokens. O índigo continua reservado à ação da página (entrar no grupo,
   ir à loja): a busca é ferramenta, então campo neutro e botão .sec.
   ================================================================ */
.busca { display: block; }
.busca-linha { display: flex; align-items: center; gap: var(--space-2); }
.busca-campo { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.busca-ico { position: absolute; left: var(--space-4); display: inline-flex; color: var(--ink-muted); pointer-events: none; }
.busca-input {
  width: 100%; min-height: 48px; margin: 0;
  padding: var(--space-2) 48px var(--space-2) 44px;
  font-family: var(--font-body); font-size: 16px; line-height: 1.4; /* 16px: abaixo disso o iOS dá zoom ao focar */
  color: var(--ink); background: var(--bg-surface);
  border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  appearance: none; -webkit-appearance: none;
}
.busca-input::placeholder { color: var(--ink-muted); opacity: 1; }
.busca-input::-webkit-search-cancel-button { display: none; }
.busca-input:hover { border-color: var(--neutral-400); }
.busca-input:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-color: var(--brand); }
.busca-limpar {
  position: absolute; right: 2px; width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-pill); background: transparent;
  color: var(--ink-muted); cursor: pointer;
}
.busca-limpar:hover { background: var(--bg-hover); color: var(--ink); }
.busca-enviar { flex: none; }
@media (max-width: 599px) { .busca-enviar { display: none; } } /* no celular quem envia é a tecla "Buscar" do teclado */

/* Escopo: só na página de categoria. Padrão sempre "todas". */
.busca-escopo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.busca-escopo-rot { font-size: 12px; line-height: 1.45; color: var(--ink-muted); margin-right: var(--space-1); }
.escopo-op {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2) var(--space-4);
  border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  background: var(--bg-surface); color: var(--ink-secondary);
  font-family: inherit; font-size: 14px; line-height: 1.4; font-weight: 600; cursor: pointer;
}
.escopo-op:hover { background: var(--bg-hover); }
.escopo-op[aria-checked="true"] { color: var(--ink); border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.escopo-n { font-family: var(--font-mono); font-size: 13px; font-weight: 400; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
/* Em 390 o rótulo sai e "Só em" some: as duas opções cabem numa linha. */
@media (max-width: 599px) { .busca-escopo-rot, .escopo-so { display: none; } }

/* A faixa: mesmo fio de baixo do menu de categorias, para as duas virarem um bloco só. */
.busca-faixa { background: var(--bg-page); border-bottom: 1px solid var(--hairline); padding-block: var(--space-3); }
.busca-faixa .busca { max-width: 720px; }
@media (min-width: 768px) {
  .busca-faixa { padding-block: var(--space-4); }
  /* Mudança do dono sobre o mockup: no desktop o campo fica centralizado. */
  .busca-faixa .busca { margin-inline: auto; }
  .busca-faixa .busca-escopo { justify-content: center; }
}

/* Linha de resumo do resultado */
.busca-conta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  font-family: var(--font-mono); font-size: 13px; line-height: 1.4;
  color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.busca-conta strong { color: var(--ink); font-weight: 500; }
.busca-conta em { font-style: normal; color: var(--ink); }
.busca-limpar-link {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px;
  margin-block: calc(var(--space-3) * -1);
  padding-inline: var(--space-2); border-radius: var(--radius-xs);
  font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--link);
  background: transparent; border: 0; cursor: pointer; text-decoration: none;
}
.busca-limpar-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.busca-resumo { margin-bottom: var(--space-4); }
@media (min-width: 768px) { .busca-resumo { margin-bottom: var(--space-6); } }

/* Sem resultado: reusa o .vazio que a categoria vazia já usa. */
.vazio--busca .vazio-titulo { max-width: 34ch; }
.vazio--busca .busca-termo { color: var(--ink); }
.busca-sugcats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-1); }
.sugcat {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2) var(--space-4);
  border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  background: var(--bg-surface); color: var(--ink);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.sugcat:hover { background: var(--bg-hover); border-color: var(--neutral-400); }
.sugcat .pz-ico { width: 24px; height: 24px; }
.sugcat .escopo-n { font-weight: 400; }