/* ============================================================
   PROMOÇÕES — promocoes.html
   Reaproveita as variáveis de css/style.css. O hero é o mesmo
   estilo usado em loja.html (duplicado aqui para esta página não
   depender de css/loja.css).
   ============================================================ */

.shop-hero{
  padding:150px 0 64px;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(36,84,224,0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(179,18,28,0.10) 0%, transparent 55%),
    var(--ink);
}
.shop-hero h1{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(34px,6vw,64px);line-height:1.02;letter-spacing:0.01em;
  max-width:820px;margin:14px 0 18px;
}
.shop-hero-sub{font-size:17px;color:#D3CCC2;max-width:520px;}
@media (max-width:640px){ .shop-hero{padding:130px 0 48px;} }

/* ---------- lista de promoções ----------
   Grade fixa de 2 colunas (2 imagens lado a lado, 3 linhas para as
   6 promoções), tanto no desktop como no mobile — nunca 1 coluna.
   Cada card passa a ter a imagem em cima e o texto por baixo (em vez
   do layout anterior lado a lado), para caber bem numa coluna estreita
   sem cortar nada. Nem as imagens nem o conteúdo das promoções mudam,
   só a organização do layout. */
.promo-detail-list{
  display:grid;grid-template-columns:repeat(2,1fr);gap:28px;padding:48px 0;
}

.promo-detail{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);
  overflow:hidden;scroll-margin-top:96px;
}

.promo-detail-media{background:#0a0a0b;}
/* aspect-ratio uniforme para as 6 promoções ficarem alinhadas na grade;
   as fotos são todas em formato retrato (ver FULL_DIMS em js/promos.js),
   3/4 é a proporção mais próxima do conjunto sem cortar de forma estranha. */
.promo-detail-media img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;}

.promo-detail-body{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1 1 auto;}
.promo-detail-day{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--brass);margin-bottom:8px;
}
.promo-detail-body h2{
  font-family:var(--font-display);font-size:clamp(20px,2.6vw,26px);
  text-transform:uppercase;line-height:1.08;margin-bottom:8px;
}
.promo-detail-tagline{font-size:13.5px;color:#D8D2C8;margin-bottom:16px;}
.promo-detail-benefits{margin-bottom:20px;}
.promo-detail-benefits li{
  position:relative;padding:8px 0 8px 24px;font-size:13px;font-weight:500;
  border-top:1px solid var(--line);
}
.promo-detail-benefits li:last-child{border-bottom:1px solid var(--line);}
.promo-detail-benefits li::before{
  content:'✓';position:absolute;left:0;top:8px;color:var(--blue);font-weight:700;
}
.promo-detail-body .btn{align-self:flex-start;margin-top:auto;}
/* Nesta página a validade fica solta sob o botão, sem a linha divisória
   que faz sentido dentro dos cards pequenos da home. */
.promo-detail-body .promo-validity{
  margin-top:14px;padding-top:0;border-top:none;
}

@media (max-width:860px){
  .promo-detail-list{gap:20px;}
}
@media (max-width:640px){
  .promo-detail-list{gap:12px;padding:32px 0;}
  .promo-detail-body{padding:14px 14px 18px;}
  .promo-detail-day{font-size:10px;margin-bottom:5px;}
  .promo-detail-body h2{font-size:clamp(15px,4.6vw,18px);margin-bottom:5px;}
  .promo-detail-tagline{font-size:11.5px;margin-bottom:10px;line-height:1.4;}
  .promo-detail-benefits{margin-bottom:14px;}
  .promo-detail-benefits li{font-size:11px;padding:6px 0 6px 20px;}
  .promo-detail-body .btn{width:100%;text-align:center;font-size:12px;padding:12px 10px;}
  .promo-validity{font-size:9px;}
}
@media (max-width:400px){
  .promo-detail-list{gap:8px;}
  .promo-detail-body{padding:10px 10px 14px;}
}