/*
 * A BASE DAS PÁGINAS DE PROPAGANDA (2026-10-19).
 *
 * As páginas de produto da loja (spi.html, plantao.html, consultorio-produto.html e as outras dez)
 * voltaram a ser as de antes do redesign, a pedido do dono: "pode reverter as de propaganda". Elas
 * carregam ../style.css, a folha do SPI, e no redesign do SPI essa folha mudou: alguns tokens de cor
 * ficaram diferentes (o fio das caixas passou a ser translúcido claro, e some sobre as faixas claras
 * das campanhas) e as telas ilustrativas .lp2-* saíram de lá junto com a página de venda que ficava
 * embaixo da entrada.
 *
 * Esta folha devolve SÓ isso, e SÓ às páginas de propaganda (o corpo delas tem .loja-spi-body e uma
 * das classes de campanha), com os valores copiados do style.css de antes (caa0418). O SPI não muda.
 * Vem logo depois de css/loja.css, no mesmo lugar da cascata em que o style.css antigo valia, e sem
 * peso nenhum (:where): as folhas de campanha que redefinem estes tokens continuam valendo.
 */
:where(body.loja-spi-body:is(.spi-venda, .campanha-venda, .venda-ecossistema)) {
  --color-cream: #1a1a1a;
  --color-panel: #141414;
  --color-border: #2a2a2a;
  --color-muted: #bdbdbd;
  --color-secondary: #1a1a1a;
  --color-high: #f0a199;
  --color-chapa: #050505;
  --color-fio: rgba(252, 244, 232, .13);
  --color-fio-forte: rgba(252, 244, 232, .28);
  --color-superficie: rgba(252, 244, 232, .04);
  --color-surface: #141414;
  --color-surface-alt: #1a1a1a;
  --color-text-muted: #bdbdbd;
  --color-danger: #f0a199;
}

/* "tela" ilustrativa dos módulos: moldura e linhas com o nome real das coisas */
.lp2-screen {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 1.2rem;
  padding: 0.75rem;
  box-shadow: 0 22px 50px -30px rgba(20, 40, 30, 0.5);
}
.lp2-screen-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.4rem 0.7rem;
}
.lp2-screen-bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); }
.lp2-screen-bar b {
  margin-left: 0.5rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.lp2-screen-body { background: var(--color-cream); border-radius: 0.9rem; padding: 0.6rem; display: grid; gap: 0.45rem; }
.lp2-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 0.7rem;
  padding: 0.65rem 0.8rem;
}
.lp2-row b { font-size: 0.88rem; font-weight: 600; color: var(--color-text); }
.lp2-row span { font-size: 0.72rem; color: var(--color-muted); text-align: right; }
.lp2-row-src { background: var(--color-secondary); border-color: transparent; }

.lp2-curva { display: block; width: 100%; height: 130px; color: var(--color-primary); }
.lp2-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.4rem 0.15rem 0.1rem; }
.lp2-chips span {
  font-size: 0.7rem;
  color: var(--color-muted);
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.55rem;
}
.lp2-chips .lp2-chip-on { color: var(--color-chapa); background: var(--color-primary); border-color: transparent; }
.lp2-chips .lp2-chip-z { color: var(--color-primary-dark); background: var(--color-secondary); border-color: transparent; }