body {
  margin: 0;
  font-family: Arial;
  background: #000;
  color: #fff;
}

/* HERO */
.hero {
  position: relative;
  height: 60vh;
}

.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.4) contrast(1.3);
}

.hero-content {
  position: relative;
  text-align: center;
  padding-top: 90px;
}

.hero h1 {
  color: #00ff88;
  text-shadow: 0 0 20px #00ff88;
}

/* PROGRESSO */
.progress {
  padding: 15px;
  text-align: center;
}

.barra {
  height: 8px;
  width: 90%;
  margin: auto;
  background: #111;
  border-radius: 10px;
}

.barra-fill {
  height: 100%;
  width: 0%;
  background: #00ff88;
  box-shadow: 0 0 20px #00ff88;
}

/* PRODUTOS */
.produtos {
  display: flex;
  overflow-x: auto;
  gap: 15px;
  padding: 20px;
}

.card {
  min-width: 140px;
  background: rgba(0,0,0,0.7);
  border-radius: 12px;
  padding: 8px;
  text-align: center;
}

.card img {
  width: 100%;
  border-radius: 5px;
}

/* PREÇO */
.preco {
  margin-top: 10px;
}

.old {
  text-decoration: line-through;
  color: #888;
  display: block;
}

.new {
  color: #00ff88;
  font-size: 22px;
  font-weight: bold;
}

/* BOTÃO */
.card button {
  margin-top: 10px;
  padding: 12px;
  background: #00ff88;
  border-radius: 10px;
  border: none;
  font-weight: bold;
}

/* CARRINHO */
.carrinho {
  padding: 20px;
  background: #111;
}

.carrinho ul {
  list-style: none;
  padding: 0;
}

.carrinho li {
  margin-bottom: 5px;
}

.carrinho button {
  margin-top: 10px;
  padding: 15px;
  width: 100%;
  background: #00ff88;
  border-radius: 10px;
  font-weight: bold;
}
/* BARRA YOUTUBE */
.music-bar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 18px;
  opacity: 0.12;
  z-index: 999;
  border: none;
  pointer-events: none;
}

/* TEXTO HERO AJUSTADO */
.hero-content { padding-top: 130px; }
.hero h1 { font-size: 18px; }

/* BARRA PULSANDO */
@keyframes glowPulse {
  0% { box-shadow: 0 0 10px #00ff88; }
  50% { box-shadow: 0 0 25px #00ff88; }
  100% { box-shadow: 0 0 10px #00ff88; }
}
.barra-fill { animation: glowPulse 1.5s infinite; }

/* BOTÃO REMOVER */
.remove-btn {
  margin-left: 10px;
  background: red;
  border: none;
  color: #fff;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
}
/* Barra fixa no topo */
.progress {
  position: sticky;
  top: 12px; /* deixa espaço pra barrinha do YouTube */
  z-index: 998;
  background: #0f0f0f; /* evita transparência sobre o hero */
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Garante que o conteúdo não “grude” atrás dela */
.produtos {
  scroll-margin-top: 70px; /* quando usar scrollIntoView */
}

/* (opcional) leve sombra pra destacar */
.progress {
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
/* ===== FONTE MAIS BONITA ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap');

.progress, .progress * {
  font-family: 'Poppins', Arial, sans-serif;
}

/* ===== BARRA COM FUNDO DA LOGO ===== */
.progress {
  position: sticky;
  top: 12px; /* respeita a barrinha do YouTube */
  z-index: 998;

  /* FUNDO COM SUA IMAGEM */
  background: url("https://i.ibb.co/ns0ZLdvn/C159-A3-EA-E27-F-4-C54-B4-FB-DE0-C4-DD46-E79.png") center/cover no-repeat;
  
  /* DESFOQUE + ESCURECIMENTO */
  backdrop-filter: blur(8px);
  position: sticky;
  overflow: hidden;
}

/* CAMADA ESCURA PRA DAR CONTRASTE */
.progress::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: -1;
}

/* ===== TEXTO MAIS BONITO ===== */
#desconto-texto {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #00ff88;
  text-shadow: 0 0 12px #00ff88;
}

/* FRASE DE PROGRESSO */
#faltante-texto {
  font-size: 13px;
  opacity: 0.9;
}

/* ===== BARRA COM ANIMAÇÃO MAIS RICA ===== */
.barra {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
}

.barra-fill {
  height: 100%;
  background: linear-gradient(90deg, #00ff88, #00ffaa, #00ff88);
  background-size: 200% 100%;
  
  box-shadow: 0 0 20px #00ff88;
  
  animation: moveGradient 2s linear infinite, glowPulse 1.5s infinite;
}

/* GRADIENTE SE MOVENDO */
@keyframes moveGradient {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* PULSO */
@keyframes glowPulse {
  0% { box-shadow: 0 0 10px #00ff88; }
  50% { box-shadow: 0 0 25px #00ff88; }
  100% { box-shadow: 0 0 10px #00ff88; }
}
.music-control {
  position: fixed;
  top: 22px; /* abaixo da barrinha */
  right: 10px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  color: #00ff88;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  z-index: 1000;
  box-shadow: 0 0 10px rgba(0,255,136,0.5);
  cursor: pointer;
}

/* animação leve */
.music-control:active {
  transform: scale(0.95);
}
.cta {
  background: #00ff88;
  color: #000;
  padding: 5px 25px;
  border-radius: 12px;
  font-weight: bold;
  text-align: center;
  display: inline-block;
  cursor: pointer;

  /* NEON */
  box-shadow: 
    0 0 10px #00ff88,
    0 0 20px #00ff88,
    0 0 40px rgba(0,255,136,0.7);

  transition: 0.3s;
}

/* EFEITO PULSANDO */
.cta {
  animation: neonPulse 1.5s infinite;
}

@keyframes neonPulse {
  0% {
    box-shadow: 
      0 0 5px #00ff88,
      0 0 10px #00ff88;
  }
  50% {
    box-shadow: 
      0 0 20px #00ff88,
      0 0 40px #00ff88,
      0 0 60px rgba(0,255,136,0.8);
  }
  100% {
    box-shadow: 
      0 0 5px #00ff88,
      0 0 10px #00ff88;
  }
}

/* HOVER (quando passa o dedo/mouse) */
.cta:active {
  transform: scale(0.95);
}
.cta {
  font-family: 'Orbitron', sans-serif;
}
.comprar{
  background: transparent;
  color: #00ff88;
  border: 2px solid #00ff88; /* 🔥 quadrado verde */
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  font-weight: bold;
}
.parcerias-topo {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 999;
}

/* BASE */
.parceria {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  pointer-events: all;
}

/* POSIÇÕES */
.esquerda {
  left: 10px;
}

.direita {
  right: 10px;
}

/* TEXTO */
.parceria span {
  font-family: "Brush Script MT", cursive;
  color: #ffd700;
  font-size: 16px;
  margin-bottom: 6px;
  text-shadow: 0 0 10px rgba(255,215,0,0.9);
}

/* LOGO */
.parceria img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 
    0 0 10px #ffd700,
    0 0 25px rgba(255,215,0,0.8),
    0 0 40px rgba(255,215,0,0.6);
  transition: 0.3s ease;
}

/* HOVER (efeito premium) */
.parceria img:hover {
  transform: scale(1.12);
  box-shadow: 
    0 0 20px #ffd700,
    0 0 40px rgba(255,215,0,1),
    0 0 60px rgba(255,215,0,0.9);
}