/* ============================================================
   PROMOÇÃO 7.7 — v3 (imagem intacta + faixa de contador/botão
   logo abaixo dela, sem sobreposição por coordenadas)
   Pra trocar de campanha: troque assets/img/promo77-banner.webp
   pela nova arte (sem precisar recortar nada dela — ela é usada
   inteira, do jeito que vier), ajuste texto/link/prazo aqui embaixo,
   e o "OFERTA 7.7" nos cards.
   ============================================================ */

.promo77-banner{
  display:block;
  text-decoration:none;
}
.promo77-banner-img{
  width:100%;
  height:auto;
  aspect-ratio:1672/941; /* reserva o espaço mesmo se a imagem ainda não tiver carregado ou falhar */
  display:block;
  background:linear-gradient(135deg,#FFCB3D,#F0A400); /* cor de fallback enquanto carrega / se falhar */
  object-fit:cover;
}

/* Faixa do contador + botão, logo ABAIXO da imagem (não mais sobreposta em cima
   dela) — assim centralizar é simples e confiável em qualquer tamanho de tela,
   sem depender de coordenadas fixas em cima da arte. */
.promo77-overlay{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(10px,2.2vw,18px);
  padding:clamp(14px,3vw,26px) 16px;
  background:#000;
}

.promo77-label{
  display:flex;
  align-items:center;
  gap:clamp(4px,1vw,10px);
  font-family:'Inter',sans-serif;
  font-weight:700;
  letter-spacing:.08em;
  font-size:clamp(9px,1.7vw,15px);
  color:#fff;
  white-space:nowrap;
}
.promo77-label span.line{ height:2px; width:clamp(10px,2.2vw,26px); background:#fff; display:inline-block; }

.promo77-countdown{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(4px,1.1vw,10px);
}
.promo77-unit{
  background:#C05050;
  border-radius:clamp(6px,1.2vw,10px);
  min-width:clamp(34px,7.5vw,64px);
  padding:clamp(4px,1vw,9px) clamp(3px,0.8vw,7px) clamp(3px,0.7vw,6px);
  text-align:center;
  box-shadow:0 4px 0 rgba(0,0,0,.35);
}
.promo77-unit .n{
  display:block;
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:clamp(13px,3.4vw,30px);
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
  line-height:1;
}
.promo77-unit .l{
  display:block;
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:clamp(6px,1vw,9.5px);
  letter-spacing:.05em;
  color:#fff;
  margin-top:3px;
}

.promo77-cta{
  display:inline-flex;
  align-items:center;
  gap:clamp(5px,1vw,10px);
  background:#0A1428;
  color:#fff;
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:clamp(10px,2.3vw,17px);
  letter-spacing:.01em;
  padding:clamp(7px,1.6vw,16px) clamp(12px,3vw,28px);
  border-radius:999px;
  box-shadow:0 4px 0 rgba(0,0,0,.18);
  white-space:nowrap;
  transition:transform .15s ease;
}
.promo77-banner:hover .promo77-cta{ transform:translateY(-2px); }
.promo77-cta .arrow{ color:#F6BE05; }

/* Cabeçalho da própria página da campanha (sem o link de fundo, só decorativo) */
.promo77-page-banner{ position:relative; }

/* ============================================================
   Cards da campanha 7.7 — remove o badge "OFERTA 7.7" (feito no HTML)
   e transforma "VER O PRODUTO" num botão de verdade
   ============================================================ */
.campaign-grid .product-cta{
  display:inline-block;
  background:#0A1428;
  color:#fff !important;
  font-weight:700;
  font-size:12px;
  letter-spacing:.03em;
  padding:8px 20px;
  border-radius:999px;
  margin-top:8px;
}

/* Título oculto visualmente mas presente para leitores de tela e SEO
   (a página não perde um <h1>, só não mostra o texto na tela) */
.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}