:root {
  --azul: #005088;
  --azul-hover: #003B66;
  --azul-suave: #EAF3FA;
  --laranja: #FF6600;
  --laranja-hover: #E05A00;
  --verde: #10B981;
  --verde-fundo: #E9FAF3;
  --fundo: #F7F3EE;
  --branco: #FFFFFF;
  --cinza-ui: #EDF3F8;
  --borda: #E1EAF2;
  --texto: #172033;
  --texto-suave: #5B6B7B;
  /* Pilhas de tipografia resolvidas LOCALMENTE (mesma ordem do protótipo).
     "Montserrat" e "Inter" são apenas preference: o tema não baixa webfont de
     fora, então quem não tiver a fonte instalada no sistema cai direto na
     pilha do sistema logo abaixo. Nenhuma fonte é empacotada no tema. */
  --fonte-titulo: "Montserrat", "Arial Black", Arial, sans-serif;
  --fonte-geral: "Inter", "Segoe UI", Arial, sans-serif;
  --raio: 14px;
  --raio-oferta: 12px;
  --sombra: 0 1px 3px rgba(0, 80, 136, 0.08), 0 6px 16px rgba(0, 80, 136, 0.06);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--fonte-geral);
  font-weight: 500;
  color: var(--texto);
  background: var(--fundo);
  line-height: 1.5;
}

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

button {
  font-family: var(--fonte-geral);
}

button:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(0, 80, 136, 0.35);
  outline-offset: 2px;
}

/* ===================== Cabeçalho leve ===================== */

.cabecalho {
  background: var(--branco);
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 1px 4px rgba(0, 80, 136, 0.05);
}

.cabecalho-topo {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 20px;
  display: grid;
  grid-template-columns: auto minmax(240px, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  white-space: nowrap;
}

.logomarca {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--branco);
  background: linear-gradient(135deg, var(--azul) 0 50%, var(--laranja) 50% 100%);
  border-radius: 11px;
  box-shadow: 0 2px 6px rgba(0, 80, 136, 0.25);
}

.logo-nome {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.28rem;
  color: var(--azul);
  letter-spacing: -0.01em;
}

.logo-nome strong {
  color: var(--laranja);
}

.busca-wrap {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.campo-relativo {
  position: relative;
  flex: 1;
  min-width: 0;
}

.campo-busca {
  width: 100%;
  height: 46px;
  padding: 0 46px 0 18px;
  font-family: var(--fonte-geral);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--texto);
  background: var(--azul-suave);
  border: 2px solid transparent;
  border-radius: 999px;
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.campo-busca::placeholder {
  color: #6b7f92;
}

.campo-busca:focus {
  background: var(--branco);
  border-color: var(--azul);
  box-shadow: 0 0 0 4px rgba(0, 80, 136, 0.12);
}

/* WP4.1 — X DUPLO (correção pontual).
   O segundo X era o cancel button NATIVO do `input[type="search"]`
   (Chromium/Edge/WebKit), desenhado pelo navegador ao lado do botão
   personalizado `.btn-limpar`. O campo continua `type="search"` e o X
   personalizado continua exatamente igual: só o controle nativo é
   removido, sem alterar tamanho, posição, cor ou comportamento do
   botão do tema. */
.campo-busca::-webkit-search-cancel-button,
.campo-busca::-webkit-search-decoration,
.campo-busca::-webkit-search-results-button,
.campo-busca::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.btn-limpar {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #6b7f92;
  font-size: 1.25rem;
  cursor: pointer;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.btn-limpar:hover {
  color: var(--texto);
  background: var(--cinza-ui);
}

.busca-wrap.tem-texto .btn-limpar {
  display: inline-flex;
}

.btn-buscar {
  flex-shrink: 0;
  height: 46px;
  padding: 0 24px;
  font-family: var(--fonte-geral);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--branco);
  background: var(--laranja);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-buscar:hover {
  background: var(--laranja-hover);
}

.btn-favoritos {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  font-family: var(--fonte-geral);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--azul);
  background: var(--azul-suave);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}

.btn-favoritos:hover {
  background: #DFEDF7;
}

.btn-favoritos.ativo {
  background: var(--azul);
  color: var(--branco);
}

.icone-coracao {
  font-size: 1.1rem;
  line-height: 1;
}

.contador {
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  border-radius: 999px;
  background: var(--laranja);
  color: var(--branco);
}

.cabecalho-acoes {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-seguir {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  font-family: var(--fonte-geral);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--azul);
  background: var(--azul-suave);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}

.btn-seguir:hover {
  background: #DFEDF7;
}

.btn-seguir:focus-visible {
  outline: 2px solid var(--laranja);
  outline-offset: 2px;
}

.lista-redes-seguir {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lista-redes-seguir a {
  color: var(--azul);
  font-weight: 600;
}

.cabecalho-baixo {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}


/* ===================== Aviso de demonstração =====================

   Microajuste M12: a faixa grande do topo (`.aviso-demo`) foi removida do
   HTML e a informação de protótipo passou para o rodapé, em `.rodape-aviso`
   (definida na seção "RODAPÉ DA HOME"; nenhuma regra por breakpoint, então
   é igual no mobile e no desktop). Nenhum JavaScript usava essa faixa. */

/* ===================== Conteúdo ===================== */

.conteudo {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 20px 48px;
}

/* ===================== Hero / chamada principal ===================== */

.hero {
  background: linear-gradient(180deg, var(--branco) 0%, #EBF4FB 100%);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 30px 24px 26px;
  text-align: center;
  box-shadow: var(--sombra);
}

.hero-titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.9rem;
  letter-spacing: -0.015em;
  color: var(--azul);
}

.hero-sub {
  max-width: 640px;
  margin: 10px auto 0;
  font-size: 1rem;
  color: var(--texto-suave);
}

.categorias {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.rotulo-categorias {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--texto-suave);
}

.chips-categorias {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.chip-categoria {
  padding: 8px 16px;
  font-family: var(--fonte-geral);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--azul);
  background: var(--branco);
  border: 1px solid #C4DBEC;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.chip-categoria:hover {
  border-color: var(--azul);
  box-shadow: 0 1px 3px rgba(0, 80, 136, 0.12);
}

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

/* ===================== Título da seção e filtros ===================== */

.titulo-secao {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.titulo-secao h2 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--texto);
}

.resumo {
  font-size: 0.85rem;
  color: var(--texto-suave);
}

.filtros {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 20px;
  flex-wrap: wrap;
}

.rotulo-filtro {
  font-size: 0.85rem;
  color: var(--texto-suave);
}

.filtro {
  padding: 8px 16px;
  font-family: var(--fonte-geral);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--azul);
  background: var(--branco);
  border: 1px solid #C4DBEC;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

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

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

.filtro-limpar {
  color: #7C2D12;
  background: #FFF3EA;
  border-color: #F5C7A8;
}

.filtro-limpar:hover {
  border-color: var(--laranja);
}

/* ===================== Cartões de produto ===================== */

.grid-produtos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

.card-produto {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra);
}

.card-capa {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--azul);
  background: linear-gradient(135deg, #DDECF6 0%, #EFF6FB 100%);
  position: relative;
}

.etiqueta-secao {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--fonte-geral);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #D4E3EE;
  border-radius: 999px;
  padding: 3px 10px;
}

.card-corpo {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.card-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.card-titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--texto);
}

.card-marca {
  font-size: 0.82rem;
  color: var(--texto-suave);
  margin-top: 2px;
}

.btn-favoritar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-family: var(--fonte-geral);
  font-weight: 700;
  font-size: 0.82rem;
  color: #6B7F92;
  background: var(--cinza-ui);
  border: 1px solid #D4E3EE;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.1s;
}

.btn-favoritar .coracao {
  font-size: 1.1rem;
  line-height: 1;
}

.btn-favoritar:hover {
  background: #FDE8DC;
  color: var(--laranja);
  border-color: #F5C7A8;
}

.btn-favoritar.favorito {
  background: #FDE8DC;
  color: var(--laranja);
  border-color: #F5C7A8;
}

.btn-favoritar:active {
  transform: scale(0.92);
}

.card-variante {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--azul);
  background: var(--azul-suave);
  border-radius: 999px;
  padding: 3px 10px;
  align-self: flex-start;
  white-space: nowrap;
}

.card-ofertas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.botao-comparar {
  width: 100%;
  margin-top: auto;
  padding: 11px 16px;
  font-family: var(--fonte-geral);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--branco);
  background: var(--laranja);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.botao-comparar:hover {
  background: var(--laranja-hover);
}

.botao-comparar:active {
  transform: scale(0.98);
}

/* ===================== Linhas de oferta ===================== */

.oferta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-oferta);
  background: #FBFDFF;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.oferta:hover {
  border-color: #B9D3E6;
  box-shadow: 0 2px 8px rgba(0, 80, 136, 0.08);
}

.oferta.melhor {
  border: 2px solid var(--verde);
  background: var(--verde-fundo);
  padding: 8px 11px;
}

.oferta-posicao {
  flex: 0 0 auto;
  align-self: center;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--azul);
  background: #F0F7FC;
  border: 1px solid #C4DBEC;
  border-radius: 50%;
}

.oferta-posicao.primeira {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--branco);
}

.oferta-plataforma {
  flex: 0 1 auto;
  min-width: 76px;
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.selo-melhor {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  color: #065F46;
  background: #C9F2E0;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

.plataforma-nome {
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--texto);
  white-space: nowrap;
}

.plataforma-loja {
  font-size: 0.7rem;
  color: var(--texto-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plataforma-loja::before {
  content: "·";
  margin-right: 5px;
}

.oferta-cupom {
  flex: 0 0 auto;
  display: none;
}

.oferta-cupom:has(.cupom) {
  display: inline-flex;
  align-items: center;
}

.cupom {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 0.68rem;
  white-space: nowrap;
  color: #7C2D12;
  background: #FFF3EA;
  border: 1px dashed var(--laranja);
  border-radius: 6px;
  padding: 3px 7px;
}

.cupom-pendente {
  color: #5B6B7B;
  background: var(--cinza-ui);
  border: 1px dashed #B9C7D4;
}

.oferta-preco {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.oferta-preco .preco-original {
  font-size: 0.68rem;
  font-weight: 600;
  color: #94A7B8;
  text-decoration: line-through;
}

.oferta-preco .preco-atual {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--texto);
}

.oferta-total {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.total-rotulo {
  font-size: 0.66rem;
  color: var(--texto-suave);
}

.total-valor {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--azul);
}

.total-indisponivel {
  font-size: 0.7rem;
  font-weight: 700;
  color: #5B6B7B;
  background: var(--cinza-ui);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

.frete-gratis {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--verde);
  white-space: nowrap;
}

.frete-pago {
  font-size: 0.7rem;
  color: #6B7F92;
  white-space: nowrap;
}

.frete-desconhecido {
  font-size: 0.7rem;
  font-weight: 600;
  color: #8A6D3B;
  white-space: nowrap;
}

.oferta-acoes {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.botao-oferta {
  flex-shrink: 0;
  white-space: nowrap;
  min-height: 38px;
  padding: 8px 16px;
  font-family: var(--fonte-geral);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--branco);
  background: var(--laranja);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.botao-oferta:hover {
  background: var(--laranja-hover);
}

.botao-oferta:active {
  transform: scale(0.97);
}

.botao-oferta.indisponivel {
  background: #8FA7BB;
  cursor: not-allowed;
}

.botao-oferta.indisponivel:hover {
  background: #8FA7BB;
}

/* ===================== Visão de plataforma ===================== */

.btn-voltar {
  display: inline-flex;
  align-items: center;
  margin: 0 0 14px;
  padding: 9px 16px;
  font-family: var(--fonte-geral);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--azul);
  background: var(--branco);
  border: 1px solid #C4DBEC;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn-voltar:hover {
  background: var(--azul-suave);
  border-color: var(--azul);
}

.plataforma-cabecalho {
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--borda);
}

.plataforma-titulo {
  margin: 0 0 6px;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--azul);
}

.plataforma-nota {
  margin: 0;
  font-size: 0.85rem;
  color: var(--texto-suave);
}

.grid-ofertas-plataforma {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.card-oferta-plataforma {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.card-oferta-corpo {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 100%;
}

.card-oferta-nome {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--texto);
}

.card-oferta-meta {
  margin: 0;
  font-size: 0.8rem;
  color: var(--texto-suave);
}

.card-oferta-preco {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.card-oferta-preco .preco-atual {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--texto);
}

.card-oferta-detalhes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.card-oferta-acao {
  margin-top: auto;
  padding-top: 6px;
}

.card-oferta-acao .botao-oferta {
  width: 100%;
}

.plataforma-mais {
  margin-top: 22px;
  text-align: center;
}

.plataforma-mais .botao-comparar {
  width: auto;
  padding: 11px 24px;
}

/* ===================== Faixa de canais do rodapé =====================

   Faixa removida da Home no microajuste 4D.2. `.siga-status` permanece
   porque o modal "Seguir" (header) continua usando essa classe; a regra
   que oculta a faixa está no bloco 4D.2 + 4E.1, no fim da folha. */

.siga-status {
  margin: 0;
  font-size: 0.82rem;
  color: var(--texto-suave);
}

/* ===================== Estado vazio ===================== */

.estado-vazio {
  text-align: center;
  padding: 48px 20px;
  color: var(--texto-suave);
  background: var(--branco);
  border-radius: var(--raio);
  border: 1px dashed #B9D3E6;
}

/* --------------------- Microajuste M14 — ESTADO ZERO ---------------------
   Regras novas, isoladas. A regra base `.estado-vazio` NÃO é alterada, e a
   mensagem de departamento vazio e a de Favoritos continuam exatamente
   iguais, byte por byte: a busca COM resultado, por sua vez, não tem
   nenhuma linha nova na tela.

   COLAPSO DE MARGENS — por que uma classe modificadora em vez de margem
   negativa: este projeto não zera a margem padrão de `<p>`, e margens
   laterais IRMA (adjacentes) colapsam num único valor `max()`. Uma margem
   negativa no parágrafo seguinte seria absorvida pelo `max(16px, -Npx)` e o
   vão de 48px do `padding-bottom` continuaria visível. Por isso a redução
   acontece no próprio `padding` da caixa, e apenas por meio de uma classe
   que app.js aplica QUANDO E SOMENTE QUANDO existe termo de busca com zero
   resultado. Os outros três estados nunca recebem a classe.

   Microajuste M14.1 — hierarquia do estado zero:

     .estado-vazio       mensagem principal (não encontramos "Violão"…);
     .estado-zero-detalhe status ("Estamos procurando ofertas nos nossos
                          parceiros…");
     .estado-zero-nota   nota pequena de simulação do protótipo.

   Os três ficam centralizados, dentro da MESMA largura de linha, e nenhum
   deles tem fundo, borda ou caixa: o bloco é texto puro, sem banner e sem
   caixa promocional. A caixa visual é apenas a do `.estado-vazio`, que já
   existia. Nada de `--laranja` e nada de `--fundo` (que é bege/marrom).

   Altura do estado zero, para conferência: 48px de topo (inalterado) + 1
   linha da mensagem principal + 16px de base + 2px de borda + 1 linha de
   status + 1 linha de nota pequena. É mais compacto que o M14, que tinha
   ainda a caixa "BUSCA NOS PARCEIROS" — removida no M14.1. */

/* Só no estado zero da busca. Nenhuma outra mensagem é afetada. */
.estado-vazio.estado-zero-busca {
  padding: 48px 20px 16px;
}

.estado-zero-detalhe {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
  font-size: 0.95rem;
  color: var(--texto-suave);
}

/* A nota é MENOR que o status, mais apagada e sem nenhum destaque: ela não
   pode competir com "Estamos procurando ofertas nos nossos parceiros…" nem
   parecer erro, aviso ou chamada para ação. `margin-top` pequeno e sem
   margem inferior, para não empurrar a página. */
.estado-zero-nota {
  max-width: 640px;
  margin: 6px auto 0;
  padding: 0 20px;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #8A97A5;
}

@media (max-width: 760px) {
  /* Microajuste M14 no mobile: o estado zero continua compacto. O topo de
     48px do `.estado-vazio` não é tocado — é o respiro já usado pela
     mensagem de departamento e pela de Favoritos no mobile. Só a base é
     reduzida, e só no estado zero da busca. */
  .estado-vazio.estado-zero-busca {
    padding: 40px 16px 14px;
  }

  .estado-zero-detalhe {
    padding: 0 14px;
    font-size: 0.9rem;
  }

  .estado-zero-nota {
    margin-top: 5px;
    padding: 0 14px;
    font-size: 0.74rem;
  }
}

/* ===================== Microajuste M15 — Departamento vazio =============

   REGRAS NOVAS, ISOLADAS. A regra base `.estado-vazio` NÃO é alterada, e
   nenhum selector do M14/M14.1 é tocado: as duas classes modificadoras
   (`estado-zero-busca` e `estado-departamento`) só podem coexistir em
   MEMÓRIA, nunca em tela — a primeira exige termo de busca com zero
   resultado, a segunda exige departamento ativo com zero produto, e o
   `campoBusca` zera o departamento ao receber texto.

   HIERARQUIA VISUAL (departamento ativo, zero produtos comparativos):

     .estado-vazio                    "Estamos preparando ofertas
                                     comparativas para [DEPARTAMENTO]."
                                     (herda 1rem do body — a maior das duas)
     .estado-departamento-detalhe     "Enquanto isso, confira o Destaque do
                                     Dia acima."  (0.86rem, mais apagada)

   A primeira frase tem hierarquia ligeiramente MAIOR porque é a única que
   varia (carrega o nome do departamento) e é a que explica o estado; a
   segunda é uma orientação de leitura, deliberadamente menor e mais suave.
   Nenhuma das duas tem fundo, borda, caixa, banner, botão, logotipo de
   parceiro, ícone ou chamada para ação: texto puro, centralizado, na MESMA
   largura de linha. Nada de `--laranja` e nada de `--fundo` (bege/marrom).
   A única caixa é a do `.estado-vazio`, que já existia.

   ALTURA DA PÁGINA: a caixa do `.estado-vazio` tinha 48px de topo e 48px de
   base. Com a segunda frase logo abaixo, essa base Enorme viraria um vão morto
   — por isso a classe `estado-departamento` reduz o padding ao mesmo padrão do
   M14.1: topo levemente menor, base curta. A segunda frase entra no lugar
   desse espaço, e não abaixo dele. Nenhuma outra área de estado vazio recebe
   esta classe. */

.estado-vazio.estado-departamento {
  padding: 44px 20px 20px;
}

.estado-departamento-detalhe {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #8A97A5;
}

@media (max-width: 760px) {
  /* No mobile a mensagem continua compacta e legível: uma linha de respiro
     em cima, uma curta embaixo, e a segunda frase um pouco menor — sem
     banner, sem caixa nova e sem aumentar a altura da página. */
  .estado-vazio.estado-departamento {
    padding: 36px 16px 16px;
  }

  .estado-departamento-detalhe {
    padding: 0 14px;
    font-size: 0.82rem;
  }
}

/* ===================== Microajuste M17 — Nenhuma oferta externa ========

   REGRAS NOVAS, ISOLADAS. A regra base `.estado-vazio` NÃO é alterada, e
   nenhum selector do M14/M14.1 nem do M15 é tocado.

   HIERARQUIA VISUAL (?demoSemOfertaExterna=1, busca ativa sem resultado
   interno):

     .estado-vazio                    única frase da tela:
                                      "Não encontramos uma oferta confiável
                                      para “[TERMO]” neste momento."

   É UM estado só. O M14.1 ("Não encontramos "…" no catálogo BusqueAgora.",
   "Estamos procurando ofertas nos nossos parceiros…" e a nota de simulação) e
   o card do M16 são ocultados pelo app.js, não por CSS: nenhum deles aparece
   junto, e nenhum texto é apagado do HTML.

   DECISÃO DE APRESENTAÇÃO — reaproveitar a caixa existente: o M17 não cria
   caixa nova, banner, fundo promocional, ícone, botão nem logotipo de parceiro.
   Ele usa a própria área de estado vazio que já existe
   (`.estado-vazio`: centralizada, cantos suaves, borda tracejada discreta), o
   que mantém a coerência visual com o estado zero e evita altura e ruído.
   Nenhum tom de erro técnico, nenhum `--laranja`, nenhum `--fundo` (bege).

   COMPACIDADE: como aqui existe UMA linha e não três blocos empilhados como
   no M14.1, a base da caixa é curta — 48px de topo (inalterado, é o respiro
   já usado pelos outros estados) e 24px de base. A classe
   `estado-sem-oferta-externa` só é aplicada pelo app.js neste estado. */

.estado-vazio.estado-sem-oferta-externa {
  padding: 48px 20px 24px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  /* No mobile o texto continua compacto, legível e sem rolagem horizontal: a
     largura é a da caixa, o padding lateral acompanha os outros estados e a
     frase quebra naturalmente em mais de uma linha em telas estreitas. */
  .estado-vazio.estado-sem-oferta-externa {
    padding: 36px 16px 18px;
  }
}

/* ===================== Modal ===================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(23, 32, 51, 0.55);
}

.modal-conteudo {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--branco);
  border-radius: var(--raio);
  padding: 24px;
  box-shadow: var(--sombra);
}

.modal-oferta {
  z-index: 60;
}

.btn-fechar-modal {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--cinza-ui);
  color: var(--texto);
  font-size: 1.2rem;
  cursor: pointer;
  border-radius: 50%;
}

.btn-fechar-modal:hover {
  background: #DCE7F0;
}

.modal-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.12rem;
  margin: 0 0 10px;
}

.modal-texto {
  margin: 0 0 12px;
  font-size: 0.95rem;
}

.modal-nota {
  font-size: 0.82rem;
  color: var(--texto-suave);
  background: var(--cinza-ui);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 16px;
}

.botao-cta {
  width: 100%;
  padding: 12px;
  font-family: var(--fonte-geral);
  font-weight: 700;
  font-size: 1rem;
  color: var(--branco);
  background: var(--laranja);
  border: none;
  border-radius: 999px;
  cursor: pointer;
}

.botao-cta:hover {
  background: var(--laranja-hover);
}

[hidden] {
  display: none !important;
}

/* ===================== Responsivo ===================== */

@media (max-width: 640px) {
  .cabecalho-topo {
    grid-template-columns: auto auto;
    row-gap: 10px;
    padding: 10px 14px;
  }

  .logo-nome {
    font-size: 1.12rem;
  }

  .logomarca {
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
  }

  .busca-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .campo-busca {
    height: 44px;
    padding: 0 42px 0 16px;
  }

  .campo-relativo .btn-limpar {
    width: 30px;
    height: 30px;
  }

  .btn-buscar {
    height: 44px;
    padding: 0 18px;
    font-size: 0.9rem;
  }

  .rotulo-favoritos {
    display: none;
  }

  .btn-favoritos {
    padding: 9px 12px;
  }

  .btn-seguir {
    padding: 9px 12px;
  }

  .cabecalho-baixo {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 0 14px 8px;
  }


  .grid-ofertas-plataforma {
    grid-template-columns: 1fr;
  }

  .plataforma-titulo {
    font-size: 1.25rem;
  }

  .conteudo {
    padding: 16px 14px 40px;
  }

  .hero {
    padding: 22px 16px 20px;
  }

  .hero-titulo {
    font-size: 1.35rem;
  }

  .hero-sub {
    font-size: 0.92rem;
  }

  .grid-produtos {
    grid-template-columns: 1fr;
  }

  .titulo-secao {
    margin-top: 20px;
  }

  .titulo-secao h2 {
    font-size: 1.2rem;
  }

  .oferta {
    gap: 8px 12px;
    padding: 12px 14px;
  }

  .oferta.melhor {
    padding: 11px 13px;
  }

  .oferta-posicao {
    width: 28px;
    height: 28px;
    font-size: 0.9rem;
  }

  .oferta-plataforma {
    min-width: 0;
  }

  .oferta-preco .preco-atual {
    font-size: 1rem;
  }

  .oferta-acoes {
    flex: 1 1 100%;
    margin-left: 0;
    justify-content: center;
    margin-top: 2px;
  }

  .botao-oferta {
    width: 100%;
    min-height: 46px;
    font-size: 0.95rem;
  }

  .oferta-acao .botao-oferta {
    width: auto;
    min-height: 30px;
    padding: 4px 10px;
    font-size: 0.58rem;
  }
}

.cabecalho-baixo {
  max-width: 1280px;
  padding: 0 20px 9px;
  justify-content: space-between;
  gap: 18px;
}

a:focus-visible {
  outline: 3px solid rgba(0, 80, 136, 0.35);
  outline-offset: 2px;
}

.hero {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 360px);
  align-items: center;
  gap: 22px;
  padding: 18px 20px;
  text-align: left;
  background: linear-gradient(110deg, var(--branco) 0%, #F1F7FB 100%);
  border-radius: 16px;
}

.hero-conteudo {
  min-width: 0;
}

.hero-titulo {
  max-width: 620px;
  font-size: clamp(1.55rem, 2.5vw, 2.15rem);
  line-height: 1.18;
}

.hero-sub {
  max-width: 520px;
  margin: 10px 0 0;
  font-size: 1rem;
}

.hero-destaque {
  min-width: 0;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px;
  color: var(--texto);
  text-align: left;
  background: var(--branco);
  border: 1px solid #C8DDEB;
  border-radius: 14px;
  box-shadow: 0 5px 16px rgba(0, 80, 136, 0.08);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.hero-destaque:hover {
  border-color: var(--azul);
  box-shadow: 0 8px 20px rgba(0, 80, 136, 0.13);
  transform: translateY(-1px);
}

.hero-imagem {
  min-width: 0;
  height: 94px;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: #EDF5FA;
}

.hero-imagem .produto-imagem {
  height: 100%;
}

/* Microajuste M13.3 — placeholder do DESTAQUE DO DIA.

   A área de imagem do Hero é pequena (104px x 94px no desktop), então as
   iniciais entram em uma placa menor, centralizada nos dois eixos, com o mesmo
   fundo neutro, a mesma borda e a mesma fonte dos outros placeholders.

   NENHUMA medida da área de imagem muda aqui: `.hero-imagem` continua com a
   mesma largura, a mesma altura, o mesmo raio e o mesmo fundo. O Hero não foi
   redesenhado, o card não cresceu e nenhum texto aparece sob as iniciais. */
.hero-imagem .produto-imagem-placeholder {
  width: 56px;
  height: 56px;
  font-size: 1.05rem;
  border-radius: 12px;
}

.hero-destaque-conteudo {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.hero-destaque-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--laranja);
}

.hero-destaque-nome {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  line-height: 1.25;
  color: var(--azul);
}

.hero-destaque-variante {
  font-size: 0.76rem;
  color: var(--texto-suave);
}

.hero-destaque-rodape {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.hero-destaque-preco {
  min-width: 0;
  font-family: var(--fonte-titulo);
  font-size: 1.05rem;
  line-height: 1.1;
  color: var(--azul);
  white-space: nowrap;
}

.hero-destaque-rodape .hero-destaque-acao {
  margin-top: 0;
}

.hero-destaque-acao {
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--laranja);
}

.secao-ofertas {
  scroll-margin-top: 130px;
}

.secao-ofertas {
  margin-top: 28px;
}

.titulo-secao {
  align-items: center;
  margin-top: 0;
  gap: 16px;
}

.titulo-secao > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.titulo-secao h2 {
  font-size: 1.08rem;
  letter-spacing: 0.045em;
}

.titulo-secao .resumo {
  font-size: 0.78rem;
}

.link-ver-todas {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 4px 0;
  font-family: var(--fonte-geral);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--laranja);
  background: transparent;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.link-ver-todas:hover {
  color: var(--laranja-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.filtros {
  margin: 12px 0 16px;
  gap: 6px;
}

.filtro {
  padding: 7px 13px;
  font-size: 0.8rem;
}

.grid-produtos {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 16px;
  align-items: stretch;
}

.card-produto {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border: 1px solid #EDF2F7;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 80, 136, 0.04);
}

.card-cabecalho {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid #F1F5F9;
}

.card-cabecalho .produto-imagem-link {
  width: 96px;
  height: 84px;
  flex: 0 0 96px;
  display: block;
  padding: 0;
  background: #EDF5FA;
  border: 1px solid #E6EEF5;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}

.card-cabecalho .produto-imagem-placeholder {
  width: 46px;
  height: 46px;
  font-size: 1rem;
  border-radius: 10px;
}

.card-cabecalho .imagem-produto {
  padding: 5px;
}

.produto-imagem-link {
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.produto-imagem {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  overflow: hidden;
  background: linear-gradient(135deg, #E7F1F8 0%, #F8FBFD 100%);
}

.imagem-produto {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  padding: 14px;
}

.produto-imagem-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border: 1px solid #C8DDEB;
  border-radius: 16px;
  color: var(--azul);
  background: rgba(255, 255, 255, 0.72);
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  flex: 0 0 auto;
  user-select: none;
}

.btn-favoritar {
  position: static;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--azul);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #E4ECF2;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 80, 136, 0.06);
}

.btn-favoritar .coracao {
  font-size: 1.05rem;
  line-height: 1;
}

.btn-favoritar:hover {
  color: var(--laranja);
  background: var(--branco);
  border-color: var(--laranja);
}

.btn-favoritar.favorito {
  color: var(--laranja);
  background: #FFF2E9;
  border-color: #F5C7A8;
}

.card-corpo {
  min-width: 0;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 13px 14px 14px;
}

.card-identidade {
  min-width: 0;
  flex: 1;
}

.card-titulo-link {
  width: 100%;
  display: block;
  padding: 0;
  color: var(--texto);
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.card-titulo-link:hover .card-titulo {
  color: var(--azul);
}

.card-titulo {
  min-height: 0;
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-family: var(--fonte-titulo);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.28;
  color: var(--texto);
  transition: color 0.15s;
}

.card-variante {
  margin: 4px 0 0;
  overflow: hidden;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--texto-suave);
  background: #F6F9FB;
  border-radius: 999px;
  padding: 2px 7px;
  align-self: flex-start;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-ofertas {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 12px 8px;
}

.oferta-linha {
  position: relative;
  min-width: 0;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.oferta-linha + .oferta-linha {
  border-top: 1px solid #F1F5F9;
}

.oferta-linha.melhor {
  background: rgba(16, 185, 129, 0.035);
  border-color: transparent;
  box-shadow: none;
}

.oferta-linha.melhor .selo-melhor {
  position: absolute;
  top: -10px;
  left: 0;
}

.parceiro-bloco {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 7px;
}

.parceiro-logo {
  display: none;
}

.parceiro-logo-imagem {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.parceiro-nome {
  flex: 0 0 auto;
  min-width: 0;
  font-family: var(--fonte-geral);
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--texto-suave);
  white-space: nowrap;
}

.selo-melhor {
  padding: 1px 5px;
  font-size: 0.5rem;
  font-weight: 600;
  line-height: 1.3;
  color: #0A7F60;
  background: var(--verde-fundo);
  border: 1px solid #D2EFE3;
  border-radius: 999px;
  white-space: nowrap;
}

.oferta-preco {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  white-space: nowrap;
}

.oferta-preco .preco-atual {
  font-family: var(--fonte-geral);
  font-size: 0.71rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--texto);
  white-space: nowrap;
}

.preco-condicao {
  min-height: 0.65rem;
  font-family: var(--fonte-geral);
  font-size: 0.48rem;
  font-weight: 400;
  line-height: 1.2;
  color: #8A99A8;
  white-space: nowrap;
}

.oferta-acao {
  flex: 0 0 auto;
}

.botao-oferta {
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 0.64rem;
  font-weight: 600;
  white-space: nowrap;
}

.oferta-acao .botao-oferta {
  min-height: 26px;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 0.55rem;
  font-weight: 600;
  white-space: nowrap;
}

.botao-oferta.indisponivel {
  background: #9AA8B5;
}

.botao-oferta.indisponivel:hover {
  background: #9AA8B5;
}

.modal-produto {
  z-index: 60;
}

.modal-produto-imagem {
  width: 100%;
  height: 150px;
  margin: -4px 0 14px;
  overflow: hidden;
  border-radius: 10px;
}

.modal-produto-imagem .produto-imagem {
  height: 100%;
}

.modal-produto-meta {
  margin: -5px 0 12px;
  font-size: 0.82rem;
  color: var(--texto-suave);
}

.modal-texto {
  white-space: pre-line;
}

@media (max-width: 1180px) and (min-width: 521px) {
  .grid-produtos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 760px) {
  .cabecalho-topo {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 9px;
    padding: 9px 14px;
  }

  .logo-nome {
    font-size: 1.08rem;
  }

  .logomarca {
    width: 36px;
    height: 36px;
    font-size: 1.18rem;
  }

  .busca-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .campo-busca,
  .btn-buscar {
    height: 44px;
  }

  .cabecalho-acoes {
    grid-column: 3;
    grid-row: 1;
  }

  .rotulo-favoritos {
    display: none;
  }

  .btn-favoritos {
    padding: 9px 11px;
  }

  #btnSeguirTopo {
    padding: 9px 11px;
  }

  .cabecalho-baixo {
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
    padding: 0 14px 8px;
  }


  .conteudo {
    padding: 14px 14px 40px;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px 16px;
  }

  .hero-titulo {
    font-size: 1.5rem;
  }

  .hero-sub {
    font-size: 0.92rem;
  }

  .hero-destaque {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .hero-imagem {
    height: 86px;
  }

  .titulo-secao {
    align-items: flex-start;
  }

  .titulo-secao > div {
    gap: 5px;
  }

  .titulo-secao h2 {
    font-size: 1rem;
  }

  .secao-ofertas {
    scroll-margin-top: 155px;
  }

  .card-cabecalho .produto-imagem-link {
    width: 72px;
    height: 66px;
    flex-basis: 72px;
  }

  .card-cabecalho .produto-imagem-placeholder {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
    border-radius: 9px;
  }

  .card-titulo {
    font-size: 0.78rem;
  }

}

@media (max-width: 520px) {
  .logo-nome {
    font-size: 1rem;
  }

  .cabecalho-acoes {
    gap: 5px;
  }

  .btn-favoritos {
    padding: 8px 9px;
  }

  .contador {
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    font-size: 0.7rem;
  }

  .grid-produtos {
    grid-template-columns: 1fr;
  }


  .oferta-linha {
    gap: 6px;
    padding: 5px;
  }

  .oferta-preco .preco-atual {
    font-size: 0.8rem;
  }

  .modal-produto-imagem {
    height: 130px;
  }
}

/* ===================== Microajuste 4A: barra compacta de categorias =====================

   Substitui a antiga seção "CATEGORIAS POPULARES" (grade de caixas grandes)
   por uma navegação horizontal discreta, integrada ao cabeçalho e
   posicionada abaixo da busca, antes do hero.

   Sem cards, sem caixas individuais, sem bordas grossas, sem sombras.
   Separação por espaçamento. "Mais categorias →" em laranja.
   ========================================================================== */

/* Microajuste 4A.3: a barra continua no mesmo container visual do
   cabeçalho, centralizada, e sem aumentar a altura do topo. A diferença
   para a 4A.2 está só na distribuição horizontal dos nomes (ver
   `.barra-departamentos-lista`). */
.cabecalho-baixo {
  max-width: 1180px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 20px 8px;
}

.barra-departamentos {
  min-width: 0;
  flex: 1 1 auto;
}

/* Microajuste 4A.3: distribuição horizontal mais aproveitada, sem exagero.
   - `space-evenly` reparte o espaço livre em partes iguais entre os 9
     nomes e também nas duas pontas. Não é `space-between` (que colaria o
     primeiro e o último nas bordas) nem `center` (que apertava tudo no
     meio, deixando as bordas vazias).
   - `gap: 8px` é apenas o piso do espaçamento quando a largura aperta.
   - `flex-wrap: nowrap` mantém os 9 em uma linha no desktop. */
.barra-departamentos-lista {
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Departamentos: links de navegação secundária, não cards nem CTA.
   Sem fundo, sem borda, sem sombra — a separação é só o espaçamento.
   A altura é a mesma da barra de categorias do 4A, para não aumentar
   a altura do topo.
   Microajuste 4A.3: presença um pouco maior, ainda leve. O `clamp` dá
   um degrau discreto de tamanho nas telas largas e reduz sozinho em
   larguras intermediárias, sem nunca quebrar o nome. O `min-height` e
   o `padding` vertical seguem iguais aos da 4A.2 — o cabeçalho não
   ganha altura. */
.departamento {
  min-width: 0;
  min-height: 34px;
  padding: 6px 8px;
  font-family: var(--fonte-geral);
  font-size: clamp(0.69rem, 0.35vw + 0.52rem, 0.78rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--texto-suave);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s;
}

/* Laranja só no estado ativo e no hover. Nunca todos em laranja. */
.departamento:hover {
  color: var(--laranja-hover);
}

/* Indicador de seção ativa: filete de 2px, sem caixa nem fundo. */
.departamento.ativo {
  color: var(--laranja);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--laranja);
}

/* Foco visível, garantido aqui em vez de depender do contorno global. */
.departamento:focus-visible {
  outline: 2px solid var(--laranja);
  outline-offset: 2px;
  border-radius: 6px;
}


/* ---------- Larguras intermediárias: uma linha com rolagem horizontal ----------

   Microajuste 4A.3: entre 761px e 960px os 9 nomes ainda não cabem com
   folga. Em vez de quebrar os nomes ou empilhar a barra, a linha adota o
   mesmo comportamento do mobile — rolagem horizontal em uma única linha. */

@media (max-width: 960px) and (min-width: 761px) {
  .barra-departamentos-lista {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* neutro para não gerar o vão espelhado do `center`/`space-evenly`
       quando o conteúdo excede a caixa */
    justify-content: flex-start;
    /* some o padding lateral com o espaço do gap ao rolar até o fim */
    padding-right: 2px;
  }

  .barra-departamentos-lista::-webkit-scrollbar {
    display: none;
  }
}


/* ---------- Mobile e tablet: uma linha com rolagem horizontal ---------- */

@media (max-width: 760px) {
  .cabecalho-baixo {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 0 14px 8px;
  }

  /* No mobile os 9 departamentos não cabem: uma linha com rolagem
     horizontal. `justify-content` fica neutro para não gerar o vão
     espelhado do `center` quando o conteúdo excede a caixa. */
  .barra-departamentos-lista {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    /* some o padding lateral com o espaço do gap ao rolar até o fim */
    padding-right: 2px;
  }

  .barra-departamentos-lista::-webkit-scrollbar {
    display: none;
  }

  /* Área de toque confortável, mesmo com texto pequeno. */
  .departamento {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 0.78rem;
  }


}

/* ===================== Microajuste 4C.1: DICAS PARA FACILITAR O SEU DIA =====================

   Seção editorial demonstrativa, criada logo abaixo de "OFERTAS EM DESTAQUE".
   Aparece uma única vez na Home, com 4 cards, antes do rodapé.

   Regras de separação visual em relação aos cards de produto:
   - fundo creme claro, próximo do fundo da página, e não branco puro;
   - borda discreta e nenhuma sombra (os produtos usam sombra);
   - sem preço, cupom, frete, loja, botão laranja, favorito ou avaliação;
   - a única cor de ação é o link editorial "Ler dica →", em laranja discreto;
   - nenhum clique navega: "Ler dica →" e "Ver todas →" são demonstrativos.
   ========================================================================== */

.secao-dicas {
  margin-top: 36px;
}

/* Mesma grade e mesmo espaçamento dos produtos: 4 colunas no desktop largo,
   largura e altura iguais para os quatro cards. */
.grid-dicas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 16px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.dica {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #FDFBF7;
  border: 1px solid #E4EBF2;
  border-radius: 14px;
  overflow: hidden;
}

/* Área de imagem generosa, com a mesma proporção nos quatro cards. */
.dica-imagem {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, #EAF1F8 0%, #FBF6EF 100%);
}

.dica-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.dica-corpo {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 16px 16px;
}

/* Departamento: pequeno e discreto, nunca em destaque. */
.dica-departamento {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7D93A6;
}

/* Título: principal elemento textual do card. */
.dica-titulo {
  margin: 0;
  font-family: var(--fonte-geral);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.36;
  color: var(--texto);
}

/* "Ler dica →": link editorial discreto, na cor de ação já existente.
   `margin-top: auto` alinha os quatro links na mesma linha de base,
   mesmo com títulos de comprimentos diferentes. */
.dica-ler {
  margin-top: auto;
  padding: 2px 0;
  font-family: var(--fonte-geral);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--laranja);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 0.15s;
}

.dica-ler:hover {
  color: var(--laranja-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Responsividade: só a grade de dicas é afetada ---------- */

/* Tablet: duas colunas, mantendo os cards largos e legíveis. */
@media (max-width: 1024px) {
  .grid-dicas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Celular: uma coluna. */
@media (max-width: 560px) {
  .grid-dicas {
    grid-template-columns: 1fr;
  }
}

/* ===================== Microajuste 4D.1: RODAPÉ DA HOME =====================

   Rodapé da Home, exibido uma única vez depois da seção
   "DICAS PARA FACILITAR O SEU DIA", organizado em 4 áreas no desktop.

   Regras:
   - fundo azul claro discreto (#EDF3F8), um tom acima do creme da Home:
     separa o rodapé sem virar um bloco escuro e mantém a harmonia com o azul;
   - sem sombra, sem ícones, sem selos e sem formas decorativas;
   - a marca reaproveita apenas a identidade textual do header
     (`.logo-nome`), sem criar um novo logotipo;
   - os itens de navegação são demonstrativos: texto simples dentro de uma
     lista, sem `href`, sem "#" e sem página vazia, porque os conteúdos
     institucionais ainda não existem;
   - nada além do copyright na faixa inferior, nesta etapa.
   ========================================================================== */

.rodape {
  background: #EDF3F8;
  border-top: 1px solid #D9E5EF;
  color: var(--texto-suave);
}

.rodape-conteudo {
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px 20px 26px;
  display: grid;
  grid-template-columns: 1.25fr 0.9fr 1fr 1.4fr;
  gap: 26px 30px;
  text-align: left;
}

.rodape-area {
  min-width: 0;
}

/* Marca: identidade textual reaproveitada do header, sem logotipo novo. */
.rodape-marca {
  margin: 0 0 8px;
}

.rodape-descricao,
.rodape-texto {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--texto-suave);
}

/* Transparência: largura de leitura confortável e constante, para o texto
   se distribuir em linhas equilibradas sem quebras manuais. A quebra é
   natural e responsiva, e o alinhamento continua à esquerda. */
.rodape-texto {
  max-width: 21em;
  line-height: 1.7;
  text-align: left;
  text-wrap: pretty;
  hyphens: none;
  overflow-wrap: break-word;
}

/* Títulos das colunas: hierarquia clara, sem pesar o bloco. */
.rodape-area-titulo {
  margin: 0 0 12px;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul);
}

.rodape-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.rodape-lista li {
  font-size: 0.85rem;
  color: var(--texto-suave);
}

/* Faixa inferior: separação discreta e copyright. */
.rodape-base {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 20px 30px;
  border-top: 1px solid #D9E5EF;
}

.rodape-copyright {
  margin: 0;
  font-size: 0.78rem;
  color: #7D93A6;
}

/* Microajuste M12: aviso de protótipo, dentro da faixa inferior do rodapé.
   É a menor tipografia do rodapé e fica logo abaixo do copyright, separado
   das colunas institucionais: texto simples, sem fundo, sem borda, sem
   caixa e sem cor de alerta, na cor de texto suave já usada no protótipo
   para manter a legibilidade. */
.rodape-aviso {
  margin: 5px 0 0;
  max-width: 62em;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--texto-suave);
  text-wrap: pretty;
}

/* ---------- Responsividade: só o rodapé é afetado ---------- */

/* Tablet: duas colunas. */
@media (max-width: 1024px) {
  .rodape-conteudo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 28px;
  }
}

/* Celular: uma coluna, mantendo a marca antes das listas. */
@media (max-width: 560px) {
  .rodape-conteudo {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 28px 20px 22px;
  }
}

/* ===================== Microajuste 4D.2 + 4E.1 =====================

   4D.2 — Home:
   - slogan oficial no rodapé: "Compare. Economize. Compre melhor."
     (texto em `index.html`; nenhuma regra de layout do rodapé foi tocada);
   - faixa "Siga o BusqueAgora / Canais em preparação." removida da Home.
     `#blocoSiga` e `#sigaStatus` continuam no HTML porque app.js os usa,
     então a regra abaixo os mantém fora da tela mesmo quando o JS altera
     o atributo `hidden`. A regra `.siga-status` foi preservada porque o
     modal "Seguir" (header) também a utiliza; apenas `.siga-titulo`,
     comprovadamente órfã, foi eliminada da folha.

   4E.1 — legibilidade do nome do produto no cabeçalho do card:
   - título com 15px, peso 600 e entrelinha 1.2;
   - até 3 linhas antes das reticências (`line-clamp: 3`);
   - espaço útil do título ampliado com menos folga entre imagem, nome e
     coração (gap e padding menores). Imagem, coração e grid 4 + 4
     continuam exatamente onde estavam;
   - no desktop o título reserva 3 linhas (`min-height: 3.6em`) para que a
     variante fique na mesma altura em todos os cards. Como 3 linhas (54px)
     + variante (~19px) continuam menores que a miniatura de 84px, o
      cabeçalho do card não cresce — a altura dos 8 cards é a mesma.

   4E.2 — refino da fonte do nome do produto (microajuste somente visual):
   - no desktop o título passa de 15px para 14px, para que uma quantidade
     maior do nome caiba no mesmo espaço sem prejudicar a leitura;
   - peso 600, entrelinha 1.2, `line-clamp: 3` e `min-height: 3.6em`
     permanecem exatamente iguais, então as 3 linhas e o alinhamento
     uniforme dos cards continuam idênticos;
   - com 3 linhas em 14px (50,4px) o cabeçalho segue menor que a miniatura
     de 84px: nem a altura dos cards nem o grid 4 + 4 mudam;
   - a versão mobile (0.86rem) e os nomes em `dados.js` não foram tocados.

   4E.3 + 4E.3B — aproveitamento do espaço abaixo do coração:
    - o título fica com 14px exatos, peso 600, entrelinha 1.2, máximo de 3
      linhas e `min-height: 3.6em` no desktop (alinhamento uniforme dos
      cards) preservados;
    - o botão de favorito deixa o fluxo do cabeçalho e é posicionado no canto
      superior direito, exatamente onde já ficava (26x26, mesmo recuo de 11px
      do topo e 10px da lateral). Medidas e recuos viram variáveis
      (`--coracao-medida`, `--coracao-folga`, `--coracao-topo`,
      `--coracao-lado`) para que o botão e o texto nunca divirjam;
    - 4E.3B — correção do mecanismo: o espaço do coração é aberto por um
      flutuante em `.card-titulo::before`, e não mais por `padding-right`.
      A 4E.3 só ativava o flutuante dentro de `@supports (line-clamp: 3)`
      (Chrome 140+/Edge) e mantinha `display: -webkit-box` como base; como
      dentro de `-webkit-box` (layout flex) o `float` é ignorado, quase todos
      os navegadores caíam no `padding-right` de 36px aplicado às 3 linhas —
      ou seja, o coração continuava reservando uma coluna vertical inteira e
      o nome seguia quebrando em "Fone de / Ouvido / Bluetooth";
    - agora o título é um bloco comum em todos os navegadores e o flutuante
      vale sempre: ele nasce no início do título, com a medida do botão + a
      folga, alinhado ao topo e à direita do coração, e estreita somente as 2
      primeiras linhas — as únicas cobertas pelo botão (26px = linha 1 inteira
      + parte da linha 2). A 3ª linha passa a usar a largura inteira: 36px a
      mais de nome visível, sem texto sob o coração e sem o coração sobre o
      texto;
    - o limite de 3 linhas passa a ser garantido por `max-height`
      (3 × 1.2em) + `overflow: hidden`, que vale em qualquer navegador.
      `line-clamp` e `-webkit-line-clamp` continuam declarados porque, onde
      valerem fora do `-webkit-box`, devolvem as reticências;
    - a altura não muda: 3 linhas de 16,8px (50,4px) + variante (~19px)
      continuam menores que a miniatura de 84px, então a altura do cabeçalho
      (105px), a dos 8 cards, a imagem, a variante, as ofertas e o grid 4 + 4
      permanecem idênticas. Nenhum nome, preço, cupom, frete ou texto foi
      alterado.
   ====================================================================== */

/* 4D.2: faixa removida, mantida apenas como âncora técnica para app.js. */
.siga-busqueagora {
  display: none !important;
}

/* 4E.1: cabeçalho do card mais compacto, sem alterar posições.
   4E.3: as medidas do coração viram variáveis para que o botão e o
   espaço reservado ao texto nunca saiam de sincronia. */
.card-cabecalho {
  --coracao-topo: 11px;
  --coracao-lado: 10px;
  --coracao-medida: 26px;
  --coracao-folga: 10px;
  position: relative;
  gap: 10px;
  padding: var(--coracao-topo) var(--coracao-lado) 10px;
}

/* 4E.3B: o título é um bloco comum, sem `display: -webkit-box`, para que o
   flutuante de `::before` valha em todos os navegadores (dentro de
   `-webkit-box`, que é layout flex, o `float` é ignorado). O teto de 3 linhas
   é garantido por `max-height` (3 × 1.2em) + `overflow: hidden`, que vale em
   qualquer navegador; `line-clamp` e `-webkit-line-clamp` permanecem
   declarados porque, onde forem aplicados fora do `-webkit-box`, devolvem as
   reticências. Sem `padding-right`: a folga do coração agora vem do
   flutuante, e só nas linhas que ele realmente cobre. */
.card-titulo {
  display: block;
  margin: 0;
  min-height: 0;
  padding-right: 0;
  overflow: hidden;
  max-height: calc(3.6em + 1px);
  font-family: var(--fonte-titulo);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  color: var(--texto);
  transition: color 0.15s;
}

/* 4E.3: o coração sai do fluxo e vai para o canto superior direito do cabeçalho
   (mesma posição e mesmas medidas de antes), deixando de reservar uma coluna
   inteira ao lado do nome.
   4E.3B: o espaço do botão é aberto pelo flutuante de `.card-titulo::before`
   (regra abaixo), e não mais por `padding-right` no título — o `padding`
   empurrava as 3 linhas e gastava a mesma coluna de 36px nos 3 lugares. */
.card-cabecalho .btn-favoritar {
  position: absolute;
  top: var(--coracao-topo);
  right: var(--coracao-lado);
  width: var(--coracao-medida);
  height: var(--coracao-medida);
}

/* 4E.3B: recorte do coração por flutuante, e não por `padding`. Ele nasce
   como primeiro conteúdo do título, com a medida do botão + a folga, e fica
   alinhado ao topo e à direita do coração — que é exatamente a posição dele
   no cabeçalho. Por isso estreita somente as 2 primeiras linhas, as únicas
   cobertas pelo botão (26px = linha 1 inteira + parte da linha 2). Da 3ª
   linha para baixo o nome usa a largura inteira do cabeçalho, sem texto sob
   o coração e sem o coração sobre o texto. */
.card-titulo::before {
  content: "";
  float: right;
  width: calc(var(--coracao-medida) + var(--coracao-folga));
  height: var(--coracao-medida);
}

/* Alinhamento uniforme entre os cards, sem aumentar a altura. */
@media (min-width: 761px) {
  .card-titulo {
    min-height: 3.6em;
  }
}

/* Telas menores: tipografia coerente, sem redesenhar o card mobile. */
@media (max-width: 760px) {
  .card-cabecalho {
    --coracao-topo: 10px;
    --coracao-lado: 9px;
    --coracao-folga: 9px;
    gap: 8px;
    padding: var(--coracao-topo) var(--coracao-lado) 9px;
  }

  .card-titulo {
    font-size: 0.86rem;
  }
}

/* ===================== Microajuste mobile M1: HERO mais compacto =====================

   Escopo: SOMENTE o Hero abaixo de 760px. O bloco fica no fim da folha
   para vencer as regras anteriores do mesmo breakpoint; nenhuma regra
   fora de `@media` foi tocada, então o desktop aprovado permanece
   visualmente idêntico.

   O que muda, de forma moderada:
   - padding vertical do Hero: 20px/16px -> 14px/14px;
   - gap entre o texto e o card de destaque: 18px -> 12px;
   - título: 1.5rem -> 1.38rem (mantém destaque e legibilidade);
   - título -> subtítulo: 10px -> 6px;
   - card de destaque: padding 10px -> 8px, gap 12px -> 10px,
     miniatura 96px/86px -> 84px/72px;
   - folgas internas do card: gap 5px -> 3px e margin-top da ação
     4px -> 2px.

   O que NÃO muda: texto, ordem dos elementos (o card continua abaixo
   do texto principal no mobile), cantos, bordas, cores, sombras,
   imagem do produto, nome, variante e "Ver ofertas →".
   ========================================================================== */

@media (max-width: 760px) {
  .hero {
    gap: 12px;
    padding: 14px;
  }

  .hero-titulo {
    font-size: 1.38rem;
    line-height: 1.16;
  }

  .hero-sub {
    margin: 6px 0 0;
    font-size: 0.9rem;
  }

  .hero-destaque {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 10px;
    padding: 8px;
  }

  .hero-imagem {
    height: 72px;
  }

  .hero-destaque-conteudo {
    gap: 3px;
  }

  .hero-destaque-nome {
    font-size: 0.95rem;
  }

  .hero-destaque-preco {
    font-size: 0.95rem;
  }

  .hero-destaque-acao {
    margin-top: 2px;
  }
}

/* ===================== Microajuste mobile M2: menu de departamentos (☰) =====================

   Motivo: no mobile a barra horizontal rolável deixava aparecer o começo
   cortado de "Cozinha" depois de "Casa & Jardim" (o "Co"/"Coz" na lateral
   direita).

   Solução, sem tocar no desktop já aprovado:
   - abaixo de 760px a barra deixa de rolar e mostra SOMENTE os 3 primeiros
     departamentos (Automotivo, Beleza e Cuidados, Casa & Jardim), inteiros:
     nenhum nome fica parcialmente visível;
   - à direita da barra entra um botão "☰" compacto, que significa
     exclusivamente "Todos os departamentos" (não é busca, não é Ofertas em
     Destaque, não substitui Favoritos nem Seguir);
   - o ☰ abre um painel discreto com os mesmos 9 departamentos. A lista é
     montada em app.js a partir da própria barra (mesmos rótulos e mesmo
     `data-departamento`) e cada item chama a mesma função
     `selecionarDepartamento`, sem duplicar taxonomia nem lógica de filtragem;
   - acima de 760px o botão e o painel ficam `display: none`, e a barra
     continua com os 9 nomes, mesmo espaçamento, mesma fonte e mesma
     distribuição.
   ========================================================================== */

/* Fora do mobile: nenhum vestígio do ☰ nem do painel. */
.btn-todos-departamentos,
.painel-departamentos {
  display: none;
}

@media (max-width: 760px) {
  /* Controle compacto, na cor da identidade, separado do último nome da
     barra pelo `gap` de `.cabecalho-baixo`. A pílula azul deixa claro que
     é um controle, e não um texto de categoria. */
  .btn-todos-departamentos {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--azul);
    background: var(--azul-suave);
    border: 1px solid #C4DBEC;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }

  .btn-todos-departamentos:hover,
  .btn-todos-departamentos[aria-expanded="true"] {
    background: var(--branco);
    border-color: var(--azul);
  }

  .btn-todos-departamentos:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: 2px;
  }

  .btn-todos-departamentos-icone {
    font-size: 1.05rem;
    line-height: 1;
  }

  /* Painel ancorado logo abaixo do cabeçalho (sticky), discreto, com a
     borda azul-clara e a sombra leve já usadas no protótipo. */
  .painel-departamentos {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 45;
    padding: 8px 14px 12px;
    background: var(--branco);
    border: 1px solid #C4DBEC;
    border-top: 0;
    border-radius: 0 0 var(--raio) var(--raio);
    box-shadow: var(--sombra);
  }

  .painel-departamentos-lista {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 2px;
  }

  /* Itens bem tocáveis, sem ícones e sem caixas pesadas. */
  .departamento-item {
    width: 100%;
    min-height: 44px;
    padding: 9px 10px;
    font-family: var(--fonte-geral);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    color: var(--texto);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }

  .departamento-item:hover {
    background: var(--azul-suave);
    color: var(--azul);
  }

  .departamento-item.ativo {
    background: var(--azul-suave);
    color: var(--azul);
    font-weight: 600;
  }

  .departamento-item:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: -2px;
  }

  /* A barra não rola mais no mobile: sem o 4º item, não existe fragmento
     cortado na lateral direita. Os nomes encolhem só o necessário para
     caberem inteiros junto do ☰. */
  .barra-departamentos-lista {
    overflow: hidden;
    justify-content: flex-start;
    gap: 5px;
    padding-right: 0;
  }

  .barra-departamentos-lista li:nth-child(n + 4) {
    display: none;
  }

  .barra-departamentos-lista .departamento {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px;
    /* Mantém os 0.78rem já usados no mobile de 509px a 760px e só reduz
       abaixo disso, para que os 3 nomes + o ☰ caibam inteiros. */
    font-size: clamp(0.6rem, 2.45vw, 0.78rem);
  }
}

/* ===================== Microajuste mobile M3: cards de produto mais compactos =====================

   Motivo: no celular os cards de produto eram altos demais e a rolagem
   mostrava fragmentos grandes de dois cards ao mesmo tempo. A lista continua
   vertical, com 1 produto por linha (nenhuma grade de 2 colunas foi criada):
   o que muda é somente o aproveitamento vertical do layout existente.

   Escopo: SOMENTE `@media (max-width: 760px)`. Nenhuma regra fora do
   breakpoint foi tocada, então o desktop aprovado e os microajustes M1
   (Hero) e M2 (departamentos ☰) permanecem visualmente idênticos.

   O que muda, de forma moderada:
   - cabeçalho: padding 10px/9px/9px -> 7px/8px/7px e gap 8px -> 7px;
   - imagem: 72x66 -> 64x58 e placeholder 36x36 -> 32x32, ainda
     claramente reconhecível;
   - variante: margin-top 4px -> 2px e padding 2px/7px -> 1px/6px;
   - corpo do card: gap 10px -> 8px e padding 13px/14px/14px
     -> 10px/12px/11px;
   - área das ofertas: padding 14px/12px/8px -> 11px/12px/6px;
   - linha de oferta: min-height 36px -> 32px e padding 5px -> 3px/6px;
     as 3 linhas continuam separadas pelos mesmos separadores, sem corte;
   - selo "Melhor oferta": top -10px -> -9px, discreto e legível.

   O que NÃO muda: nome do produto (0.86rem ≈ 13,8px, acima do piso de
   13px, com teto de 3 linhas preservado), variante, coração no canto
   superior direito (26x26; o flutuante que abre espaço para ele acompanha
   o novo recuo), preço principal, condição comercial ("com cupom",
   "frete grátis", "com cupom · frete grátis"), as 3 ofertas, o botão
   "Ver oferta" e o botão "Indisponível" quando existir.

   `.oferta-acao .botao-oferta` ficou de fora de propósito: a área de toque do
   "Ver oferta" permanece exatamente igual à aprovada (min-height 26px,
   padding 3px/8px, fonte 0.55rem). Nada foi removido, nenhuma informação foi
   cortada e não há `height` fixa, `overflow: hidden` para esconder ofertas,
   scroll interno, carousel nem 2 colunas.
   ========================================================================== */

@media (max-width: 760px) {
  /* Cabeçalho: menos folga vertical, com o coração no mesmo canto. */
  .card-cabecalho {
    --coracao-topo: 7px;
    --coracao-lado: 8px;
    --coracao-folga: 7px;
    gap: 7px;
    padding: 7px 8px 7px;
  }

  /* Imagem: menor, sem perder o reconhecimento do produto. */
  .card-cabecalho .produto-imagem-link {
    width: 64px;
    height: 58px;
    flex-basis: 64px;
  }

  .card-cabecalho .produto-imagem-placeholder {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
    border-radius: 8px;
  }

  /* Variante: só encolhe a folga, mantendo formato e legibilidade. */
  .card-variante {
    margin-top: 2px;
    padding: 1px 6px;
  }

  /* Corpo do card: menos ar entre o cabeçalho e a área de ofertas. */
  .card-corpo {
    gap: 8px;
    padding: 10px 12px 11px;
  }

  /* Ofertas: principal compactação, sem remover nenhuma linha. */
  .card-ofertas {
    padding: 11px 12px 6px;
  }

  .oferta-linha {
    min-height: 32px;
    padding: 3px 6px;
  }

  .oferta-linha.melhor .selo-melhor {
    top: -9px;
  }
}

/* ===================== Microajuste mobile M4: menu de departamentos mais compacto =====================

   Motivo: o painel aberto pelo "☰" era visualmente solto — lista muito alta,
   sem título e com o ícone do botão sempre igual. Este microajuste organiza o
   painel já existente, sem criar departamento, sem criar card e sem tocar na
   lógica de filtragem do app.js.

   Escopo: SOMENTE `@media (max-width: 760px)`. Nenhuma regra fora do
   breakpoint foi alterada, então o desktop aprovado, a barra com os 9 nomes e
   os microajustes M1 (Hero), M2 (departamentos ☰) e M3 (cards) permanecem
   exatamente iguais.

   O que muda, de forma moderada:
   - título "Todos os departamentos" discreto: 0.68rem, versalete, cor suave
     e um separador de 1px; hierarquia clara sem competir com a lista;
   - painel: padding 8px/14px/12px -> 16px/20px, ou seja, respiro parelho nas
     quatro laterais em vez de uma lista muito colada no topo;
   - painel: `left/right: 14px`, para ocupar a largura útil do conteúdo mobile
     (a mesma margem da barra de departamentos) em vez da largura da janela;
     continua absoluto, logo abaixo da barra, sem empurrar o cabeçalho, sem
     cobrir a busca e sem rolagem horizontal;
   - itens: `min-height` 44px -> 42px com `padding` 9px/10px -> 0/10px e
     `gap` 2px -> 0, compensados por um separador de 1px entre os nomes;
   - item ativo/hover: mesma tonalidade clara já usada, agora como faixa
     discreta em vez de caixa com borda — sem cards individuais.

   O que NÃO muda: os 9 nomes e a ordem, a lógica de seleção/filtro do app.js,
   o estado fechado da barra (3 nomes + ☰), a largura da página, o Hero, o
   aviso de demonstração, os cards, as Dicas e o rodapé.
   ========================================================================== */

@media (max-width: 760px) {
  /* Título: hierarquia discreta acima dos 9 nomes. */
  .painel-departamentos-titulo {
    margin: 0 0 4px;
    padding: 0 2px 8px;
    border-bottom: 1px solid var(--borda);
    font-family: var(--fonte-geral);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--texto-suave);
  }

  /* Painel: respiro igual nas quatro laterais e largura do conteúdo. */
  .painel-departamentos {
    left: 14px;
    right: 14px;
    padding: 16px 20px;
    box-shadow: 0 1px 2px rgba(0, 80, 136, 0.06), 0 6px 14px rgba(0, 80, 136, 0.05);
  }

  /* Lista: sem folga entre os nomes; o separador de 1px faz o papel dela. */
  .painel-departamentos-lista {
    gap: 0;
  }

  .departamento-item {
    min-height: 42px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    border: 0;
    border-bottom: 1px solid var(--borda);
    border-radius: 8px;
  }

  .departamento-item:last-child {
    border-bottom-color: transparent;
  }

  /* Com o painel aberto, o mesmo botão vira "×" e continua fechando. */
  .btn-todos-departamentos[aria-expanded="true"] .btn-todos-departamentos-icone {
    font-size: 0;
  }

  .btn-todos-departamentos[aria-expanded="true"] .btn-todos-departamentos-icone::after {
    content: "\00D7";
    font-size: 1.15rem;
    line-height: 1;
  }
}

/* ===================== Microajuste mobile M4.1: painel de departamentos (☰ / ×) =====================

   Motivo: a validação em 375px do painel aberto pelo "☰" mostrou cinco
   problemas visuais: o título "Todos os departamentos" não aparecia, o botão
   continuava exibindo "☰", os 9 itens seguiam com espaçamento vertical
   excessivo, o painel ficava alto demais e o conteúdo da página aparecia
   visualmente logo abaixo dele.

   Diagnóstico: o título estava no HTML (index.html) e nada no app.js o remove
   — ele é regido apenas pelo bloco M4, que o desenhava em 0.68rem (~11px),
   em caixa alta e na cor suave `#5B6B7B`: o resultado era um texto minúsculo e
   de baixo contraste, lido como "ausente" a 375px. O "×" dependia
   de um truque frágil (`font-size: 0` + `::after` sem `display`/`line-height`
   próprios), e o `z-index: 45` do painel vivia dentro do contexto de
   empilhamento do cabeçalho (`z-index: 40`), sem garantia explícita de que a
   camada temporária cobre o conteúdo.

   Escopo: SOMENTE `@media (max-width: 760px)` e SOMENTE o ☰/painel já
   existentes. Nenhuma regra fora do breakpoint foi alterada, então o desktop
   aprovado, a barra com os 9 nomes, o Hero, a busca, Favoritos, Seguir, os
   cards (M3), as Dicas e o rodapé permanecem exatamente iguais.

   O que muda:
   - título: `display: block` explícito (nada o oculta), 12px, peso 700, cor azul
     BusqueAgora, sem caixa alta forçada, 8px de respiro abaixo e separador
     discreto de 1px;
   - ☰/×: o mesmo botão continua trocando o glifo pelo `aria-expanded` que o
     app.js já alterna, agora com `line-height: 0` no estado aberto e um
     `::after` com `display`, fonte, altura de linha e cor próprios — o "×"
     substitui VISIVELMENTE o "☰" e os dois nunca ficam juntos;
   - itens: `min-height` 42px -> 38px, `padding` 0/10px -> 4px/10px,
     `font-size` 0.88rem -> 0.875rem (14px) e `line-height: normal`, com
     `gap: 0` e o separador de 1px já existente — lista compacta e confortável,
     sem card;
   - painel: `padding` 16px/20px -> 10px/12px/12px, `max-height: none` e
     `overflow: visible` (sem altura fixa e sem rolagem interna), fundo branco
     totalmente opaco, mesma largura útil (`left/right: 14px`), mesmos cantos,
     mesma borda e mesma sombra discreta; `z-index` 45 -> 60 para reforçar a
     camada temporária sobre o conteúdo da página.

   O que NÃO muda: os 9 nomes e a ordem, a lógica de seleção/filtro do app.js,
   o estado fechado da barra (3 nomes + ☰), o comportamento de fechar (×,
   departamento, clique fora e Esc) e o `aria-expanded`.
   ========================================================================== */

@media (max-width: 760px) {
  /* Título: presente, legível e claramente no topo do painel. */
  .painel-departamentos-titulo {
    display: block;
    visibility: visible;
    opacity: 1;
    margin: 0 0 4px;
    padding: 0 2px 8px;
    border-bottom: 1px solid var(--borda);
    font-family: var(--fonte-geral);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--azul);
  }

  /* Painel: camada temporária, opaca, sem altura fixa e sem rolagem interna. */
  .painel-departamentos {
    left: 14px;
    right: 14px;
    z-index: 60;
    max-height: none;
    overflow: visible;
    padding: 10px 12px 12px;
    background: var(--branco);
    box-shadow: 0 1px 2px rgba(0, 80, 136, 0.06), 0 6px 14px rgba(0, 80, 136, 0.05);
  }

  /* Lista: 9 departamentos compactos, sem folga vertical entre os nomes. */
  .painel-departamentos-lista {
    gap: 0;
  }

  .departamento-item {
    min-height: 38px;
    padding: 4px 10px;
    font-size: 0.875rem;
    line-height: normal;
  }

  /* Fechado: "☰". Aberto: "×" no lugar do "☰", nunca os dois juntos. */
  .btn-todos-departamentos[aria-expanded="true"] .btn-todos-departamentos-icone {
    font-size: 0;
    line-height: 0;
  }

  .btn-todos-departamentos[aria-expanded="true"] .btn-todos-departamentos-icone::after {
    content: "\00D7";
    display: block;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1;
    color: var(--azul);
  }
}

/* ===================== Microajuste mobile M5: imagens das Dicas mais compactas =====================

   Motivo: no celular a ilustração das Dicas ocupava uma faixa vertical alta e
   empurrava o texto para longe do topo do card. Este microajuste encurta
   SOMENTE a área da imagem, mantendo o card editorial legível e atrativo.

   Escopo: SOMENTE `@media (max-width: 760px)` e SOMENTE `.dica-imagem`.
   Nenhuma regra fora do breakpoint foi alterada, então o desktop aprovado,
   o Hero (M1), a barra/painel de departamentos (M2, M4/M4.1) e os cards de
   produtos (M3) permanecem exatamente iguais.

   O que muda, de forma moderada:
   - `.dica-imagem`: `aspect-ratio` 16/10 -> 21/10, ou seja, a altura passa de
     62,5% para 47,6% da largura — redução de aproximadamente 23,8%. A largura
     continua 100% e a proporção visual continua horizontal e equilibrada, sem
     esticar, achatar ou transformar a ilustração em miniatura;
   - nada mais é tocado: `.dica-img` continua com `width: 100%`, `height: 100%`,
     `object-fit: cover` e `object-position: center`, o `overflow: hidden` e o
     raio de 14px do card continuam cortando a imagem nos mesmos cantos, e a
     largura dos cards, o `gap` e a coluna única do mobile seguem iguais.

   O que NÃO muda: título "DICAS PARA FACILITAR O SEU DIA", "Ver todas →",
   departamento, título da dica, "Ler dica →", uma coluna no mobile, cores,
   tipografia, bordas, raios e o desktop.
   ========================================================================== */

@media (max-width: 760px) {
  /* Imagem/ilustração do card de Dica: mesma largura, ~24% menos altura. */
  .dica-imagem {
    aspect-ratio: 21 / 10;
  }
}

/* ===================== Microajuste mobile M5.1: DICAS em card editorial horizontal =====================

   Motivo: mesmo problema do M3, agora na seção de Dicas — no celular cada
   card ocupava quase a tela inteira (imagem em cima + texto embaixo), então
   durante a rolagem mal 1 card e meio apareciam.

   Solução, sem criar nada: o card existente (`.dica`) deixa de ser uma pilha
   e passa a ser uma linha editorial — ilustração à esquerda, texto à direita.
   A estrutura HTML já é exatamente essa (`.dica-imagem` + `.dica-corpo`), por
   isso `index.html` NÃO foi alterado: bastam `flex-direction` e as medidas.

   Escopo: SOMENTE `@media (max-width: 760px)`. Nenhuma regra fora do
   breakpoint foi tocada, então o desktop aprovado, o Hero (M1), a barra e o
   painel de departamentos (M2, M4/M4.1) e os cards de produtos (M3)
   permanecem exatamente iguais.

   O que muda, de forma moderada:
   - `.grid-dicas`: uma coluna em toda a faixa do mobile (nenhuma grade de
     2 colunas é criada), `gap` 16px -> 12px e `margin-top` 18px -> 14px;
   - `.dica`: `flex-direction` column -> row, com `min-height: 150px` — é
     um PISO, não uma altura fixa: nada é cortado, sem `height`, sem
     `overflow` que esconda texto e sem qualquer medida baseada em viewport,
     então um conteúdo excepcionalmente longo continua crescendo;
   - `.dica-imagem`: vira a coluna da esquerda com 37% da largura do card,
     `aspect-ratio` neutralizado (a M5 usava 21/10) e altura preenchendo o
     card inteiro. `.dica-img` continua intacto: `width/height: 100%`,
     `object-fit: cover`, `object-position: center`, com o `overflow: hidden`
     e o raio de 14px do card cortando a ilustração nos mesmos cantos —
     sem distorção, sem ícone e sem remover a imagem;
   - `.dica-corpo`: `padding` 14px/16px/16px -> 14px nos quatro lados e
     `gap` 8px -> 7px, mantendo o texto afastado das bordas;
   - `.dica-departamento`: 0.68rem -> 0.66rem com entrelinha 1.35 — mesmo
     estilo editorial discreto, só um degrau menor para caber no card baixo;
   - `.dica-titulo`: 0.92rem -> 0.86rem, entrelinha 1.36 -> 1.32 e teto de
     3 linhas visuais (`-webkit-line-clamp: 3` + `max-height: 3.96em` como
     garantia em qualquer navegador, como no 4E.3B), com
     `overflow-wrap: break-word` para nenhuma palavra ser cortada na
     horizontal. Sem sobreposição: o título é bloco comum e o
     `margin-top: auto` do "Ler dica →" continua abaixo dele;
   - `.dica-ler`: 0.8rem -> 0.78rem, ainda laranja, ainda link editorial
     discreto (sem virar botão grande) e ainda com `margin-top: auto`, que
     mantém os quatro links na mesma linha de base mesmo com títulos de
     comprimentos diferentes.

   O que NÃO muda: título "DICAS PARA FACILITAR O SEU DIA", "Ver todas →",
   os 4 textos das Dicas, as 4 imagens, departamento, "Ler dica →", a lista
   vertical com 1 card por linha, cores, bordas, raios, o Hero, o aviso, os
   cards de produtos, preços, favoritos, o rodapé e o desktop.
   ========================================================================== */

@media (max-width: 760px) {
  /* Uma coluna em toda a faixa do mobile, com ~12px entre os cards. */
  .grid-dicas {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 14px;
  }

  /* Card horizontal: ilustração à esquerda, texto à direita.
     `min-height` é só o piso visual (~150px); a altura continua natural. */
  .dica {
    flex-direction: row;
    align-items: stretch;
    min-height: 150px;
  }

  /* Coluna da esquerda: ~37% da largura do card, altura preenchida pelo
     próprio card. O `object-fit: cover` do `<img>` impede distorção. */
  .dica-imagem {
    flex: 0 0 37%;
    width: 37%;
    align-self: stretch;
    aspect-ratio: auto;
  }

  /* Coluna da direita: categoria, título e "Ler dica →", com respiro. */
  .dica-corpo {
    min-width: 0;
    flex: 1 1 auto;
    gap: 7px;
    padding: 14px;
  }

  .dica-departamento {
    font-size: 0.66rem;
    line-height: 1.35;
  }

  /* Título legível, com teto de 3 linhas visuais. */
  .dica-titulo {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    max-height: 3.96em;
    font-size: 0.86rem;
    line-height: 1.32;
    overflow-wrap: break-word;
  }

  .dica-ler {
    margin-top: auto;
    font-size: 0.78rem;
  }
}

/* ===================== Microajuste M8: COMPACTAÇÃO VERTICAL MOBILE ======

   Escopo: SOMENTE `@media (max-width: 760px)`. Nenhuma regra fora dela foi
   tocada, então o desktop permanece exatamente como estava.

   Objetivo: densificar a parte final da página no mobile (Produtos → Dicas
   → Rodapé) encurtando apenas os RESPIROS verticais, sem encostar blocos
   e sem mexer no conteúdo.

   O que muda, e por quê:
   - `.secao-dicas`: `margin-top` 36px -> 22px. O vão depois do último card
     de produto era o respiro mais longo da página; 22px continua sendo um
     respiro curto e confortável antes de "DICAS DE ...". A section, o
     título, os cards de Dica e as imagens ficam intactos;
   - `.conteudo`: `padding-bottom` 40px -> 20px no mobile. É o espaço entre
     o fim do último card de Dica e o início do rodapé; encurtar o padding
     do fim do `<main>` elimina a grande área vazia sem mexer no rodapé
     nem no alto da página (padding-top 14px e laterais seguem iguais);
   - rodapé: apenas paddings, gaps e margens entre blocos. `.rodape-marca`
     8px -> 6px, `.rodape-area-titulo` 12px -> 8px, `.rodape-lista` gap
     8px -> 6px, `.rodape-conteudo` gap 22px -> 18px e padding vertical
     28/22 -> 22/18, `.rodape-base` padding 14px/30px -> 12px/18px.

   O que NÃO muda: nenhum texto (marca, slogan, títulos, listas, nota de
   Transparência e copyright), nenhuma fonte, tamanho de fonte, cor, borda,
   raio, sombra ou largura; nenhum card de produto ou de Dica (altura
   interna, ofertas, preços, botões e proporção horizontal preservados);
   nenhum JavaScript, HTML ou dados; nenhum comportamento do header
   (sticky, logo, busca, botão Buscar, Favoritos, Seguir, departamentos,
   menu ☰) e nenhuma regra dos microajustes M1 a M7.1.

   Sem altura fixa, sem `transform`, sem `position` artificial, sem margem
   negativa e sem `overflow` escondendo conteúdo: só `margin`, `padding` e
   `gap`. A leitura continua confortável em ~375px e nada é cortado nem
   sobreposto.
   ========================================================================== */

@media (max-width: 760px) {
  /* 1) Produto -> Dicas: respiro curto, sem encostar. */
  .secao-dicas {
    margin-top: 22px;
  }

  /* 2) Dica -> Rodapé: fim do `<main>` deixa de ter 40px de sobra. */
  .conteudo {
    padding-bottom: 20px;
  }

  /* 3) Rodapé: leve, mas ainda claramente dividido em blocos. */
  .rodape-conteudo {
    gap: 18px;
    padding: 22px 20px 18px;
  }

  .rodape-marca {
    margin-bottom: 6px;
  }

  .rodape-area-titulo {
    margin-bottom: 8px;
  }

  .rodape-lista {
    gap: 6px;
  }

  .rodape-base {
    padding: 12px 20px 18px;
  }
}

/* ===================== Microajuste M9.1: HEADER MOBILE COMPACTO NA ROLAGEM =====================

   Escopo: SOMENTE `@media (max-width: 760px)`. Nenhuma regra fora do
   breakpoint foi tocada, então o desktop permanece exatamente igual.

   Objetivo: liberar espaço vertical para produtos e ofertas durante a
   rolagem, sem retirar o acesso rápido à busca, aos Favoritos e aos 9
   departamentos.

   ESTADO NORMAL (topo da página): nada muda. Logo + Favoritos + Seguir
   na linha 1, busca na linha 2 e Automotivo/Beleza/Casa + ☰ na linha 3
   continuam exatamente como aprovados (M1, M2, M4/M4.1, M8).

   ESTADO COMPACTO (depois que o usuário deixa a região inicial): uma
   única linha, com a prioridade horizontal definida para ~375px:

     [ B ] [ campo de busca ] [ Buscar ] [ ♡ 0 ] [ ☰ ]

   COMO FOI FEITO, sem criar um segundo cabeçalho:
   - o JavaScript apenas troca a classe `.cabecalho-compacto` no próprio
     `<header class="cabecalho">`. A referência é a seção `.hero` (já
     existente no conteúdo, bem antes de "Ofertas em destaque"): o compacto
     entra quando o topo dela sobe 70px acima da BASE do cabeçalho — ou
     seja, depois que o usuário deixou o topo e o aviso de demonstração — e
     o normal volta somente quando a rolagem retorna à região superior da
     página. Como a medição é a diferença entre a base do cabeçalho e o
     topo da referência, o ponto de ativação não muda quando o próprio
     cabeçalho muda de altura;
   - no estado compacto, `.cabecalho` vira uma linha flex e
     `.cabecalho-topo`, `.cabecalho-baixo` e `.cabecalho-acoes` usam
     `display: contents`. Assim os elementos REAIS já existentes
     (`.logo` + `.logomarca`, `#formBusca` com `#campoBusca` +
     `#btnBuscar`, `#btnFavoritos` com `#contadorFavoritos` e
     `#btnTodosDepartamentos`) passam a ocupar a mesma linha. Busca,
     favoritos, menu ☰ e lógica de pesquisa NÃO foram duplicados nem
     recriados: são os mesmos elementos, com a mesma lógica.

   O QUE CONTINUA IGUAL NO COMPACTO:
   - a busca permanece VISÍVEL, com o botão "Buscar" explícito e com o
     TEXTO "Buscar" mantido (nunca só um ícone de lupa);
   - os Favoritos continuam com o coração e com a contagem existente —
     funcionamento, localStorage, filtro, estado favoritado e contador
     intactos; só a folga do botão diminui;
   - o ☰ continua sendo a entrada dos 9 departamentos, com o mesmo painel
     ancorado logo abaixo do cabeçalho, a mesma lista, a mesma seleção e
     as mesmas regras de abertura/fechamento, clique externo e Esc
     (M2, M4, M4.1). Nada do menu foi reescrito.

   O QUE SOMA SOMENTE NO COMPACTO: o nome escrito "BusqueAgora" (fica só
   a marca "B", que já existia no cabeçalho), o botão "Seguir" e a linha
   visível "Automotivo | Beleza e Cuidados | Casa & Jardim". Todos
   continuam disponíveis no cabeçalho completo quando a página está no
   topo. Nenhum logotipo novo, nenhuma imagem nova, nenhum arquivo de
   identidade visual tocado.

   MEDIDAS: `flex` com `min-width: 0` (sem largura fixa), logo 32px,
   busca e "Buscar" com 38px de altura, Favoritos e ☰ reduzidos só o
   necessário. Nenhuma quebra para segunda linha, sobreposição, corte de
   texto ou overflow horizontal em ~375px.

   TRANSIÇÃO: NENHUMA. Neste bloco não há `transition` de `height`,
   `padding`, `width` ou `font-size` — a troca de estado é imediata.
   A versão anterior animava a geometria do cabeçalho durante 0.16s, e cada
   quadro dessa animação encurtava o documento, realimentando a rolagem e
   produzindo o tremor/pisca em rolagem lenta. As transições de cor
   existentes nas regras base (`:hover`, foco) continuam intactas: elas não
   alteram geometria.

   ESTABILIDADE EXTRA: `overflow-anchor: none` no `body` apenas no mobile.
   Sem isso, o navegador "ancora" a rolagem para manter o conteúdo no lugar
   quando o cabeçalho muda de altura e compensa os ~103px, deslocando a
   rolagem. Aqui a altura muda uma única vez e para sempre em cada sentido,
   então a âncora de rolagem é desnecessária.

   Nada mais foi alterado: Hero (M1), barra e painel de departamentos
   (M2, M4/M4.1), cards (M3/M4.1), Dicas (M5/M5.1), rodapé e respiro
   vertical (M8), busca, favoritos, texto, taxonomia e dados.
   ========================================================================== */

@media (max-width: 760px) {
  /* A âncora de rolagem do navegador é desligada só aqui: quando o
     cabeçalho troca de altura, o conteúdo abaixo se desloca e o navegador
     tentaria compensar a rolagem, realimentando a troca de estado. Sem
     margem negativa, sem `transform`. */
  body {
    overflow-anchor: none;
  }

  /* Uma única linha, com os mesmos elementos reais do cabeçalho.
     Sem `transition`: a troca de estado é imediata. */
  .cabecalho-compacto {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
  }

  /* Os três contêineres deixam de ser caixa: `.logo`, `#formBusca`,
     `#btnFavoritos`, `#btnTodosDepartamentos` e `#painelDepartamentos`
     viram filhos diretos da linha compacta, na ordem de prioridade. */
  .cabecalho-compacto .cabecalho-topo,
  .cabecalho-compacto .cabecalho-baixo,
  .cabecalho-compacto .cabecalho-acoes {
    display: contents;
  }

  /* 1) Marca: só o "B" já existente, sem nome escrito. */
  .cabecalho-compacto .logo {
    order: 1;
    flex: 0 0 auto;
  }

  .cabecalho-compacto .logo-nome {
    display: none;
  }

  .cabecalho-compacto .logomarca {
    width: 32px;
    height: 32px;
    font-size: 1.05rem;
    border-radius: 10px;
  }

  /* 2) e 3) Busca visível + botão "Buscar" com o texto mantido. */
  .cabecalho-compacto .busca-wrap {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px;
  }

  .cabecalho-compacto .campo-busca {
    height: 38px;
    padding: 0 38px 0 14px;
    font-size: 0.84rem;
  }

  .cabecalho-compacto .btn-buscar {
    height: 38px;
    padding: 0 10px;
    font-size: 0.76rem;
  }

  /* 4) Favoritos: mesmo botão, mesmo coração, mesma contagem. */
  .cabecalho-compacto .btn-favoritos {
    order: 3;
    flex: 0 0 auto;
    padding: 7px 7px;
    gap: 5px;
  }

  /* Some só no compacto; no topo volta ao normal. */
  .cabecalho-compacto .btn-seguir {
    display: none;
  }

  /* A linha visível dos 3 departamentos some no compacto; o ☰ continua. */
  .cabecalho-compacto .barra-departamentos {
    display: none;
  }

  /* 5) ☰ continua sendo a entrada dos 9 departamentos. */
  .cabecalho-compacto .btn-todos-departamentos {
    order: 4;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
  }

  /* O painel segue ancorado logo abaixo do cabeçalho compacto, com a
     mesma lista e o mesmo comportamento (M2, M4, M4.1). */
  .cabecalho-compacto .painel-departamentos {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
  }
}

/* ===================== Microajuste M12: ATALHOS DE DEPARTAMENTO NO MOBILE ======

   Escopo: SOMENTE `@media (max-width: 760px)` e SOMENTE a linha de atalhos
   do cabeçalho (`.barra-departamentos`) mais o aviso de protótipo do rodapé.
   Nenhuma regra fora do breakpoint foi alterada, então o desktop aprovado
   continua com os 9 departamentos, o mesmo layout e a mesma ordem.

   1) OS 3 ATALHOS DO MOBILE
   Antes: Automotivo, Beleza e Cuidados, Casa & Jardim (os 3 primeiros, por
   corte de posição na lista). Agora: Beleza e Cuidados, Moda e Acessórios e
   Tecnologia — os 3 nomes oficiais, por extenso, na mesma linha, antes do ☰.

   COMO FOI FEITO, sem mexer no app.js, no HTML, na taxonomia nem no menu:
   - a lista da barra continua sendo montada em app.js com os 9
     departamentos, na mesma ordem alfabética de sempre;
   - a troca é só de visibilidade: por padrão, nenhum atalho aparece
     (`display: none`) e apenas os três nomes escolhidos são exibidos, com
     seletor por `data-departamento` — o mesmo atributo que o app.js já
     escrevia e que o menu ☰ reaproveita. Os 3 são o 2º, o 8º e o 9º itens da
     lista, ou seja, a ordem visual já é a alfabética, sem precisar de
     `order` e sem mexer no DOM;
   - o corte antigo (`li:nth-child(n+4)`) continua valendo, mas é sobreposto por
     estas regras, que têm especificidade maior: por isso as regras antigas
     precisam ser lidas junto com este bloco;
   - Automotivo, Casa & Jardim, Cozinha, Eletrodomésticos, Esporte e Lazer e
     Família e Pet continuam disponíveis no menu ☰, que mostra os 9 nomes
     (o painel é montado a partir da lista do DOM, antes desta filtragem de
     CSS, então nada foi removido de lá);
   - a seleção de departamento (`.ativo`, filete laranja) e o comportamento do
     ☰ (abrir, fechar, ×, clique fora, Esc) continuam idênticos, porque são os
     mesmos botões e a mesma função `selecionarDepartamento`.

   MEDIDAS (as 3 linhas em ~375px, com o ☰ de 40px ao lado):
   - recuo lateral da barra 14px -> 12px e gap do ☰ 10px -> 8px;
   - gap entre os nomes 5px -> 4px e padding lateral de cada nome 8px -> 4px:
     folga menor em vez de fonte menor, como preferível;
   - fonte: `clamp(0.56rem, 3vw, 0.78rem)` — ~11,3px em 375px, ~10,8px em 360px
     e o mesmo teto de 0.78rem (~12,5px) já usado entre 509px e 760px. Antes
     eram ~9,6px em 375px, ou seja, a legibilidade melhorou;
   - `min-height: 40px` e a área de toque de cada nome continuam iguais, então
     a altura do cabeçalho não muda;
   - a barra continua com `overflow: hidden` (M2): como os 3 nomes coubem
     inteiros, nenhum deles aparece cortado na lateral direita e não existe
     rolagem horizontal.

   2) AVISO DE PROTÓTIPO NO RODAPÉ
   A faixa grande do topo saiu do HTML e a informação de demonstração continua,
   agora discreta no rodapé: uma linha de texto simples abaixo do copyright,
   sem fundo, sem borda, sem caixa e sem cor de alerta. A regra está na seção
   "RODAPÉ DA HOME", sem ajuste por breakpoint, então a aparência é a mesma no
   mobile e no desktop e a faixa inferior do rodapé ganha apenas essa linha.

   O QUE NÃO MUDA: logo, busca, botão Buscar, Favoritos, Seguir, a linha de
   atalhos do cabeçalho compacto (M9.1, que esconde a barra de departamentos),
   o Hero (M1), os cards (M3), as Dicas (M5/M5.1), o respiro vertical (M8), a
   busca e seus estados (M10/M10.1), o Destaque do Dia (M11), o rodapé, os
   favoritos/localStorage e o desktop. Nenhuma transição de geometria foi
   adicionada, então a troca de estado do cabeçalho continua imediata.
   ========================================================================== */

@media (max-width: 760px) {
  /* 1a) Recuo lateral e distância até o ☰: um pouco mais compactos, para
     abrir ~6px de largura para os três nomes completos. */
  .cabecalho-baixo {
    gap: 8px;
    padding: 0 12px 8px;
  }

  /* 1b) Só três atalhos, escolhidos pelo nome oficial, sem corte por
     posição: é a regra que substitui o "3 primeiros" do M2. */
  .barra-departamentos-lista > li {
    display: none;
  }

  .barra-departamentos-lista > li:has(> .departamento[data-departamento="Beleza e Cuidados"]),
  .barra-departamentos-lista > li:has(> .departamento[data-departamento="Moda e Acessórios"]),
  .barra-departamentos-lista > li:has(> .departamento[data-departamento="Tecnologia"]) {
    display: block;
  }

  /* 1c) Separação entre os nomes: 4px no lugar de 5px. */
  .barra-departamentos-lista {
    gap: 4px;
  }

  /* 1d) Fonte um degrau maior e folga lateral menor: os três nomes por
     extenso cabem em ~375px sem reduzir a tipografia a um tamanho minúsculo
     e sem quebrar nenhum nome em duas linhas. */
  .barra-departamentos-lista .departamento {
    padding: 7px 4px;
    font-size: clamp(0.56rem, 3vw, 0.78rem);
  }
}

/* ===================== Microajuste M13.1: HERO CONTEXTUAL + TÍTULO MOBILE =====

   Escopo: DUAS regras pequenas, nenhuma delas redesenha o Hero da Home nem
   o desktop.

   1) HERO SEM DESTAQUE (departamento sem produto elegível)
      O Hero institucional — título, subtítulo e caixa — permanece; apenas o
      card DESTAQUE DO DIA é ocultado pelo app.js. Esta regra só colapsa a
      grade de duas colunas para uma, para o card ausente não deixar um vão
      vazio do tamanho do card. Ela vale para a largura do card SOMENTE
      quando a classe `hero-sem-destaque` está presente, ou seja, quando não
      há produto elegível: na Home e em qualquer departamento com produto, o
      Hero é visualmente idêntico ao aprovado no M11.

   2) TÍTULO "OFERTAS DO DIA — [DEPARTAMENTO]" EM UMA LINHA NO MOBILE
      O texto do título é mantido por inteiro: nenhuma abreviação, nenhuma
      remoção do travessão e nenhuma quebra em duas linhas. A solução é
      tipográfica e vale igualmente para os 9 departamentos — não existe
      regra exclusiva para Moda e Acessórios, nem para qualquer outro nome
      mais longo.

      O ajuste é mínimo e é o mesmo em todos os casos:
      - `font-size: clamp(0.78rem, 3.8vw, 1rem)` — acompanha a largura da tela,
        então o título mais longo ("MODA E ACESSÓRIOS", o mesmo tamanho de
        "BELEZA E CUIDADOS" e "ELETRODOMÉSTICOS") cabe na largura útil já
        disponível: ~347px a 375px, com folga de sobra, e também nas telas
        menores, sem criar rolagem horizontal nem overflow;
      - `letter-spacing` de 0.045em -> 0.02em — recupera alguns pixels de
        largura sem tocar em margem, padding ou na largura disponível;
      - `white-space: nowrap` — garante UMA única linha, como aprovado; o
        tamanho fluido acima é o que impede qualquer estouro.

      A classe `titulo-departamento` é aplicada pelo app.js somente quando o
      título é o de um departamento, portanto "OFERTAS EM DESTAQUE" (Home),
      "RESULTADOS DA BUSCA" (M10/M10.1) e "MEUS FAVORITOS" (M4.2) mantêm a
      tipografia atual — inclusive no mobile — e o desktop (acima de 760px)
      não é afetado por nenhuma regra deste bloco.
   ========================================================================== */

.hero-sem-destaque {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 760px) {
  .titulo-secao h2.titulo-departamento {
    font-size: clamp(0.78rem, 3.8vw, 1rem);
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
}

/* ===================== Microajuste M16 — OFERTA EXTERNA (MODO DEMO) =====
   Componente visual de UMA oferta encontrada nos parceiros depois de uma
   busca sem resultado no catálogo BusqueAgora.

   ISOLAMENTO: todas as classes deste bloco começam com `oferta-externa` e são
   usadas exclusivamente aqui. Nenhum seletor existente do protótipo é
   alterado, nenhuma classe anterior é reescrita e nenhuma medida de
   `.card-produto`, `.oferta-linha`, `.parceiro-bloco`, `.botao-oferta`,
   `.estado-vazio`, `.estado-zero-*`, `.estado-departamento-*` ou do Hero muda
   por causa desta microetapa. As regras abaixo não se aplicam a nada além do
   bloco de demonstração, que nasce `hidden` no index.html e só é exibido com
   `?demoOfertaExterna=1` e busca ativa com zero resultado.

   HIERARQUIA VISUAL (de cima para baixo):

     .oferta-externa-selo     "OFERTA ENCONTRADA" — rótulo pequeno, discreto,
                              igual ao rótulo do Destaque do Dia
     .oferta-externa-produto  produto, em destaque, quebrando naturalmente
     .oferta-externa-variante variante, secundária, em placa neutra
     .oferta-externa-preco    preço com a maior ênfase de leitura do card
     .oferta-externa-parceiro  placeholder neutro de iniciais + nome do
                              parceiro, sempre visível
     .oferta-externa-cta      "Ver oferta →" em laranja, largura do card
     .oferta-externa-nota-demo nota MIÚTIMA e apagada, fora do card, logo
                              abaixo, para não competir com ele

   CAIXA: fundo branco, borda leve (a mesma `--borda` dos cards), raio de 14px
   (o mesmo dos cards internos) e sombra mínima de 1px. Nada de banner, nada
   de faixa, nada de fundo colorido e nada de `--fundo` (bege/marrom).

   LARGURA: o bloco inteiro é limitado a 360px e centralizado, para ficar
   proporcional à coluna de um card da grade de resultados e nunca ocupar a
   faixa toda do desktop como um banner.

   MOBILE: o mesmo card, com respiro vertical menor, preço um pouco menor e
   nome do produto quebrando de forma natural (`overflow-wrap: break-word`).
   Nenhuma rolagem horizontal, nenhum bloco esticado. */

.oferta-externa-bloco {
  max-width: 360px;
  margin: 0 auto;
}

.oferta-externa {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 15px 16px 16px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 80, 136, 0.04);
  text-align: left;
}

.oferta-externa-selo {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--laranja);
}

.oferta-externa-produto {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--texto);
  overflow-wrap: break-word;
  word-break: normal;
}

.oferta-externa-variante {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--texto-suave);
  background: #F6F9FB;
  border-radius: 999px;
  padding: 2px 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oferta-externa-preco {
  margin: 2px 0 0;
  font-family: var(--fonte-titulo);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--azul);
}

.oferta-externa-parceiro {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}

/* Placeholder neutro do parceiro de demonstração: as iniciais ("PD") dentro de
   uma placa pequena, no mesmo espírito dos placeholders de imagem já
   existentes. Nenhuma imagem externa, nenhum arquivo, nenhum logo e nenhuma
   identidade visual de parceiro real. */
.oferta-externa-parceiro-marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  font-family: var(--fonte-titulo);
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  color: var(--azul);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #C8DDEB;
  border-radius: 6px;
  user-select: none;
}

.oferta-externa-parceiro-nome {
  min-width: 0;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--texto-suave);
}

/* O CTA tem exatamente a aparência do CTA real (mesmo laranja, mesmo raio em
   pílula, mesma fonte), mas está tecnicamente inativo no modo demo: sem `href`,
   sem URL e sem redirecionamento. Não há regra de `:hover` aqui de propósito —
   ele não responde a nada, e `cursor: default` evita a sugestão de que exista
   um destino. O `aria-disabled="true"` já está no index.html. */
.oferta-externa-cta {
  align-self: stretch;
  margin-top: 3px;
  min-height: 36px;
  padding: 9px 16px;
  font-family: var(--fonte-geral);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--branco);
  background: var(--laranja);
  border: 0;
  border-radius: 999px;
  cursor: default;
}

/* A nota fica FORA do card, logo abaixo dele, com o mesmo tamanho e a mesma
   cor apagada da nota de simulação do M14.1: é uma marca de demonstração, não
   parte da oferta, e não pode competir com o preço nem com o CTA. */
.oferta-externa-nota-demo {
  margin: 8px 0 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: #8A97A5;
  text-align: left;
}

@media (max-width: 760px) {
  .oferta-externa {
    gap: 6px;
    padding: 13px 14px 14px;
  }

  .oferta-externa-produto {
    font-size: 0.95rem;
  }

  .oferta-externa-preco {
    font-size: 1.18rem;
  }

  .oferta-externa-cta {
    min-height: 40px;
    margin-top: 2px;
  }

  .oferta-externa-nota-demo {
    margin-top: 7px;
    font-size: 0.7rem;
  }
}

/* ===================== WP2 — compatibilidade WordPress =====================

   ÚNICO ajuste trazido da portabilidade. Nenhuma cor, tipografia,
   espaçamento, breakpoint ou regra visual do protótipo foi alterado.

   Motivo: no WordPress, a barra de administração (`#wpadminbar`) é fixa no
   topo e empurra o documento por meio de `margin-top` no `html`. Como
   `.cabecalho` é `position: sticky; top: 0`, ele encostaria ATRÁS da barra
   de administração sempre que o usuário estivesse logado. Estas três
   regras apenas deslocam o ponto de fixação do cabeçalho pela altura da
   barra, de modo que a aparência aprovada seja preservada.

   Não há efeito algum para visitante não logado: `#wpadminbar` não existe e
   `body.admin-bar` não se aplica. -------------------------------------------------------------------- */

body.admin-bar .cabecalho {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .cabecalho {
    top: 46px;
  }
}

@media screen and (max-width: 600px) {
  body.admin-bar .cabecalho {
    top: 0;
  }
}