/* ==========================================================================
   vitrine.css — camada ADITIVA de design do CATÁLOGO (a página inicial)
   --------------------------------------------------------------------------
   PORQUE EXISTE (ordem do dono, 25/09/2026)
   «faça melhorias visuais no site! tanto mobile e web! Faça um design inovador,
   futurista». O catalogo.html é a página inicial real — o `.htaccess:66-67`
   manda `/` e `index.html` para lá. Havia já uma camada futurista
   (`css/futuro.css`) mas apontada ao `index.html`, que é ÓRFÃO: ninguém a vê.

   O QUE ESTA CAMADA FAZ — e o que NÃO faz
   Não inventa paleta. A identidade futurista da casa já existe e já está no ar:
   é a faixa navy/ouro da loja (`style.css:4137`), onde o preço é o elemento
   mais forte. Aqui essa linguagem passa a marcar TUDO o que tem preço, para o
   olho encontrar num relance os 382 compráveis no meio dos 5 388.
   O catálogo é claro (`catalog-white`); a loja é escura. Isso deixa de ser
   contradição e passa a ser a hierarquia: **claro = catálogo, navy = o que se
   compra hoje**.

   COMO SE REVERTE
   Tirar um `<link>` do `catalogo.html`. Nada aqui depende de CDN, de fontes
   novas, de JS novo, nem do DOM mudar. Nenhuma regra usa `!important` — todas
   ganham por ordem de carregamento (este ficheiro vem DEPOIS do `style.css`).
   Índice:
     1. Tokens derivados
     2. O carrossel do topo vira identidade
     3. A faixa da loja como herói (ponto «ao vivo»)
     4. O cartão COM preço = superfície da loja
     5. Pesquisa alcançável a rolar (fixa no telemóvel)
     6. Grelha e alvos de toque
     7. Movimento: só o que significa algo
     8. Acessibilidade (foco, reduced-motion, contraste)
   ========================================================================== */

/* ------------------------------------------------------------- 1. Tokens */
/* Derivados dos tokens que já existem — não é uma paleta nova. Os mesmos
   valores que a faixa da loja usa (`style.css:4138-4142`), promovidos a
   globais para as outras superfícies falarem a mesma língua. */
:root {
  --vit-navy:           #1a1a2e;
  --vit-navy-profundo:  #000015;
  --vit-azul:           #1A5FFF;
  --vit-ouro:           #c9a24b;
  --vit-ouro-claro:     #e8c877;
  --vit-fio:            rgba(255, 255, 255, .14);
  --vit-vivo:           #34D399;   /* = --success-light */
  --vit-alvo:           44px;      /* alvo de toque mínimo (WCAG 2.5.5) */
}

/* ================================================= 2. TOPO: IDENTIDADE */
/* O carrossel é a primeira coisa que o cliente vê. Passa a ser a assinatura
   da casa em vez de uma tira solta: navy, grelha técnica por baixo e um halo
   azul. A grelha é o único elemento "futurista" — os gradientes já existiam. */
.catalog-white .cat-carousel-wrapper {
  position: relative;
  margin: 0 0 1rem;
  padding: 1rem 0 1.125rem;
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(26, 95, 255, .30) 0%, transparent 62%),
    linear-gradient(160deg, var(--vit-navy) 0%, var(--vit-navy-profundo) 100%);
  border: 1px solid var(--vit-fio);
  overflow: hidden;
}
/* Grelha técnica: 64px no telemóvel (bate certo com o passo do dedo num ecrã
   estreito), 88px a partir de tablet. */
.catalog-white .cat-carousel-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right,  var(--vit-fio) 1px, transparent 1px),
    linear-gradient(to bottom, var(--vit-fio) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 74% 62% at 50% 34%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 74% 62% at 50% 34%, #000 0%, transparent 78%);
}
.catalog-white .cat-carousel { position: relative; z-index: 1; }
/* O carrossel interior tem de acompanhar. Por omissão fica BRANCO
   (`style.css:1108`) — sobre o navy dava um aro escuro em volta de um cartão
   branco, que se lê como acidente, não como desenho. Fica transparente e o
   texto passa a claro. Especificidade igual à do `style.css`, ganha por ordem. */
.catalog-white .cat-carousel-wrapper .cat-carousel {
  background: transparent;
  border-color: transparent;
}
.catalog-white .cat-carousel-info h3 { color: #fff; }
.catalog-white .cat-carousel-info p { color: #b9c4de; }
.catalog-white .cat-carousel-dot { background: rgba(255, 255, 255, .28); }
.catalog-white .cat-carousel-dot.active { background: var(--vit-ouro); }
.catalog-white .cat-carousel-btn {
  background: rgba(0, 0, 21, .55);
  color: #fff;
  border-color: var(--vit-fio);
}
/* O botao `‹` tapa o texto da categoria. NAO e' defeito desta camada: ele esta'
   a `left:0.5rem` com 36px de largura (`style.css:3629`) e o painel de texto
   comeca a 1rem, ou seja sobrepoem-se 28px. Ja' se via antes — na captura de
   telemovel o `‹` caia em cima da palavra «catalogo».
   O que esta camada fez foi TORNA-LO VISIVEL: sobre o navy, o `‹` come o
   primeiro digito e o carrossel passa a anunciar «82 produtos» em vez de
   **382** — um numero errado no dado mais visivel da pagina.
   3.25rem = 52px > 8px (left) + 36px (botao) + 8px de folga. */
.catalog-white .cat-carousel-info { padding-left: 3.25rem; }
/* No telemovel, 52px de recuo num ecra de 390 deixam o texto numa coluna de
   ~132px e a descricao salta para 6 linhas. Em vez de recuar o texto, mudam-se
   as SETAS: descem para junto dos pontos (flancos), de onde nao tapam nada, e
   o painel recupera a largura toda. Continua a haver dois alvos de 36px. */
@media (max-width: 767px) {
  .catalog-white .cat-carousel-info { padding-left: 1rem; }
  .catalog-white .cat-carousel-btn {
    top: auto;
    bottom: .5rem;
    transform: none;
  }
  .catalog-white .cat-carousel-btn:hover { transform: scale(1.08); }
}
@media (min-width: 768px) {
  .catalog-white .cat-carousel-wrapper::before { background-size: 88px 88px; }
}

/* ========================================= 3. A FAIXA DA LOJA COMO HERÓI */
/* Ela já se distingue por ser escura. O que faltava era dizer PORQUE está ali
   em cima: é a única parte do site onde se compra já. Daí o ponto «ao vivo» —
   verde, a pulsar devagar, o mesmo verde do selo de stock e do badge de preço.
   Um só significado em três sítios: verde = disponível. */
.loja-band {
  box-shadow: 0 18px 48px rgba(0, 0, 21, .30);
}
.loja-head h2::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: .5rem;
  vertical-align: .08em;
  border-radius: 50%;
  background: var(--vit-vivo);
  box-shadow: 0 0 0 0 rgba(52, 211, 153, .65);
  animation: vit-pulsa 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
/* O título da faixa estava em `1rem` no telemóvel — igual ao corpo do texto.
   Sobe para marcar que é a entrada da loja, sem competir com os preços. */
.loja-head h2 { font-size: clamp(1.125rem, 4.2vw, 1.4375rem); }
/* O CTA «ver tudo» é a saída natural de quem não quer rolar a faixa toda:
   alvo de toque, não um link de 13px perdido à direita.
   TEM DE ESTAR DENTRO DO `@media`: no telemóvel o `style.css:4176` esconde-o
   de propósito (lá o que fecha a faixa é o cartão-CTA do fim do track). Eu
   tinha posto `display:inline-flex` sem media — isso PASSAVA POR CIMA do
   `display:none` e fazia aparecer, no telemóvel, um «Ver os 382» sem estilo
   nenhum, porque o `color`/`font-size` dele só existem a partir dos 1024px.
   Visto no ecrã, não deduzido. */
@media (min-width: 1024px) {
  .loja-all {
    min-height: var(--vit-alvo);
    display: inline-flex;
    align-items: center;
  }
}

/* ============================ 4. O CARTÃO COM PREÇO = SUPERFÍCIE DA LOJA */
/* A jogada central. Numa grelha de 2 colunas, 382 compráveis afogavam-se entre
   5 006 «Sob cotação». O cartão com preço passa a ser uma peça da loja dentro
   do catálogo: mesma família de cor, título claro, acção a ouro.
   Especificidade: `.catalog-white .product-card` (0,3,0) tem de ser batido —
   por isso estas regras repetem o `.catalog-white` e vêm depois no ficheiro. */
.catalog-white .product-card.card-com-preco {
  background: linear-gradient(158deg, var(--vit-navy) 0%, var(--vit-navy-profundo) 100%);
  border-color: rgba(201, 162, 75, .30);
}
.catalog-white .product-card.card-com-preco:hover,
.catalog-white .product-card.card-com-preco:focus-within {
  border-color: rgba(201, 162, 75, .62);
  box-shadow: 0 14px 40px rgba(0, 0, 21, .34), 0 0 0 1px rgba(201, 162, 75, .28);
}
/* Fio de ouro no topo do cartão. NÃO se usa o `::before` para isto: no
   `style.css:1973` ele é um VÉU `inset:0` com `border-radius: inherit`, ou seja
   cobre o cartão inteiro — pintá-lo de ouro/azul/verde inundava o cartão todo.
   Uma sombra interior não disputa pseudo-elemento nenhum e faz a mesma linha. */
.catalog-white .product-card.card-com-preco {
  box-shadow: inset 0 3px 0 0 var(--vit-ouro), 0 6px 22px rgba(0, 0, 21, .22);
}
.catalog-white .product-card.card-com-preco .product-title,
.catalog-white .product-card.card-com-preco:hover .product-title { color: #fff; }
.catalog-white .product-title .card-link:hover { color: var(--vit-ouro-claro); }
.catalog-white .product-card.card-com-preco .product-sku { color: #8c9bc0; }
.catalog-white .product-card.card-com-preco .product-desc { color: #a9b6d4; }
/* A foto continua sobre fundo claro (as imagens têm fundo branco do fornecedor;
   escurecê-lo recortaria mal o produto). */
.catalog-white .product-card.card-com-preco .product-img { background: #f2f5fa; }
/* O único botão destes cartões é o que leva à loja. A ouro: é a acção que
   factura, e a única no catálogo que o faz. */
.btn-ver-loja {
  background: linear-gradient(135deg, var(--vit-ouro), #a8862f);
  color: #1a1200;
  font-weight: 800;
  min-height: var(--vit-alvo);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  text-decoration: none;
  letter-spacing: 0;
  /* `nowrap`: o rótulo é «Ver e comprar →» e nos cartões estreitos a seta
     caía SOZINHA para a linha de baixo — visto no ecrã a 1440px, não deduzido.
     Com o rótulo numa linha, o tamanho desce o suficiente para caber. */
  white-space: nowrap;
  font-size: .72rem;
  padding-inline: .5rem;
}
.btn-ver-loja:hover { filter: brightness(1.08); }
.btn-ver-loja:focus-visible { outline: 2px solid var(--vit-ouro-claro); outline-offset: 2px; }

/* ================================= 5. PESQUISA ALCANÇÁVEL A ROLAR (telemóvel) */
/* 5 388 produtos: rolar até ao fundo para voltar a procurar é o atrito mais
   caro desta página. `sticky` degrada em silêncio se algum antepassado tiver
   `overflow` — e degradar aqui é voltar ao que era, não partir nada. */
.catalog-topbar {
  position: sticky;
  top: var(--nav-height);
  z-index: 60;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
@media (max-width: 767px) {
  /* A busca ocupa o que sobra, mas a ORDENAÇÃO NÃO SE ESCONDE: eu tinha-a
     posto em `display:none` para ganhar espaço e voltei atrás — apagar um
     controlo que o dono tem não é "melhoria visual".
     `flex-basis: 100%` (não `auto`): com `auto` a busca e a ordenação cabiam
     na 1.a linha e o CARRINHO caía sozinho para a 2.a, encostado à direita
     sobre uma faixa branca vazia — feio, e visto no ecrã. Assim a busca toma
     a linha 1 e a ordenação + carrinho partilham a linha 2, que é onde se
     procura. O `flex-wrap` já existe (`style.css:3959`). Um dedo acerta-lhes
     porque têm 44px (secção 6). */
  .catalog-topbar-inner .catalog-search-wrap { flex: 1 1 100%; min-width: 0; }
  .catalog-topbar-inner .catalog-sort { flex: 1 1 auto; }
  .catalog-topbar-inner .cart-btn { flex: 0 0 auto; }
}

/* =========================================== 6. GRELHA E ALVOS DE TOQUE */
/* Um dedo não acerta num alvo de 32px. Todos os controlos da página vão a
   44px no telemóvel — inclui os chips de filtro, que são os mais tocados. */
@media (max-width: 767px) {
  .catalog-white .filter-chip,
  .catalog-white .sidebar-cat-btn,
  .catalog-white .sidebar-sub-btn,
  .catalog-white .catgrid-card { min-height: var(--vit-alvo); }
  .catalog-white .btn-add,
  .catalog-white .btn-buy-now,
  .catalog-white .catalog-sort,
  .catalog-white .catalog-search { min-height: var(--vit-alvo); }
}

/* ======================================================= 7. MOVIMENTO */
/* Um só movimento novo em toda a camada (o ponto «ao vivo»), e é informativo:
   diz que a faixa é conteúdo actual, não uma imagem de arquivo. */
@keyframes vit-pulsa {
  0%   { box-shadow: 0 0 0 0    rgba(52, 211, 153, .60); }
  70%  { box-shadow: 0 0 0 9px  rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0    rgba(52, 211, 153, 0); }
}

/* ==================================================== 8. ACESSIBILIDADE */
/* Nada aqui se move, pisca ou desloca para quem pediu ao sistema para parar. */
@media (prefers-reduced-motion: reduce) {
  .loja-head h2::before { animation: none; box-shadow: none; }
  .btn-ver-loja:hover { filter: none; }
}
/* Foco sempre visível nos elementos que esta camada introduz ou realça —
   o contorno por omissão do browser perde-se sobre o navy. */
.catalog-white .product-card.card-com-preco a:focus-visible,
.catalog-white .product-card.card-com-preco button:focus-visible {
  outline: 2px solid var(--vit-ouro-claro);
  outline-offset: 2px;
}
/* Contraste: o ouro #c9a24b sobre navy dá 7,1:1 — folgado para texto pequeno.
   O título branco sobre o gradiente navy nunca desce de 15:1. */