:root {
  --azul-escuro: #1a2f5c;
  --azul: #1e3a6f;
  --azul-claro: #6ba3d6;
  --azul-suave: #a8c8e8;
  --branco: #ffffff;
  --cinza: #f4f6fa;
  --texto: #1c2333;
  --texto-fraco: #6b7688;
  --raio: 14px;
  --sombra: 0 4px 20px rgba(26, 47, 92, .1);

  /* ==========================================================
     CORES DE SIGNIFICADO
     Cada cor diz UMA coisa, nas duas páginas. Sem esta lista o
     mesmo âmbar aparecia escrito à mão em dez lugares do
     pedido.css, e o --promo só funcionava por causa do valor de
     reserva: ele estava declarado no cards.css, que a página de
     pedido nem carrega.

     azul   = a marca e a navegação
     âmbar  = "olhe aqui" — promoção e campo a preencher
     verde  = ganho confirmado — economia, item aceito, enviado
     ocre   = ação destrutiva (limpar pedido). Vermelho puro, não:
              nesta página ele leria como erro de preenchimento.
     ========================================================== */
  --promo:        #e9a13b;
  --promo-forte:  #b8801e;   /* faixa de promoção, texto sobre claro */
  --promo-escuro: #8a5a12;   /* texto sobre fundo âmbar claro */
  --promo-fundo:  #fdf4e6;
  --promo-borda:  #ffd28a;

  --ok:        #2f7d4f;      /* economia, confirmado */
  --ok-fundo:  #f0f8f3;
  --ok-borda:  #b8dcc6;

  --zap:       #25d366;      /* verde do WhatsApp — só nele */
  --zap-hover: #1fb855;

  --risco:       #9a5a5a;    /* limpar pedido */
  --risco-fundo: #fbeaea;
  --risco-borda: #e6d0d0;

  /* linhas e contornos: dois tons, não sete */
  --borda:       #e3e9f2;    /* separador de card */
  --borda-campo: #dde5f0;    /* contorno de campo e botão */
  --borda-fina:  #eef2f8;    /* fio interno entre linhas */

  --azul-fundo:  #eef4fc;    /* aviso azul, linha escolhida */

  /* Ícones como máscara CSS: herdam a cor do bloco (currentColor não vale
     em background) e não pesam requisição nem markup. SVG embutido em
     data:, sem aspas duplas por causa da própria declaração. */
  --icone-etiqueta: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.4 11.6 12.4 2.6A2 2 0 0 0 11 2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 .6 1.4l9 9a2 2 0 0 0 2.8 0l7-7a2 2 0 0 0 0-2.8zM6.5 8A1.5 1.5 0 1 1 8 6.5 1.5 1.5 0 0 1 6.5 8z"/></svg>');
  --icone-caixa:    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 8.5 12 3 3 8.5v7L12 21l9-5.5v-7zM12 5.3l6.2 3.8L12 12.9 5.8 9.1 12 5.3zM5 10.9l6 3.7v5.1l-6-3.7v-5.1zm8 8.8v-5.1l6-3.7v5.1l-6 3.7z"/></svg>');
  --icone-alerta:   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2 1 21h22L12 2zm1 14h-2v2h2v-2zm0-7h-2v5h2V9z"/></svg>');
  --icone-check:    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>');
  --icone-pincel:   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.7 5.6 15.4 3.3a1 1 0 0 0-1.4 0l-9.4 9.4a1 1 0 0 0-.3.6l-.5 3.9a1 1 0 0 0 1.1 1.1l3.9-.5a1 1 0 0 0 .6-.3l9.4-9.4a1 1 0 0 0 0-1.4l-1.1-1.1zM3 20h18v2H3v-2z"/></svg>');

  /* ==========================================================
     SISTEMA TIPOGRÁFICO
     Nenhum tamanho, peso ou espaçamento fora desta lista.
     Antes existiam 51 tamanhos soltos no catálogo; um valor
     avulso quebra a hierarquia inteira, então tudo passa por aqui.
     ========================================================== */

  /* --- Escala de texto (razão ~1.15, ancorada em 16px) --- */
  --t-hero:  clamp(2rem, 7.5vw, 2.75rem);   /* 44px  nome da loja        */
  --t-h2:    clamp(1.5rem, 5vw, 2rem);      /* 32px  título de seção     */
  --t-h3:    clamp(1.25rem, 4.2vw, 1.5rem); /* 24px  título de categoria */
  --t-h4:    1.0625rem;                     /* 17px  nome do produto     */
  --t-lead:  .9375rem;                      /* 15px  texto de apoio      */
  --t-body:  .875rem;                       /* 14px  corpo padrão        */
  --t-sm:    .8125rem;                      /* 13px  secundário, modelos */
  --t-xs:    .75rem;                        /* 12px  legenda             */
  --t-2xs:   .6875rem;                      /* 11px  micro-rótulo        */
  --t-3xs:   .625rem;                       /* 10px  piso — nada menor   */

  /* --- Escala de preço (própria, para o número dominar o card) --- */
  --t-preco-xl: 1.625rem;    /* 26px  preço por unidade      */
  --t-preco-lg: 1.25rem;     /* 20px  preço na caixa fechada */
  --t-preco-md: 1.0625rem;   /* 17px  preço do pacote        */
  --t-preco-sm: .875rem;     /* 14px  preço em tabela/lista  */

  /* --- Pesos: só quatro. Negrito marca hierarquia, nunca ênfase solta. ---
     400 frase corrida · 500 micro-rótulo · 600 nome/rótulo · 700 preço/título */
  --p-normal: 400;
  --p-medio:  500;
  --p-forte:  600;
  --p-bold:   700;

  /* --- Espaçamento entre letras: inverso ao tamanho --- */
  --ls-marca:  .22em;    /* "CAPAS" do logotipo: bem aberto */
  --ls-hero:   .06em;    /* caixa alta grande: abre pouco   */
  --ls-titulo: -.005em;  /* título grande: fecha de leve    */
  --ls-label:  .07em;    /* caixa alta pequena: precisa ar  */

  /* --- Altura de linha --- */
  --lh-titulo: 1.2;
  --lh-corpo:  1.5;
  --lh-densa:  1.35;
  --lh-solta:  1.7;   /* endereço e rodapé: bloco curto que respira */
  --lh-justa:  1.15;  /* número grande de preço, uma linha só */
  --lh-aperta: 1.05;  /* nome da loja e número da caixa: bloco compacto */

  /* --- Glifos (setas, play, lupa): são ícones, não texto --- */
  --g-p: 1.25rem;   /* setas sobre a foto do card */
  --g-m: 1.5rem;    /* seta de rolagem, botões do lightbox */
  --g-g: 2rem;      /* play do vídeo */
}

/* Preço é número comparável: dígitos de largura fixa alinham as colunas
   e o valor nunca "dança" ao trocar de card. Sem tracking, nunca em caixa alta. */
.preco,
.grupo-valor,
.preco-unidade strong,
.caixa-valor strong,
.pacote-precos strong,
.caixa-qtd b,
.grupo-caixa b {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: 0;
  text-transform: none;
}

/* "R$" é serviço, não informação: recua para o número receber o olho. */
.rs {
  margin-right: .18em;
  font-weight: var(--p-forte);
  opacity: .72;
}

/* O cifrão só encolhe nos preços de vitrine, que têm corpo para isso —
   é o tratamento de Apple, Amazon e Samsung. Em preço de tabela (13px)
   encolher deixaria o símbolo com 8px, ilegível. */
.preco-unidade strong .rs,
.caixa-valor strong .rs {
  font-size: .58em;
  vertical-align: .1em;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 20px; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--texto);
  background: var(--cinza);
  line-height: var(--lh-corpo);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* ---------- o atributo hidden manda ----------
   A regra [hidden]{display:none} vem da folha do navegador, e QUALQUER
   regra nossa com `display` a vence — origem de autor ganha da origem do
   navegador, mesmo com especificidade menor. Foi assim que a linha acima
   (`img { display: block }`) desligou o hidden de toda imagem do projeto,
   e foi assim que a dica de economia, o aviso de mínimo e a lista de
   modelos do catálogo reapareceram vazios em quatro ocasiões diferentes.

   Com !important o atributo volta a ser a última palavra, e não é preciso
   lembrar de escrever `seletor[hidden]{display:none}` a cada componente
   novo. Esconder algo e ainda querer exibi-lo por CSS não é caso de uso. */
[hidden] { display: none !important; }

#barra-progresso {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--azul-claro), var(--branco));
  transform: scaleX(0);
  transform-origin: left;
  z-index: 100;
}

/* ---------- Capa ---------- */
.capa {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 48px 24px;
  background:
    radial-gradient(ellipse at 50% 0%, #2a4a85 0%, transparent 60%),
    linear-gradient(165deg, var(--azul) 0%, var(--azul-escuro) 100%);
  color: var(--branco);
  position: relative;
  overflow: hidden;
}

.capa::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 120px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .18));
  pointer-events: none;
}

.capa-conteudo { max-width: 560px; position: relative; z-index: 1; }

.capa img {
  width: min(140px, 34vw);
  height: auto;              /* preserva a proporcao real do arquivo */
  aspect-ratio: 420 / 488;
  object-fit: contain;
  margin: 0 auto 20px;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .34));
}

/* único 800 do catálogo: é a marca, funciona como logotipo */
.capa h1 {
  font-size: var(--t-hero);
  font-weight: 800;
  letter-spacing: var(--ls-hero);
  text-transform: uppercase;
  line-height: var(--lh-aperta);
}

.capa .subtitulo {
  color: var(--azul-suave);
  font-size: var(--t-xs);
  font-weight: var(--p-medio);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  margin-top: 10px;
}

.capa .chamada {
  margin-top: 12px;
  color: var(--branco);
  font-size: var(--t-lead);
  font-weight: var(--p-normal);
  letter-spacing: 0;
}

.linhas-produto {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 8px;
  margin-top: 14px;
  list-style: none;
}

.linhas-produto li {
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--azul-suave);
  font-size: var(--t-2xs);
  font-weight: var(--p-forte);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.divisor {
  width: 64px; height: 2px;
  background: var(--azul-claro);
  margin: 26px auto;
  border-radius: 2px;
}

.capa .descricao {
  color: rgba(255, 255, 255, .84);
  font-size: var(--t-lead);
  max-width: 400px;
  margin: 0 auto;
}

.endereco {
  margin-top: 30px;
  padding: 18px 22px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--raio);
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(6px);
  font-size: var(--t-body);
  line-height: var(--lh-solta);
}

.endereco strong {
  display: block;
  color: var(--azul-suave);
  font-size: var(--t-2xs);
  font-weight: var(--p-forte);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.capa-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 26px;
  padding: 14px 30px;
  background: var(--branco);
  color: var(--azul-escuro);
  border-radius: 999px;
  font-weight: var(--p-forte);
  font-size: var(--t-body);
  text-decoration: none;
  transition: transform .18s, box-shadow .18s;
}

.capa-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .28); }

.seta-scroll {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .55);
  font-size: var(--g-m);
  text-decoration: none;
  animation: pula 2s ease-in-out infinite;
  z-index: 1;
}

@keyframes pula {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 9px); }
}

/* ---------- Arte de abertura ----------
   Primeira coisa da página: o cliente vê o que a loja tem antes de qualquer
   texto. A arte já traz o painel azul da marca no topo, então ela encosta no
   topo da janela sem respiro nem moldura. */
.abertura {
  margin: 0;
  background: var(--azul-escuro);   /* cobre qualquer folga de arredondamento */
  line-height: 0;                   /* sem o vão que a linha de texto deixaria */
}

.abertura img {
  width: 100%;
  height: auto;
}

/* ---------- Contato, logo abaixo da arte ----------
   Fundo azul para separar a arte (que termina em branco) do índice
   (que também é branco). Sem isso os três blocos viram um borrão. */
.contato {
  padding: 34px 24px 40px;
  text-align: center;
  background: linear-gradient(168deg, var(--azul) 0%, var(--azul-escuro) 100%);
  color: var(--branco);
}

.contato .redes { margin: 0 auto 22px; }
.contato .endereco { max-width: 420px; margin: 0 auto; }

/* ---------- Índice ----------
   Sem `min-height: 100svh`, e o motivo importa.

   A ideia era o índice ocupar a primeira tela inteira. Funcionava em
   monitor de 1280: as 9 categorias em 3 linhas davam quase exatamente a
   altura da janela. Em monitor grande, não — o conteúdo continua com
   689px e a seção esticava até 988px, deixando **179px de branco** entre
   a última categoria e a busca. O vão dizia "acabou a página" bem onde
   ela continua.

   Sem altura forçada, quem manda no espaço é o padding, e ele é o mesmo
   em qualquer tela. Medido em 1920×1080, 1280×900 e no celular. */
.indice {
  padding: 56px 20px 64px;
  background: var(--branco);
}

.indice-inner { max-width: 1000px; margin: 0 auto; }

.secao-titulo { text-align: center; margin-bottom: 30px; }

/* título grande em caixa alta grita; caixa mista lê mais rápido e
   é o que as grandes marcas usam acima de ~20px */
.secao-titulo h2 {
  font-size: var(--t-h2);
  font-weight: var(--p-bold);
  color: var(--azul-escuro);
  letter-spacing: var(--ls-titulo);
  line-height: var(--lh-titulo);
}

.secao-titulo h2 b { color: var(--azul-claro); font-weight: var(--p-bold); }

.secao-titulo .risco {
  display: block;
  width: 74px; height: 4px;
  margin: 12px auto 0;
  background: var(--azul-claro);
  border-radius: 2px;
}

.secao-titulo p { color: var(--texto-fraco); font-size: var(--t-body); margin-top: 12px; }

/* grade de categorias, no estilo da folha de navegação do impresso */
#indice-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.indice-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 22px 14px 16px;
  background: var(--cinza);
  border: 1.5px solid #e6ecf5;
  border-radius: 14px;
  text-align: center;
  text-decoration: none;
  color: var(--texto);
  transition: background .16s, border-color .16s, transform .16s, box-shadow .16s;
}

.indice-item:hover {
  background: var(--branco);
  border-color: var(--azul-claro);
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(26, 47, 92, .12);
}

.indice-item.ativo {
  background: var(--branco);
  border-color: var(--azul);
  box-shadow: var(--sombra);
}

.indice-icone {
  width: 54px; height: 54px;
  margin-bottom: 10px;
  color: var(--azul);
}

.indice-item.ativo .indice-icone { color: var(--azul-claro); }

/* sem caixa alta: o rótulo carrega nome de marca (MagSafe, MacBook)
   e maiúscula apagaria a grafia oficial */
.indice-item strong {
  font-size: var(--t-body);
  font-weight: var(--p-forte);
  line-height: var(--lh-densa);
  letter-spacing: var(--ls-titulo);
  color: var(--azul-escuro);
}

.indice-item small {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid #e2e9f3;
  width: 100%;
  color: var(--texto-fraco);
  font-size: var(--t-2xs);
  font-weight: var(--p-medio);
}

/* ---------- Categorias ---------- */
.categoria { padding: 52px 20px 20px; scroll-margin-top: 12px; }
.categoria:nth-child(even) { background: var(--branco); }

.categoria-head {
  max-width: 1100px;
  margin: 0 auto 26px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--azul-suave);
}

.categoria-num {
  flex-shrink: 0;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--azul), var(--azul-escuro));
  color: var(--branco);
  border-radius: 12px;
  font-weight: var(--p-bold);
  font-size: var(--t-h4);
  font-variant-numeric: tabular-nums;
}

.categoria-head h2 {
  font-size: var(--t-h3);
  font-weight: var(--p-bold);
  color: var(--azul-escuro);
  letter-spacing: var(--ls-titulo);
  line-height: var(--lh-titulo);
}

.categoria-head p { color: var(--texto-fraco); font-size: var(--t-body); margin-top: 3px; }

/* ---------- Blocos de produto ---------- */
.blocos {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bloco {
  background: var(--branco);
  border: 1px solid #e3e9f2;
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.categoria:nth-child(even) .bloco { background: var(--cinza); }

.bloco-head {
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--azul) 0%, var(--azul-escuro) 100%);
  color: var(--branco);
}

.bloco-head h3 {
  font-size: var(--t-h4);
  font-weight: var(--p-bold);
  letter-spacing: var(--ls-titulo);
  line-height: var(--lh-titulo);
}

.obs {
  margin: 0;
  padding: 10px 16px;
  background: #fff6e5;
  border-bottom: 1px solid #f0e2c8;
  color: #8a5f14;
  font-size: var(--t-sm);
  font-weight: var(--p-medio);
}

/* imagem original à esquerda, tabelas à direita */
.bloco-corpo {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 18px;
  padding: 16px;
  align-items: start;
}

.foto {
  position: sticky;
  top: 118px;
  margin: 0;
  cursor: zoom-in;
}

.foto img {
  width: 100%;
  height: auto;
  border: 1px solid #e3e9f2;
  border-radius: 10px;
  background: var(--cinza);
  transition: box-shadow .18s, transform .18s;
}

.foto:hover img { box-shadow: 0 8px 24px rgba(26, 47, 92, .2); transform: translateY(-2px); }

.foto figcaption {
  margin-top: 7px;
  color: var(--texto-fraco);
  font-size: var(--t-2xs);
  font-weight: var(--p-medio);
  letter-spacing: var(--ls-label);
  text-align: center;
  text-transform: uppercase;
}

.tabelas { min-width: 0; }

.secao-bloco + .secao-bloco { margin-top: 18px; padding-top: 14px; border-top: 2px solid #e8eef7; }

.secao-produto {
  margin-bottom: 10px;
  color: var(--azul-escuro);
  font-size: var(--t-body);
  font-weight: var(--p-bold);
  letter-spacing: 0;
}

.tabela-marca + .tabela-marca { margin-top: 14px; }

.marca-nome { margin-bottom: 7px; }

.marca-tag {
  display: inline-block;
  padding: 3px 11px;
  background: var(--azul-suave);
  color: var(--azul-escuro);
  border-radius: 999px;
  font-size: var(--t-2xs);
  font-weight: var(--p-forte);
  letter-spacing: 0;
  /* a tag É o nome da marca — "iPhone", não "IPHONE" */
}

.bloco table { width: 100%; border-collapse: collapse; font-size: var(--t-body); }

.bloco thead th {
  padding: 6px 8px;
  border-bottom: 1.5px solid var(--azul-suave);
  color: var(--texto-fraco);
  font-size: var(--t-2xs);
  font-weight: var(--p-forte);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-align: left;
}

.bloco thead th:last-child { text-align: right; }

.bloco tbody td { padding: 7px 8px; border-bottom: 1px solid #eef2f8; }
.bloco tbody tr:last-child td { border-bottom: none; }
.bloco tbody tr:hover { background: #f0f5fc; }

.preco { text-align: right; font-weight: var(--p-bold); color: var(--azul); white-space: nowrap; }
.caixa { color: #2f7d4f; }

.sem-resultado {
  max-width: 560px;
  margin: 0 auto;
  padding: 26px;
  text-align: center;
  color: var(--texto-fraco);
  font-size: var(--t-lead);
}

/* ---------- Ferramentas (busca + filtro) ---------- */
.ferramentas {
  position: sticky;
  top: 0;
  z-index: 80;
  padding: 12px 20px;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e3e9f2;
}

.ferramentas-inner { max-width: 1100px; margin: 0 auto; }

.campo-busca {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  background: var(--cinza);
  border: 1.5px solid #dde5f0;
  border-radius: 999px;
  transition: border-color .16s;
}

.campo-busca:focus-within { border-color: var(--azul-claro); background: var(--branco); }

.lupa { color: var(--azul-claro); font-size: var(--t-h4); transform: rotate(-45deg); }

#busca {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: var(--t-lead);
  color: var(--texto);
  outline: none;
}

.chips {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.chips:not(:empty) { margin-top: 10px; }

.chips::-webkit-scrollbar { display: none; }

.chip {
  flex-shrink: 0;
  padding: 7px 15px;
  background: var(--cinza);
  border: 1.5px solid #dde5f0;
  border-radius: 999px;
  color: var(--texto-fraco);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: var(--p-forte);
  white-space: nowrap;
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
}

.chip:hover { border-color: var(--azul-claro); }

.chip.ativo {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--branco);
}

/* promoção em âmbar: vermelho lê como aviso; âmbar convida sem alarmar */
.chip-promo {
  background: #fdf4e6;
  border-color: #e9a13b;
  color: #8a5a12;
  font-weight: var(--p-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.chip-promo::before { content: '★ '; }
.chip-promo:hover { background: #fbe9cd; border-color: #d98f22; }

.chip-promo.ativo {
  background: #e9a13b;
  border-color: #e9a13b;
  color: #3d2a00;
}

.contagem {
  margin-top: 9px;
  color: var(--azul);
  font-size: var(--t-sm);
  font-weight: var(--p-forte);
  font-variant-numeric: tabular-nums;
}

.indice-item.indisponivel { opacity: .35; }

.voltar-topo {
  display: block;
  width: fit-content;
  margin: 28px auto 0;
  padding: 9px 20px;
  color: var(--azul);
  font-size: var(--t-body);
  font-weight: var(--p-forte);
  text-decoration: none;
  border: 1.5px solid var(--azul-suave);
  border-radius: 999px;
  transition: background .16s, color .16s;
}

.voltar-topo:hover { background: var(--azul); color: var(--branco); border-color: var(--azul); }

/* ---------- Rodapé ---------- */
.rodape {
  margin-top: 48px;
  /* o padding de baixo é generoso de propósito: os botões flutuantes
     ficam por cima e não podem cobrir o endereço */
  padding: 48px 24px 96px;
  background: linear-gradient(165deg, var(--azul) 0%, var(--azul-escuro) 100%);
  color: var(--branco);
  text-align: center;
}

.rodape img { width: 78px; margin: 0 auto 18px; opacity: .95; }
.rodape h3 { font-size: var(--t-h4); font-weight: var(--p-bold); letter-spacing: var(--ls-label); text-transform: uppercase; }
.rodape p { color: rgba(255, 255, 255, .74); font-size: var(--t-body); margin-top: 8px; line-height: var(--lh-solta); }

.rodape-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.rodape-links a {
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  color: var(--branco);
  font-size: var(--t-body);
  text-decoration: none;
  transition: background .16s;
}

.rodape-links a:hover { background: rgba(255, 255, 255, .14); }

.copyright {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, .5);
}

/* ---------- Chamada para o pedido ----------
   Lateral direita, acima do WhatsApp. Pulsa em âmbar: vermelho lê como
   aviso ou erro, âmbar convida. Mesma cor do selo de promoção. */
.fazer-pedido {
  position: fixed;
  right: 16px; bottom: 76px;
  z-index: 91;
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: calc(100vw - 32px);
  padding: 12px 20px 12px 15px;
  background: linear-gradient(135deg, #f2ae4a 0%, var(--promo, #e9a13b) 100%);
  border-radius: 999px;
  color: #3d2a00;
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(180, 118, 20, .45);
  animation: chama-pedido 2.2s ease-in-out infinite;
  transition: transform .18s;
}

.fazer-pedido:hover { transform: scale(1.04); animation: none; }

.fp-icone {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, .85);
  border-radius: 50%;
}

.fp-icone svg { width: 19px; height: 19px; fill: #8a5a12; }

.fp-texto { line-height: 1.2; }
.fp-texto b { display: block; font-size: var(--t-body); font-weight: var(--p-bold); }

.fp-texto small {
  display: block;
  margin-top: 1px;
  font-size: var(--t-2xs);
  font-weight: var(--p-medio);
  color: #6b4a08;
}

@keyframes chama-pedido {
  0%, 100% { box-shadow: 0 6px 22px rgba(180, 118, 20, .45), 0 0 0 0 rgba(233, 161, 59, .6); }
  50%      { box-shadow: 0 6px 22px rgba(180, 118, 20, .45), 0 0 0 12px rgba(233, 161, 59, 0); }
}

@media (max-width: 560px) {
  /* Dois botões flutuantes com texto tapavam a primeira fileira de cards.
     O do pedido é o caminho da compra e mantém o texto; o WhatsApp vira
     só o ícone, redondo, ao lado — continua à mão sem roubar a tela. */
  .fazer-pedido { right: 12px; bottom: 14px; padding: 10px 16px 10px 12px; gap: 9px; }
  .fp-icone { width: 30px; height: 30px; }
  .fp-texto b { font-size: var(--t-sm); }
  .fp-texto small { display: none; }

}

/* ---------- Botão flutuante ---------- */
.zap {
  position: fixed;
  right: 16px; bottom: 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  background: #25d366;
  color: #fff;
  border-radius: 999px;
  font-weight: var(--p-forte);
  font-size: var(--t-body);
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(37, 211, 102, .42);
  z-index: 90;
  transition: transform .18s;
}

.zap:hover { transform: scale(1.05); }
.zap svg { width: 20px; height: 20px; fill: currentColor; }

/* ---------- Lightbox ---------- */
#lightbox {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(10, 18, 38, .93);
  z-index: 200;
  cursor: zoom-out;
}

#lightbox.aberto { display: grid; }

#lightbox img {
  max-width: 100%;
  max-height: 92vh;
  width: auto;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}

#lightbox::after {
  content: 'Toque para fechar';
  position: absolute;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .55);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
}

#lightbox figcaption {
  margin-top: 14px;
  color: rgba(255, 255, 255, .85);
  font-size: var(--t-body);
  font-weight: var(--p-forte);
  letter-spacing: 0;
  text-align: center;
}

@media (max-width: 780px) {
  .bloco-corpo { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  .foto { position: static; max-width: 340px; margin: 0 auto; }
}

@media (max-width: 560px) {
  .categoria { padding: 40px 14px 16px; }
  .ferramentas { padding: 10px 14px; }
  /* corpo e rótulos já estão no piso da escala: só o que é grande encolhe */
  .bloco table { font-size: var(--t-sm); }

  /* WhatsApp vira ícone redondo à esquerda. Com os dois botões escritos,
     eles tapavam a primeira fileira de cards. O do pedido é o caminho da
     compra e fica com o texto; este continua à mão sem roubar tela.
     Precisa estar NESTE bloco: é o último @media do arquivo e sobrescreve
     qualquer regra .zap declarada antes. */
  .zap {
    right: auto;
    left: 12px;
    bottom: 14px;
    width: 52px; height: 52px;
    padding: 0;
    justify-content: center;
    font-size: 0;
  }

  .zap svg { width: 26px; height: 26px; }

  /* Índice em duas colunas no celular.
     Com minmax(190px) ele caía para uma coluna só e as 9 categorias
     ocupavam 2,2 telas — o cliente rolava o atalho inteiro antes de
     chegar no produto. Em duas colunas cabe em pouco mais de uma tela. */
  .indice { padding: 30px 14px 34px; }
  .secao-titulo { margin-bottom: 20px; }

  #indice-lista {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .indice-item { padding: 14px 8px 12px; border-radius: 11px; }
  .indice-icone { width: 38px; height: 38px; margin-bottom: 6px; }
  .indice-item strong { font-size: var(--t-sm); }
  .indice-item small { margin-top: 4px; padding-top: 6px; font-size: var(--t-3xs); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}