/* ---------- Catálogo em cards de produto ---------- */

.capa-piloto { min-height: auto; padding: 56px 24px 64px; }

/* scroll-margin pela barra fixa: ao pular para uma categoria pelo
   indice, o titulo dela parava ATRAS da barra de busca (que e sticky) e
   o cliente caia no meio dos cards sem saber onde estava.

   O numero deixou de ser chutado. A barra nova muda de altura entre o
   computador e o celular (barra + linha de categorias: 109px e 91px
   medidos), e quem escreve `--topo-fixo` e o proprio cards.js, lendo a
   altura real da `.mx-topo` no carregamento e a cada redimensionamento.
   Os 120px continuam como reserva para o `catalogo-pdf.html`, que nao
   tem o topo novo e segue com a barra branca de 124-134px. */
.categoria-cards { padding: 46px 20px 10px; scroll-margin-top: var(--topo-fixo, 120px); }

/* a faixa também é alvo de rolagem: o mega-menu leva até ela, e sem
   esta margem o título dela para debaixo da barra fixa */
.setor { scroll-margin-top: var(--topo-fixo, 120px); }
.categoria-cards:nth-of-type(even) { background: var(--branco); }

.categoria-cards .categoria-head {
  max-width: 1180px;
  margin: 0 auto 24px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--azul-suave);
}

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

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

/* stretch iguala a fileira; 1fr iguala também entre fileiras,
   para o bloco inteiro sair simétrico */
.grade-cards {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 18px;

  /* Sem `grid-auto-rows: 1fr`, e o motivo é grave.
     Aquela linha dava a TODAS as linhas da grade a altura da mais alta.
     Ficava simétrico com tudo fechado, mas amarrava a grade inteira: ao
     abrir a lista de modelos de UM card, todas as linhas cresciam junto.
     Medido em 9 de agosto de 2026, no celular: o card cresceu 543px e a
     PÁGINA cresceu 5.471px — dez vezes mais. Como as linhas acima do card
     também esticavam, ele descia da tela, e o cliente perdia de vista
     justamente o produto que acabou de abrir.
     Sem ela, cada linha tem a própria altura. A simetria dentro de cada
     linha continua (os cards ainda esticam até o mais alto DA LINHA), e
     abrir um card mexe só na linha dele. */
  align-items: stretch;
}

/* ---------- redes sociais (topo e rodapé) ---------- */
.redes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin: 22px auto 0;
}

.rede {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  color: var(--branco);
  font-size: var(--t-body);
  font-weight: var(--p-forte);
  text-decoration: none;
  transition: background .16s, border-color .16s, transform .16s;
}

/* ícone na cor real da rede; ao passar o mouse o botão assume a cor
   e o ícone vira branco para não sumir contra o próprio fundo */
.rede svg { width: 19px; height: 19px; fill: var(--cor); flex-shrink: 0; }
/* --grad vem inline com o id único daquela inserção (topo ou rodapé) */
.rede svg.grad path { fill: var(--grad); }

.rede:hover {
  background: var(--cor);
  border-color: var(--cor);
  color: var(--contraste, #fff);   /* âmbar precisa de texto escuro */
  transform: translateY(-2px);
}

.rede:hover svg,
.rede:hover svg.grad path { fill: var(--contraste, #fff); }

/* setores dentro da categoria — as faixas do catálogo impresso */
.setor + .setor { margin-top: 30px; }

.setor-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  max-width: 1180px;
  margin: 0 auto 14px;
  padding-bottom: 7px;
  border-bottom: 1px solid #dfe6f1;
  color: var(--azul);
  font-size: var(--t-h4);
  font-weight: var(--p-bold);
  letter-spacing: var(--ls-titulo);
  /* sem caixa alta: a faixa precisa poder escrever "iPhone" e "MagSafe"
     na grafia da marca, e caixa alta apagaria isso */
}

.setor-titulo span { position: relative; padding-left: 13px; }

.setor-titulo span::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 5px; height: 5px;
  margin-top: -2px;
  background: var(--azul-claro);
  border-radius: 50%;
}

/* logo recortada da faixa do catálogo — o fundo azul dela some contra o chip */
.setor-logo {
  height: 26px;
  width: auto;
  align-self: center;
  background: var(--azul);
  border-radius: 4px;
  object-fit: contain;
}

.setor-titulo:has(.setor-logo) span { padding-left: 0; }
.setor-titulo:has(.setor-logo) span::before { display: none; }

.setor-titulo small {
  margin-left: auto;
  color: var(--texto-fraco);
  font-size: var(--t-2xs);
  font-weight: var(--p-medio);
  letter-spacing: 0;
  text-transform: none;
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--branco);
  border: 2px solid var(--azul);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--sombra);
}

/* o miolo (descrição ou lista) absorve a sobra, então o bloco de preço
   de todos os cards da fileira fica na mesma linha */
.card > .card-specs,
.card > .modelos { flex: 1 1 auto; }

.card > .card-marcas { flex: 0 0 auto; }

/* foto */
.card-foto {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #fff;
  border-bottom: 2px solid var(--azul);
  cursor: zoom-in;
  overflow: hidden;
}

/* âmbar em vez de vermelho: vermelho lê como aviso/erro; âmbar diz oferta
   e ainda chama o olho. --promo concentra o tom num lugar só. */
:root {
  --promo: #e9a13b;
  --promo-escuro: #8a5a12;
}

.selo-promo {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 2;
  padding: 4px 11px;
  background: var(--promo);
  border-radius: 5px;
  box-shadow: 0 2px 7px rgba(138, 90, 18, .35);
  color: #3d2a00;
  font-size: var(--t-3xs);
  font-weight: var(--p-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* "Novo" divide a posição com "Promoção" e nunca aparece junto (ver
   cards.js). Verde e não âmbar: âmbar aqui é oferta, e novidade não é
   desconto — misturar os dois ensinaria o cliente a ler errado os dois. */
/* "Em breve" divide a quina com os outros selos, mas em azul da casa:
   ambar e oferta, verde e novidade que ja esta na prateleira, e este e o
   que ainda vai chegar. Cor propria para o cliente nao confundir com
   produto que ele pode levar hoje — e do lado direito, porque pode
   conviver com o selo de novidade. */
.selo-breve {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 2;
  padding: 4px 11px;
  background: var(--azul);
  border-radius: 5px;
  box-shadow: 0 2px 7px rgba(9, 22, 48, .35);
  color: #fff;
  font-size: var(--t-3xs);
  font-weight: var(--p-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.selo-novo {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 2;
  padding: 4px 11px;
  background: var(--ok);
  border-radius: 5px;
  box-shadow: 0 2px 7px rgba(18, 74, 44, .32);
  color: #fff;
  font-size: var(--t-3xs);
  font-weight: var(--p-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* moldura e um fio no topo do nome: sinaliza sem repintar o card inteiro */
/* ---------- card em promoção ----------
   Antes era um card azul com um filete âmbar encaixado dentro da faixa do
   nome: lia como adesivo colado por cima, não como um card diferente. Aqui
   as faixas azuis do card viram bronze — a mesma escala do cabeçalho de
   Promoção na página de pedido —, e o card inteiro passa a ser de
   promoção, em vez de um card comum com um enfeite. */
.card.em-promocao { border-color: var(--promo-forte); }

/* as faixas cheias trocam de cor */
.card.em-promocao .card-nome,
.card.em-promocao .preco-unidade .rotulo,
.card.em-promocao .caixa-titulo {
  background: linear-gradient(168deg, var(--promo-forte) 0%, var(--promo-escuro) 100%);
  border-color: var(--promo-forte);
}

/* e os fios que separavam em azul */
.card.em-promocao .card-foto,
.card.em-promocao .preco-unidade strong { border-color: var(--promo-forte); }

/* "Ver preços dos N modelos" é texto, não faixa: só a cor da letra — e a
   moldura do pulso de clique, que também nasce azul */
.card.em-promocao .modelos summary { color: var(--promo-escuro); }
.card.em-promocao .modelos summary.piscando { border-color: var(--promo); }

.card-foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .2s;
}

.card-foto:hover img { transform: scale(1.04); }

/* ---------- galeria e vídeo (prontos, hoje com 1 mídia por card) ---------- */
.card-foto video { width: 100%; height: 100%; object-fit: contain; }

.selo-video {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: var(--g-g);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
  pointer-events: none;
}

.conta-midia {
  position: absolute;
  right: 8px; bottom: 8px;
  z-index: 2;
  padding: 2px 8px;
  background: rgba(10, 18, 38, .72);
  border-radius: 999px;
  color: #fff;
  font-size: var(--t-3xs);
  font-weight: var(--p-forte);
  font-variant-numeric: tabular-nums;
}

/* setas sobre a foto: sempre visíveis, para o cliente notar que há mais de uma */
.seta-foto {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 30px; height: 30px;
  margin-top: -15px;
  padding: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(26, 47, 92, .18);
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .18);
  color: var(--azul);
  font-size: var(--g-p);
  line-height: 1;
  cursor: pointer;
  transition: background .15s, transform .15s;
}

.seta-foto.esq { left: 6px; }
.seta-foto.dir { right: 6px; }
.seta-foto:hover { background: #fff; transform: scale(1.1); }

/* navegação do lightbox */
.lb-midia { max-width: 100%; max-height: 88vh; border-radius: 10px; }
video.lb-midia { background: #000; }

.lb-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
}

.lb-nav button {
  width: 40px; height: 40px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  color: #fff;
  font-size: var(--g-m);
  line-height: 1;
  cursor: pointer;
}

.lb-nav button:hover { background: rgba(255, 255, 255, .26); }
.lb-conta { color: rgba(255, 255, 255, .8); font-size: var(--t-sm); font-weight: var(--p-forte); font-variant-numeric: tabular-nums; }

.sem-foto {
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(45deg, #f4f6fa, #f4f6fa 10px, #eaeff7 10px, #eaeff7 20px);
  color: var(--texto-fraco);
  font-size: var(--t-2xs);
  font-weight: var(--p-medio);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* nome em faixa azul, como no card impresso.
   é o título do produto: 600 basta — a faixa azul já dá o destaque,
   e 800 aqui competia com o preço, que é quem deve puxar o olho. */
.card-nome {
  padding: 10px 12px;
  background: var(--azul);
  border-top: 2px solid var(--azul);
  color: var(--branco);
  font-size: var(--t-h4);
  font-weight: var(--p-forte);
  letter-spacing: var(--ls-titulo);
  line-height: var(--lh-titulo);
  text-align: center;
}

/* Folga embaixo, e não zero: logo abaixo vem "Ver preços dos N modelos",
   que quando pisca ganha moldura. Sem esta folga a moldura encostava nas
   pastilhas de marca e as duas viravam um bloco só — o dono reclamou de
   não haver espaço entre "iPhone" e o quadrado que pulsa. */
.card-marcas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 12px;
}

.ref-tag {
  padding: 3px 9px;
  border: 1px solid #f0b96a;
  border-radius: 999px;
  color: #a35c08;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: var(--t-3xs);
  font-weight: var(--p-forte);
  letter-spacing: var(--ls-label);
}

/* modelos compatíveis */
.modelos { flex: 1; padding: 0 12px 10px; }

/* O navegador esconde o conteúdo do <details> fechado com uma regra fraca:
   qualquer filho com `display` próprio (a lista é grid, a tabela é table)
   passa por cima e fica visível. Esconde explicitamente. */
.modelos:not([open]) > *:not(summary) { display: none; }

.modelos summary {
  padding: 9px 0;
  color: var(--azul);
  font-size: var(--t-sm);
  font-weight: var(--p-forte);
  cursor: pointer;
  list-style: none;
}

.modelos summary::-webkit-details-marker { display: none; }
.modelos summary::before { content: '▸ '; }
.modelos[open] summary::before { content: '▾ '; }

/* chama atenção para o clique sem virar pisca-pisca: pulso suave que para
   assim que a lista abre e ao passar o mouse */
.modelos summary.piscando {
  padding: 7px 10px;
  border: 1.5px solid var(--azul-claro);
  border-radius: 7px;
  animation: pulsa-clique 1.9s ease-in-out infinite;
}

.modelos[open] summary.piscando,
.modelos summary.piscando:hover {
  animation: none;
  background: var(--azul-suave);
}

@keyframes pulsa-clique {
  0%, 100% { background: transparent;        box-shadow: 0 0 0 0 rgba(93, 154, 214, .45); }
  50%      { background: var(--azul-suave);  box-shadow: 0 0 0 6px rgba(93, 154, 214, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .modelos summary.piscando { animation: none; background: var(--azul-suave); }
}

/* Fechar pelo fim da lista: há cards com 60 modelos, e sem isto o cliente
   precisa rolar tudo de volta até o resumo só para recolher. */
.fechar-lista {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  border: 1px solid #e3e9f2;
  border-radius: 7px;
  background: var(--cinza);
  color: var(--azul);
  font: inherit;
  font-size: var(--t-2xs);
  font-weight: var(--p-forte);
  cursor: pointer;
}

.fechar-lista:hover { background: #e6eefb; }

.modelo-marca + .modelo-marca { margin-top: 14px; }
.modelo-marca .marca-tag { margin-bottom: 6px; }

/* aviso explicando a coluna de caixa fechada — antes era só "Caixa 100un" */
.aviso-caixa {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  padding: 8px 11px;
  background: #eaf7ef;
  border: 1px solid #bfe3cd;
  border-left: 4px solid #2f7d4f;
  border-radius: 0 6px 6px 0;
  color: #1f5e3a;
  font-size: var(--t-xs);
  line-height: var(--lh-densa);
}

.aviso-caixa .icone-caixa { width: 26px; height: auto; flex-shrink: 0; }
.aviso-caixa b { display: block; font-weight: var(--p-forte); }

/* cabeçalho da coluna de caixa, com o desenho sempre presente */
.th-caixa { white-space: nowrap; }

.th-caixa .icone-caixa {
  width: 15px; height: auto;
  vertical-align: -3px;
  margin-right: 4px;
  filter: brightness(0) invert(1);   /* sobre a faixa azul do cabeçalho */
}

.th-caixa span { display: inline-block; vertical-align: middle; }
/* o cabeçalho já está no piso da escala: distingue por opacidade, não por corpo.
   `inherit` é obrigatório — sem ele o navegador aplica 0.83em em <small>
   e o texto cai para 8px. */
.th-caixa small { display: block; font-size: inherit; font-weight: var(--p-normal); opacity: .78; }

/* tabela clássica (tablet): mesmos fios finos da grade, sem agrupar por preço */
.modelo-marca table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #dfe6f1;
  border-radius: 5px;
  overflow: hidden;
  font-size: var(--t-sm);
}

.modelo-marca th {
  padding: 5px 7px;
  background: var(--azul);
  border-right: 1px solid rgba(255, 255, 255, .18);
  color: var(--branco);
  font-size: var(--t-3xs);
  font-weight: var(--p-forte);
  letter-spacing: var(--ls-label);
  text-align: left;
  text-transform: uppercase;
}

.modelo-marca th:last-child { border-right: none; }
.modelo-marca th:not(:first-child) { text-align: right; white-space: nowrap; }

.modelo-marca td {
  padding: 4px 7px;
  border-right: 1px solid #e8eef7;
  border-bottom: 1px solid #e8eef7;
  line-height: var(--lh-densa);
}

.modelo-marca td:last-child { border-right: none; }
.modelo-marca tbody tr:last-child td { border-bottom: none; }
.modelo-marca .preco { text-align: right; font-weight: var(--p-bold); white-space: nowrap; }
.modelo-marca .caixa { color: #2f7d4f; }

/* modelos agrupados pelo preço, em colunas — lista de 60 vira poucas linhas */
.grupo-preco + .grupo-preco { margin-top: 10px; }

.grupo-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 5px 8px;
  background: #eaf1fa;
  border-left: 3px solid var(--azul);
  border-radius: 0 4px 4px 0;
}

.grupo-valor { color: var(--azul-escuro); font-size: var(--t-preco-sm); font-weight: var(--p-bold); }

.grupo-caixa {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 5px;
  background: #eaf7ef;
  border: 1px solid #bfe3cd;
  border-radius: 999px;
  color: #1f5e3a;
  font-size: var(--t-2xs);
  font-weight: var(--p-normal);
}

.grupo-caixa .icone-caixa { width: 15px; height: auto; flex-shrink: 0; }
.grupo-caixa b { font-weight: var(--p-bold); }

.grupo-qtd {
  margin-left: auto;
  color: var(--texto-fraco);
  font-size: var(--t-3xs);
  font-weight: var(--p-medio);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* grade com fios finos: separa visualmente cada modelo sem gastar uma linha por item */
.lista-modelos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 0;
  margin-top: 6px;
  border: 1px solid #dfe6f1;
  border-radius: 5px;
  overflow: hidden;
  list-style: none;
}

/* guarda o termo de busca do produto de variação única, sem aparecer */
.item-modelo.oculto { display: none; }

.item-modelo {
  padding: 4px 7px;
  border-right: 1px solid #e8eef7;
  border-bottom: 1px solid #e8eef7;
  font-size: var(--t-sm);
  line-height: var(--lh-densa);
  color: var(--texto);
  overflow-wrap: anywhere;
}

/* poucos modelos: em linha, sem grade. a grade deixaria célula sobrando
   e o bloco saía torto — só compensa quando a lista é longa. */
.lista-modelos.inline {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.lista-modelos.inline .item-modelo {
  padding: 3px 10px;
  background: var(--cinza);
  border: 1px solid #dfe6f1;
  border-radius: 999px;
  font-size: var(--t-xs);
  /* herda `overflow-wrap: anywhere` de .item-modelo de propósito.
     `break-word` não serve aqui: ele não reduz a largura mínima intrínseca,
     então a pílula não encolhe dentro do flex e cadeias longas
     ("MacBook Air Pro 13.3 A1706/A1708/…") vazavam para fora do card. */
}

/* produto que serve um aparelho só: o modelo precisa aparecer no card */
.compativel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 10px 12px;
  text-align: center;
}

.compativel span {
  color: var(--texto-fraco);
  font-size: var(--t-3xs);
  font-weight: var(--p-medio);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.compativel b {
  color: var(--azul-escuro);
  font-size: var(--t-body);
  font-weight: var(--p-forte);
  line-height: var(--lh-densa);
}

/* produto de aparelho único: mesmo visual dos demais cards, sem destaque */
.compativel.exclusivo { gap: 7px; }

.cores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--texto-fraco);
  font-size: var(--t-3xs);
  font-weight: var(--p-medio);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.cores i {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 5px;
  background: var(--cinza);
  border: 1px solid #dde5f0;
  border-radius: 999px;
  color: var(--texto);
  font-size: var(--t-2xs);
  font-style: normal;
  font-weight: var(--p-forte);
  letter-spacing: 0;
  text-transform: none;
}

/* cores de fábrica anunciadas no card, logo abaixo do nome: separa do bloco
   de preço que vem em seguida, sem virar mais uma faixa */
.card-cores { margin: 2px 0 8px; }

/* bolinha no tom real do aparelho; sem tom conhecido, a pílula fica lisa */
.cores i[style]::before {
  content: '';
  width: 11px; height: 11px;
  flex-shrink: 0;
  background: var(--tom);
  border: 1px solid rgba(0, 0, 0, .22);
  border-radius: 50%;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35);
}

/* ---------- venda só em pacote fechado ----------
   fica dentro da lista: aparece quando o cliente abre os modelos */
.pacote {
  margin-bottom: 12px;
  border: 2px solid var(--azul);
  border-radius: 8px;
  overflow: hidden;
}

.pacote-topo {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  background: var(--azul);
  color: var(--branco);
  font-size: var(--t-2xs);
  line-height: var(--lh-densa);
}

.pacote-topo .icone-caixa { width: 26px; height: auto; flex-shrink: 0; filter: brightness(0) invert(1); }
.pacote-topo b { display: block; font-size: var(--t-xs); font-weight: var(--p-forte); }

.pacote-precos { display: grid; grid-template-columns: 1fr 1fr; }

.pacote-precos span {
  padding: 8px 6px;
  text-align: center;
}

.pacote-precos span + span { border-left: 1px solid #dbe3ef; }

.pacote-precos small {
  display: block;
  color: var(--texto-fraco);
  font-size: var(--t-3xs);
  font-weight: var(--p-medio);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.pacote-precos strong { display: block; font-size: var(--t-preco-md); font-weight: var(--p-bold); margin-top: 3px; }

.pacote-precos .destaque { background: #fff6e9; }
.pacote-precos .destaque strong { color: #a35c08; font-size: var(--t-preco-lg); }

/* bloco de preços — réplica do card impresso */
.preco-unidade { margin-top: auto; text-align: center; }

.preco-unidade .rotulo {
  display: block;
  padding: 6px;
  background: var(--azul);
  border-top: 2px solid var(--azul);
  color: var(--branco);
  font-size: var(--t-2xs);
  font-weight: var(--p-forte);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* o maior número do card: é o que o cliente compara entre produtos */
.preco-unidade strong {
  display: block;
  padding: 10px 6px;
  border-bottom: 2px solid var(--azul);
  font-size: var(--t-preco-xl);
  font-weight: var(--p-bold);
  line-height: var(--lh-justa);
  color: var(--texto);
}

/* faixa "Caixa | PREÇO POR UNIDADE NA CAIXA FECHADA" */
.caixa-titulo {
  display: grid;
  grid-template-columns: 34% 1fr;
  align-items: center;
  background: var(--azul);
  color: var(--branco);
}

.caixa-titulo span:first-child {
  padding: 7px 4px;
  font-size: var(--t-xs);
  font-weight: var(--p-forte);
  letter-spacing: var(--ls-label);
  text-align: center;
  text-transform: uppercase;
}

.caixa-titulo span:last-child {
  padding: 5px 6px;
  font-size: var(--t-3xs);
  font-weight: var(--p-medio);
  letter-spacing: var(--ls-label);
  line-height: var(--lh-titulo);
  text-align: center;
  text-transform: uppercase;
}

.caixa-titulo b { display: block; color: #f7a13d; }

.preco-caixa {
  display: grid;
  grid-template-columns: 34% 1fr;
  align-items: stretch;
  border-bottom: 2px solid var(--azul);
}

/* ícone à esquerda e, ao lado, número com "unidades" embaixo — como no impresso.
   em linha única o conteúdo estourava a célula e o ícone saía da borda */
.caixa-qtd {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 5px;
  border-right: 2px solid var(--azul);
  color: var(--texto);
  text-align: center;
  overflow: hidden;
}

.qtd-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  line-height: var(--lh-aperta);
}

.icone-caixa { width: 26px; height: auto; flex-shrink: 0; object-fit: contain; }
.caixa-qtd b { font-size: var(--t-preco-lg); font-weight: var(--p-bold); line-height: 1; }

.caixa-qtd small {
  color: #d9660a;
  font-size: var(--t-3xs);
  font-weight: var(--p-medio);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.caixa-valor { padding: 6px 8px; text-align: center; }
.caixa-valor strong { display: block; font-size: var(--t-preco-lg); font-weight: var(--p-bold); line-height: var(--lh-justa); }

.caixa-valor small {
  display: block;
  color: #d9660a;
  font-size: var(--t-3xs);
  font-weight: var(--p-medio);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.economia {
  padding: 6px 4px;
  background: var(--branco);
  color: var(--azul-escuro);
  font-size: var(--t-3xs);
  font-weight: var(--p-medio);
  letter-spacing: 0;
  line-height: var(--lh-densa);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;        /* uma linha só, como no impresso */
}

.economia b { color: #d9660a; font-weight: var(--p-bold); }

/* inline para o texto quebrar como frase, sem o negrito virar item solto */
.cifrao {
  display: inline-grid;
  place-items: center;
  width: 13px; height: 13px;
  margin-right: 3px;
  vertical-align: -2px;
  background: #f08c1f;
  border-radius: 50%;
  color: #fff;
  font-size: var(--t-3xs);
  font-weight: var(--p-bold);
}

/* descrição em tópicos, como no card impresso */
.card-specs {
  flex: 1;
  min-height: 34px;
  padding: 8px 12px 8px 28px;
  color: var(--texto);
  font-size: var(--t-sm);
  line-height: var(--lh-corpo);
}

.card-specs li { margin-bottom: 1px; }
.card-specs.vazia { padding: 10px 12px; }   /* card sem tópicos no impresso */

@media (max-width: 560px) {
  .grade-cards { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .categoria-cards { padding: 36px 12px 8px; }
  /* no celular só o que é grande encolhe — um degrau, nunca abaixo de 10px.
     texto de 7px cabia na célula mas não se lê; quem perde espaço é o
     espaçamento entre letras e o ícone, não o tamanho da fonte. */
  .card-nome { padding: 8px; font-size: var(--t-body); }
  .card-specs { padding: 7px 8px 7px 22px; font-size: var(--t-xs); }
  .preco-unidade strong { padding: 8px 4px; font-size: var(--t-preco-lg); }
  .caixa-valor strong { font-size: var(--t-preco-md); }
  .caixa-qtd b { font-size: var(--t-preco-md); }
  .modelo-marca table { font-size: var(--t-xs); }

  /* célula estreita: alarga a coluna, zera o tracking e encolhe o ícone */
  .caixa-titulo, .preco-caixa { grid-template-columns: 46% 1fr; }
  .caixa-titulo span:first-child,
  .caixa-titulo span:last-child { letter-spacing: .02em; }
  .caixa-qtd { gap: 3px; padding: 5px 2px; }
  .caixa-qtd small { letter-spacing: 0; }
  .icone-caixa { width: 15px; }

  /* card estreito demais para o aviso numa linha */
  .economia { white-space: normal; }

  /* A tabela clássica do tablet tem 3 colunas e precisa de ~222px. Em card de
     170px ela estourava, e como o card é `overflow: hidden` a coluna da caixa
     fechada ficava inteira fora — o cliente não via o preço de atacado.
     Esses cards passam a ocupar a fileira toda no celular. */
  .card:has(.modelo-marca table) { grid-column: 1 / -1; }

  /* o pacote fechado também tem 2 colunas de preço: em card estreito
     elas viram uma embaixo da outra */
  .pacote-precos { grid-template-columns: 1fr; }
  .pacote-precos span + span { border-left: none; border-top: 1px solid #dbe3ef; }
}

/* ---------- produto esgotado ----------
   Acabou o estoque, mas continua na linha e volta a chegar — por isso fica
   no catálogo em vez de sumir (some só o que saiu de linha).

   Faixa cruzando a foto, a pedido do dono: um selo de canto passava
   despercebido no meio de uma grade cheia de cards. Atravessada, ela é a
   primeira coisa que o olho pega, e não dá para confundir com enfeite.

   O vermelho é o #C0392B que o catálogo já usa nas bolinhas de cor, em vez
   de um tom novo. Aqui ele cabe: o comentário lá em cima diz que vermelho
   lê como aviso, e é exatamente isso que esta faixa é — ao contrário do
   âmbar da promoção, que diz o oposto.

   Semitransparente para a peça continuar visível por baixo: o objetivo é o
   cliente ver o produto, gostar, e perguntar quando chega. */
:root {
  --esgotado: #C0392B;
  --esgotado-escuro: #7f2018;
}

.selo-esgotado {
  position: absolute;
  top: 50%;
  left: -14%;
  width: 128%;
  z-index: 3;
  transform: translateY(-50%) rotate(-11deg);
  padding: 7px 0;
  background: rgba(192, 57, 43, .93);
  box-shadow: 0 3px 14px rgba(0, 0, 0, .3);
  color: #fff;
  text-align: center;
  font-size: var(--t-2xs);
  font-weight: var(--p-bold);
  letter-spacing: .2em;
  text-transform: uppercase;
  pointer-events: none;
}

/* a foto perde a cor para o card inteiro dizer "fora" mesmo de longe, mas
   sem apagar a peça */
.card.esgotado .card-foto img,
.card.esgotado .card-foto video {
  filter: grayscale(1);
  opacity: .66;
}

/* o preço continua legível — o cliente quer saber quanto vai custar quando
   voltar —, mas deixa de gritar */
.card.esgotado .preco-unidade strong { color: var(--esgotado-escuro); }

/* as setas da galeria continuam funcionando: ver as cores do produto é
   justamente o que faz a pessoa voltar */

/* ---------- cor esgotada ----------
   Uma cor acabou, o resto do produto não. Ela fica na lista riscada e
   apagada, em vez de sumir: assim o cliente vê que a cor existe, entende
   que voltou a faltar, e pergunta quando chega. Sumindo, ele acharia que
   a loja nunca teve aquela cor.

   A bolinha do tom continua colorida — é ela que identifica a cor — mas
   perde a saturação, para não competir com as disponíveis. */
.card-cores i.cor-esgotada {
  color: #93a0b3;
  text-decoration: line-through;
  text-decoration-color: rgba(192, 57, 43, .8);
  text-decoration-thickness: 2px;
  opacity: .78;
}

.card-cores i.cor-esgotada::before { filter: grayscale(.55); }

/* ---------- modelo esgotado ----------
   Um degrau abaixo do produto esgotado: acabou o iPhone 15, mas o 15 Pro
   tem. O modelo fica na lista riscado, com a etiqueta ao lado, pelo mesmo
   motivo da cor — sumindo, o cliente acharia que a loja nunca atendeu o
   aparelho dele e pararia de perguntar. */
.item-modelo.modelo-esgotado { color: #93a0b3; }

.item-modelo.modelo-esgotado > td:first-child,
li.item-modelo.modelo-esgotado {
  text-decoration: line-through;
  text-decoration-color: rgba(192, 57, 43, .75);
}

.tag-esgotado {
  display: inline-block;
  margin-left: 7px;
  padding: 0 6px;
  border-radius: 4px;
  background: #fdecea;
  color: #7f2018;
  font-size: var(--t-3xs);
  font-weight: var(--p-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  vertical-align: 1px;
}

/* ==========================================================================
   BLACK WEEK — o que aparece dentro do card
   Ver o bloco de mesmo nome no estilo.css para o porque do preto e ouro.
   ========================================================================== */

/* ---------- o preco de antes ----------
   Riscado, menor e sem peso: ele existe para dar tamanho ao desconto, nao
   para ser lido como preco. O numero que vale continua sendo o unico em
   corpo grande e negrito — se os dois disputassem, o cliente pararia para
   descobrir qual e qual, e a oferta perderia no meio segundo que tem. */
/* ---------- o corte no preco antigo ----------
   O dono pediu o preco antigo cortado "da ponta direita superior ate a
   parte esquerda inferior", em vermelho. O `line-through` do CSS nao
   serve: ele so sabe desenhar na horizontal, na cor do texto, e nao ha
   propriedade que o incline.

   A primeira tentativa foi um `linear-gradient` de canto a canto. Ficou
   ruim, e o dono disse isso com todas as letras. O motivo e geometrico:
   ligando canto a canto, a inclinacao passa a depender do formato da
   caixa — numa caixa larga e baixa, que e o que um preco e, a reta sai
   quase deitada e parece um fio torto, nao um corte.

   Entao agora e uma BARRA, desenhada num `::after` e girada 12 graus. O
   angulo e fixo, nao sai de conta nenhuma: "R$ 29,00" e "R$ 1.250,00"
   saem com a mesma inclinacao e a mesma espessura, e a fileira de cards
   fica alinhada. Girar no sentido anti-horario levanta a ponta direita e
   abaixa a esquerda, que e o pedido.

   Ela avanca 5% para cada lado: um corte que comeca e termina exatamente
   onde o texto comeca e termina parece curto, porque o olho espera que o
   traco ultrapasse o que ele corta. */
.preco-de s,
.preco-antes {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.preco-de s::after,
.preco-antes::after {
  content: '';
  position: absolute;
  left: -5%;
  right: -5%;
  top: 50%;
  height: 2px;
  border-radius: 2px;
  background: var(--corte);
  transform: translateY(-50%) rotate(-12deg);
}

.preco-antes {
  margin-right: 7px;
  color: #78839a;
  font-size: var(--t-xs);
  font-weight: var(--p-medio);
}

/* ---------- preço no card fechado ----------
   Duas linhas, a unidade e a embalagem fechada, uma sobre a outra e com
   o rótulo pequeno em cima de cada número. Fica entre as marcas e o
   "Ver preços dos N modelos", que é onde o olho passa antes de decidir
   se abre a lista.

   Na Black o card inteiro já veste a cor da campanha; aqui não entra
   mais nenhuma marca, senão viram três avisos dizendo a mesma coisa num
   palmo de tela. */
.card-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 10px 0 2px;
  padding: 9px 11px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--cinza);
}

.card-resumo > span {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.card-resumo small {
  color: var(--texto-fraco);
  font-size: var(--t-2xs);
  font-weight: var(--p-medio);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.card-resumo b {
  color: var(--texto);
  font-size: var(--t-sm);
  font-weight: var(--p-forte);
  font-variant-numeric: tabular-nums;
}

.card-resumo .ate {
  color: var(--texto-fraco);
  font-weight: var(--p-medio);
}

/* O icone do pacote DENTRO do rotulo, e nao empurrando o rotulo para
   baixo. Sem esta regra ele herdava o tamanho natural do SVG, virava um
   bloco de 24px e jogava "A unidade no pacote de 50" para a linha de
   baixo -- o dono viu: "a caixa ficou no lugar errado". */
/* O icone e um <img class="icone-caixa">, nao um <svg> -- a primeira
   tentativa de consertar isto mirou em svg e nao pegou nada, e o dono teve
   de apontar duas vezes. Com 26px de largura e display de bloco ele
   empurrava "A unidade no pacote de 50" para a linha de baixo. */
.card-resumo-un .icone-caixa {
  /* A DIREITA do rotulo e maior, como o dono pediu. A esquerda ele
     disputava a entrada da linha com a primeira palavra; a direita ele
     fecha a frase, e e ai que sobra espaco -- o rotulo e curto e a
     coluna, larga. */
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-left: 8px;
  vertical-align: -6px;
  opacity: .8;
}

/* o ícone da caixa fica na linha do rótulo, não do número */
.card-resumo-pct { position: relative; }
.card-resumo-pct svg { position: absolute; left: -16px; top: 1px; width: 12px; height: 12px; opacity: .55; }

/* na campanha o número do pacote é o que desceu, então ele puxa a cor */
.na-black .card-resumo-pct b { color: var(--black-ouro-escuro, #6d4e08); }
/* O riscado do PACOTE. Mesma barra do riscado de unidade, mas em BLOCO e
   nao ao lado: a coluna do valor do pacote e estreita, e o numero que
   vale tem de continuar na posicao de sempre — quem compara dois cards
   procura o preco no mesmo lugar nos dois. Riscado ao lado empurraria o
   valor para a direita so neste card.

   So aparece quando a campanha baixa o preco do pacote, que hoje e um
   produto so (PACOTE_NA_BLACK, no comum.js). */
.caixa-antes {
  position: relative;
  display: block;
  text-decoration: none;
  color: #78839a;
  font-size: var(--t-xs);
  font-weight: var(--p-medio);
  line-height: 1.25;
}

/* O mesmo riscado, mas dentro da linha do pacote na lista de modelos e
   na tabela: ali ele fica AO LADO do valor, porque a linha e horizontal
   e tem espaco de sobra. Usa o <s> do navegador mesmo — a barra inclinada
   do riscado grande, num texto de 12px, vira borrao. */
.grupo-caixa-antes {
  color: #8e97a8;
  font-weight: var(--p-medio);
  opacity: .9;
}
.caixa-antes::after {
  content: '';
  position: absolute;
  left: -5%;
  right: -5%;
  top: 50%;
  height: 1.5px;
  border-radius: 2px;
  background: var(--corte);
  transform: translateY(-50%) rotate(-12deg);
}

/* nos riscados pequenos — tabela de modelos e lista compacta — a barra
   afina junto, senao ela engole o numero */
.preco-antes::after { height: 1.5px; }

/* no numero grande do card ele sobe para a linha de cima, centrado */
.preco-unidade .preco-antes {
  display: block;
  margin: 8px 0 0;
  font-size: var(--t-sm);
}

/* e o numero grande encosta nele, em vez de manter o respiro de quando
   estava sozinho sob a faixa azul */
.preco-unidade .preco-antes + strong { padding-top: 2px; }

/* Na tabela de modelos a coluna e estreita: lado a lado os dois precos
   quebrariam a linha, entao o riscado vai acima. Pequeno, mas nao os
   10px do piso — pelo mesmo motivo do card, um preco de antes que nao se
   le nao serve para nada. */
td.preco .preco-antes {
  display: inline-block;
  margin: 0;
  font-size: var(--t-2xs);
  line-height: var(--lh-aperta);
}

/* na lista compacta o grupo e uma linha so: aqui lado a lado cabe */
.grupo-valor .preco-antes { font-size: var(--t-2xs); margin-right: 5px; }

/* no card do carrossel o preco e empilhado com a legenda "a unidade" */
.mx-nv-preco .preco-antes {
  display: block;
  margin: 0 0 1px;
  font-size: var(--t-xs);
}

/* ---------- o selo ----------
   Quina de baixo a esquerda. As de cima estao tomadas: "Promoção" e
   "Novo" dividem a esquerda, "Em breve" fica na direita — e um produto da
   Black pode estar em promoção ao mesmo tempo, porque a campanha nao
   desliga o estado que o produto ja tinha. Empilhados, um cobriria o
   outro sobre a foto. */
.selo-black {
  position: absolute;
  bottom: 8px; left: 8px;
  z-index: 2;
  padding: 4px 11px;
  background: var(--black-noite);
  border: 1px solid var(--black-ouro);
  border-radius: 5px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .4);
  color: var(--black-ouro);
  font-size: var(--t-3xs);
  font-weight: var(--p-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ---------- o card da oferta ----------
   Um fio de ouro e a faixa do preco em preto. Nao mais que isso: numa
   vitrine de 27 cards, repintar o card inteiro faria 27 blocos escuros
   lado a lado e a foto do produto — que e o que vende — sumiria no meio.
   O fio marca a oferta e a foto continua sendo a dona do card. */
.card.na-black { border-color: var(--black-ouro); }

.card.na-black .preco-unidade .rotulo {
  background: var(--black-noite);
  border-top-color: var(--black-noite);
  color: var(--black-ouro);
}

.card.na-black .preco-unidade strong { border-bottom-color: var(--black-ouro); }

/* ---------- a vitrine ----------
   O cabecalho da grade plana, quando se entra por "Black Week". */
.vitrine-black .categoria-head {
  /* O cabecalho normal e um titulo com um fio azul embaixo, sem respiro
     dos lados. Fundo escuro nele, assim como esta, encostaria no texto:
     aqui ele deixa de ser um fio e passa a ser um painel, com padding
     proprio e o fio dispensado. */
  padding: 16px 20px;
  border-bottom: none;
  border-radius: var(--raio);
  background:
    radial-gradient(70% 180% at 92% 50%, rgba(240, 180, 41, .16) 0%, transparent 60%),
    linear-gradient(100deg, var(--black-noite) 0%, var(--black-grafite) 70%, #241d14 100%);
  border-color: var(--black-borda);
}

.vitrine-black .categoria-head h2 { color: var(--branco); }
.vitrine-black .categoria-head p {
  color: var(--black-ouro);
  font-weight: var(--p-forte);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ---------- "de R$ 35,00" ----------
   A primeira versao disto era 13px em cinza claro com o risco a 75% de
   opacidade, e o dono nao conseguiu ler: "o preco riscado nao sei se da
   pra enxergar direito". Estava certo. Um preco de antes que nao se le
   nao da lastro nenhum a oferta — e so uma mancha cinza acima do preco.

   Agora segue o que as grandes lojas fazem, e fazem porque funciona: a
   palavra "de" anuncia o que vem, o numero vem em 15px, e o risco e um
   fio solido de 2px na propria cor do texto. */
.preco-de {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-top: 9px;
  text-transform: uppercase;
}

/* "DE" e rotulo, nao preco: vem menor e de pe. O risco e do numero ao
   lado, e so dele. */
.preco-de .rot-de {
  color: var(--texto-fraco);
  font-size: var(--t-2xs);
  font-weight: var(--p-forte);
  letter-spacing: var(--ls-label);
}

.preco-de s {
  display: inline-block;
  color: var(--texto-fraco);
  font-size: var(--t-lead);
  font-weight: var(--p-forte);
  letter-spacing: .01em;
}

/* "POR" fica na linha do preco que vale, a esquerda dele, e e a unica
   palavra dourada sobre fundo claro no card. Pequena de proposito: ela e
   o rotulo daquele numero, nao um segundo numero, e em corpo maior
   roubaria a vez dele. */
.rot-por {
  color: var(--black-ouro-f);
  font-size: var(--t-2xs);
  font-weight: var(--p-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ---------- a pastilha, colada no preco que vale ----------
   Ela e a UNICA coisa dourada sobre fundo claro no card, e por isso nao
   precisa ser grande para ser vista: num campo todo azul e cinza, o ouro
   ja puxa o olho. Maior do que esta, comecaria a disputar com o numero. */
.selo-desconto {
  /* Um respiro antes da pastilha. Ela sai colada no numero no template
     -- moeda(preco) seguido de seloDesconto(p), sem espaco entre os dois
     -- e no card grande a fonte maior disfarcava; no resumo e na tabela
     de modelos, com 13 e 12px, "R$ 199,99" e "33% OFF" encostavam. O dono
     apontou: "ta muito grudado, deixa um espaco pequeno". Vai no CSS e
     nao no HTML de proposito: espaco escrito no template vira caractere,
     e caractere quebra linha em lugar errado. */
  margin-left: 7px;
  padding: 4px 10px;
  background: var(--black-noite);
  border-radius: 999px;
  color: var(--black-ouro);
  font-size: var(--t-xs);
  font-weight: var(--p-bold);
  line-height: var(--lh-aperta);
  /* os digitos com a mesma largura: numa grade de 27, -9% e -31% ficam
     com a pastilha do mesmo tamanho e a fileira para de serrilhar */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* O preco e a pastilha dividem a mesma linha. O `strong` continua sendo
   bloco — e dele o fio que fecha a caixa do preco, e um fio da largura do
   numero em vez da largura do card seria outro desenho. */
.card.na-black .preco-unidade strong {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* a linha inteira da oferta: POR, o preco e o tamanho da queda */
  gap: 8px;
  padding-top: 2px;
}

/* ---------- no card do carrossel ----------
   Mesma ideia em corpo menor: ali o preco ja e o maior numero da caixa
   branca e a linha de cima tem de caber sem empurrar o nome do produto. */
.mx-nv-preco .preco-de { margin: 0; }
.mx-nv-preco .preco-de s { font-size: var(--t-sm); }
.mx-nv-preco .rot-por { font-size: var(--t-3xs); }
.mx-nv-preco .selo-desconto { padding: 3px 8px; font-size: var(--t-3xs); }

/* `.mx-nv-preco small` e a legenda "a unidade", que e bloco e centrada;
   sem isto a palavra "de" herdaria essa regra e cairia numa linha so
   para ela */
.nv-agora {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ---------- celular ----------
   Dois cards por fileira em 360px de tela: lado a lado, "R$ 1.250,00" e a
   pastilha estouravam a largura e a pastilha caia sozinha numa terceira
   linha, desalinhada. Empilhadas e centradas, cabem sempre. */
@media (max-width: 420px) {
  .card.na-black .preco-unidade strong,
  .nv-agora {
    flex-direction: column;
    gap: 5px;
  }
}

/* ---------- a cor fixa de um modelo ----------
   Mesma forma e mesma posicao da tarja de esgotado, que diz a mesma
   natureza de coisa: o que o cliente NAO pode pedir naquela linha. Em azul
   da casa, e nao em vermelho, porque cor unica e informacao de venda e nao
   falta de estoque. */
.tag-cor {
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--azul);
  color: var(--branco);
  font-size: var(--t-3xs);
  font-weight: var(--p-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

/* A gaveta da marca que ficou fora da oferta da campanha. Discreta de
   proposito: ela nao e um segundo produto nem uma segunda oferta, e so
   o resto da lista -- ver o porque no cards.js, no blocoDeMarca. */
.modelos-fora { margin-top: 10px; }

.modelos-fora > summary {
  padding: 9px 12px;
  border: 1px dashed var(--linha);
  border-radius: 9px;
  color: var(--texto-fraco);
  font-size: var(--t-xs);
  font-weight: var(--p-medio);
  cursor: pointer;
  list-style: none;
}

.modelos-fora > summary::-webkit-details-marker { display: none; }
.modelos-fora > summary::before { content: "▸ "; }
.modelos-fora[open] > summary::before { content: "▾ "; }
.modelos-fora > summary:hover { color: var(--texto); border-color: var(--texto-fraco); }