/* HAC-803: página de promoções da Steam (/promocoes-steam/ e /en/steam-sale/)
   e banner da home. CSP live: style-src 'self' — este arquivo é servido como
   /promocoes-steam/promocoes-steam.css?v=<sha8> (nada de style inline).
   Press Sheet: banner como fio duplo com chapéu mono no acento; grade de ofertas sem cartões,
   desconto em Bodoni itálico no acento. Tokens do /style.css. */

.banner-steam { margin: 28px 0 0; }
.banner-steam a {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-top: 3px double var(--fio-forte);
  border-bottom: 1px solid var(--fio);
  color: inherit;
  text-decoration: none;
}
.banner-steam .banner-steam-tag {
  flex: none;
  font: 600 .72rem/1.2 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acento);
}
.banner-steam b { font: 600 clamp(1.1rem, 2vw, 1.35rem)/1.2 var(--serif); }
.banner-steam small {
  display: block;
  margin-top: 2px;
  font: 500 .72rem/1.4 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.banner-steam .banner-steam-seta { margin-left: auto; font: 600 1.2rem/1 var(--mono); color: var(--acento); }
.banner-steam a:hover b { color: var(--acento); }

.intro-promo { margin: .4rem 0 1rem; }

.grade-promo {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  column-gap: 28px;
  border-top: 1px solid var(--fio-forte);
}
.item-promo {
  display: flex;
  flex-direction: column;
  padding: 18px 0 20px;
  border-bottom: 1px dashed var(--fio);
}
.item-promo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 616 / 353;
  object-fit: cover;
  border: 1px solid var(--fio-forte);
}
.item-promo .promo-corpo { padding: 12px 0 0; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.item-promo h3 { margin: 0; font: 600 1.15rem/1.2 var(--serif); }
.item-promo h3 a { color: inherit; text-decoration-color: var(--acento); }
.promo-precos { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.promo-desconto {
  font: italic 600 1.6rem/1 var(--serif);
  font-variant-numeric: lining-nums;
  color: var(--acento);
}
.promo-preco-agora { font: 600 .95rem/1.2 var(--mono); color: var(--tinta); }
.promo-preco-antes { font: 400 .8rem/1.2 var(--mono); color: var(--tinta-3); text-decoration: line-through; }
.promo-plataforma {
  font: 500 .68rem/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.promo-ver {
  margin-top: auto;
  padding-top: 6px;
  font: 600 .74rem/1.2 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta);
  text-decoration-color: var(--acento);
}
.promo-ver:hover { color: var(--acento); }
.promo-nota { margin: 1.2rem 0 0; font: 400 .74rem/1.45 var(--mono); letter-spacing: .03em; color: var(--tinta-3); }
/* HAC-1459: aviso de link de afiliado — aparece ao lado do link da loja só quando o
   programa está ativo (ID real no config.json). Inline não: CSP live é style-src 'self'. */
.aviso-afiliado { font: 400 .62rem/1.2 var(--mono); letter-spacing: .04em; color: var(--tinta-3); text-transform: none; }