body{
  background: linear-gradient(135deg, #000000, #020617, #000000);
  color:#fff;
  font-family:Arial;
  position:relative;
  overflow-x:hidden;
}

/* LUZ CENTRAL (amarilla) */
body::before{
  content:"";
  position:fixed;
  width:600px;
  height:600px;
   background: radial-gradient(circle, rgba(255,193,7,0.6), transparent);
  top:-150px;
  left:50%;
  transform:translateX(-50%);
  filter:blur(120px);
  z-index:0;
}

/* LUZ DERECHA (roja tipo Netflix) */
body::after{
  content:"";
  position:fixed;
  width:500px;
  height:500px;
  background: radial-gradient(circle, rgba(255,0,0,0.4), transparent);
  bottom:-100px;
  right:-100px;
  filter:blur(120px);
  z-index:0;
}

.hero,
.section-banner,
.container,
.cart{
  position:relative;
  z-index:2;
}

.hero{
  background: linear-gradient(
    to bottom,
    #000 0%,
    rgba(10,10,20,0.95) 40%,
    rgba(0,0,0,0.8) 70%,
    transparent 100%
  );
  padding: 100px 20px 80px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero *{
  position:relative;
  z-index:2;
}
.hero::before{
  content:"";
  position:absolute;
  width:600px;
  height:600px;
  background: radial-gradient(circle, rgba(255,193,7,0.15), transparent 70%);
  top:-200px;
  left:50%;
  transform:translateX(-50%);
  filter:blur(120px);
  z-index:0;
}

.hero h1{color:#ffc107;font-size:clamp(2rem,5vw,4rem)}
.badge-promo{background:red;padding:5px 10px;border-radius:10px;font-size:12px}

.section-banner{padding:30px 15px;transition:.3s}
.section-banner:hover{transform:scale(1.02)}

/* TITULO PRO */
.hero-title{
  font-family:'Poppins', sans-serif;
  font-size: clamp(3rem,7vw,5rem);
  font-weight:900;
  background: linear-gradient(90deg, #ffc107, #ffdb4d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing:3px;
}

/* CONTENEDOR */
.logo-box{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  animation: fadeInUp 1s ease;
}

/* LOGO */
.logo-img{
  width: clamp(70px, 8vw, 100px);
  filter: drop-shadow(0 0 10px rgba(255,193,7,0.4));
  animation: logoPop 0.8s ease;
}

/* TEXTO PRO */
.hero-title{
  font-size: clamp(2.5rem,6vw,4rem);
  font-weight:900;
  background: linear-gradient(90deg, #ffc107, #ffdb4d, #ffc107);
  background-size:200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s linear infinite;
}

/* ENTRADA */
@keyframes fadeInUp{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* LOGO POP */
@keyframes logoPop{
  0%{
    transform:scale(0.5) rotate(-10deg);
    opacity:0;
  }
  100%{
    transform:scale(1) rotate(0);
    opacity:1;
  }
}

/* BRILLO TEXTO */
@keyframes shine{
  0%{ background-position: 0% center; }
  100%{ background-position: 200% center; }
}

.title{font-size:clamp(1.5rem,4vw,2.5rem);font-weight:bold}
.netflix{background:linear-gradient(90deg,#000,#8b0000)}
.disney{background:linear-gradient(90deg,#000,#0a7c7c)}
.max{background:linear-gradient(90deg,#000,#001f5c)}
.iptv{background:linear-gradient(90deg,#000,#5c007a)}

.price-box{background:#111;border:2px solid #ffc107;padding:15px;border-radius:10px;margin-bottom:10px;text-align:center}
.price{font-size:1.5rem;color:#ffc107;font-weight:bold}

.btn-buy{background:#ffc107;border:none;padding:10px;border-radius:30px;width:100%;font-weight:bold}
.btn-buy:hover{background:#ffdb4d}

.features{background:#111;padding:15px;border-radius:10px;font-size:14px}

.cart{position:fixed;right:0;top:0;width:320px;height:100%;background:#111;padding:20px;overflow:auto;z-index:999}


@media(max-width:768px){.cart{width:100%;bottom:0;top:auto;height:auto}}

.whatsapp{position:fixed;bottom:20px;right:20px;background:#25D366;padding:15px;border-radius:50%;z-index:1000}

.counter{color:#ff4444;font-weight:bold}

.testimonials{background:#111;padding:20px;border-radius:15px;margin-top:40px}