body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Teko', sans-serif;
  color: #fff;
  overflow-x: hidden;
}

.landing {
  background: url('assets/asset3.png') center center / cover no-repeat fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.landing img {
 width:85%;
max-width: 400px;
}

.logo {
 width:100%;
 max-width: 200px!important;
 padding-top: 20px;
}

.title {
  font-size: 3rem;
  text-shadow: 0 4px 10px rgba(0,0,0,0.6);
}

.spin-btn {
 
}
.spin-btn:hover {
  transform: scale(1.05);
}

.prize-img {
 width:100%;
 max-width: 300px!important;
}

.recharge {
 align-items: center;
 justify-content: center;
}

.recharge-img {
 width:100%;
 max-width: 200px!important;
}

.buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    display: flex;
    gap: 1px 2px;
    row-gap: 2px;
    column-gap: 2px;
    margin: 20px;
    max-width: 550px;
}

.buttons button {
  font-family: teko;
  color: #fff;
  padding: 0.6rem 1.2rem;
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.buttons button:hover {
  background: rgba(255,255,255,0.25);
}

/* Popups */
.overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}
.overlay.active {
  opacity: 1;
  visibility: visible;
}

.popup {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background: rgb(157 43 103 / 92%);
  padding: 1rem;
  border-radius: 15px;
  max-width: 90%;
  width: 400px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  max-height:440px;
  overflow-y: scroll;
}
.popup.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}
.popup .close {
  position: absolute;
  top: 10px; right: 15px;
  font-size: 1.5rem;
  cursor: pointer;
}
.popup-inner {
  text-align: center;
}

.carousel {
  margin-top: 1rem;
}
.slides .slide {
  display: none;
}
.slides .slide.active {
  display: block;
}
.dots {
  margin-top: 1rem;
}
.dot {
  height: 10px; width: 10px;
  background: #fff;
  border-radius: 50%;
  display: inline-block;
  margin: 0 4px;
  opacity: 0.5;
  cursor: pointer;
}
.dot.active {
  opacity: 1;
}

.animate-entry {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeSlide 1s forwards ease;
}
@keyframes fadeSlide {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.subscribe-btn {
  margin-top: 1rem;
  padding: 0.8rem 1.6rem;
  font-size: 1.5rem;
  background: linear-gradient(180deg, #7ed957, #3cb371);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.subscribe-btn:hover {
  transform: scale(1.05);
}

.howto {
  background: #a38d00!important;
background: linear-gradient(0deg,rgba(163, 141, 0, 1) 0%, rgba(237, 221, 83, 1) 63%)!important;
border:solid 2px #a38d00 !important;
}

.prizes {
background: #2A7B9B;
background: linear-gradient(356deg,rgba(42, 123, 155, 1) 0%, rgba(109, 248, 252, 1) 100%);
border:solid 2px #2A7B9B!important;
}

.subscribe {
background: #bf0490;
background: linear-gradient(180deg,rgba(191, 4, 144, 1) 0%, rgba(122, 0, 67, 1) 100%);
border:solid 2px #bf0490!important;
}

.terms {
background: #ED4444;
background: linear-gradient(180deg,rgba(237, 68, 68, 1) 0%, rgba(138, 0, 0, 1) 100%);
border:solid 2px #ED4444 !important;
}

/* Responsive */
@media (min-width: 768px) {
  .title { font-size: 4rem; }
  .spin-btn { font-size: 2.5rem; }
}


.boton-pull {
    position: relative;
    background: linear-gradient(to bottom, #2de0c1 0%, #00a28b 100%);
    color:white;
    font-family:teko;
    border: none;
    border-radius: 50px;
    padding: 25px 100px;
    box-shadow: 0 6px 0 #00806e;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
     margin-top: -50px;
  font-size: 2rem;
  transition: transform 0.3s ease;
  margin-bottom:20px;
  }

  /* Capa brillante superior */
  .boton-pull::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(255,255,255,0));
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
  }

  .boton-pull:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 #00806e;
  }

  .boton-pull:active {
    transform: translateY(3px);
    box-shadow: 0 3px 0 #007364;
  }



  .boton-back-home {
    position: relative;
    background: linear-gradient(to bottom, #770050 0%, #b5005a 100%);
    color:white;
    font-family:teko;
    border: none;
    border-radius: 50px;
    padding: 10px 30px;
    box-shadow: 0 6px 0 #ff44ca;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
  font-size: 2rem;
  transition: transform 0.3s ease;
  margin-bottom:20px;
  }

  /* Capa brillante superior */
  .boton-back-home::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(255,255,255,0));
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
  }

  .boton-back-home:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 #920169;
  }

  .boton-back-home:active {
    transform: translateY(3px);
    box-shadow: 0 3px 0 #5c0042;
  }



 .boton-subscribe {
    position: relative;
    background: linear-gradient(to bottom, #10f048 0%, #03890c 100%);
    color:white;
    font-family:teko;
    border: none;
    border-radius: 50px;
    padding: 10px 30px;
    box-shadow: 0 6px 0 #5bfab8;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
  font-size: 2rem;
  transition: transform 0.3s ease;
  margin-bottom:20px;
  }

  /* Capa brillante superior */
  .boton-subscribe::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(255,255,255,0));
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
  }

  .boton-subscribe:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 #09af1f;
  }

  .boton-subscribe:active {
    transform: translateY(3px);
    box-shadow: 0 3px 0 #11b81f;
  }





  .carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border-radius: 16px;
}

.carousel-track {
  display: flex;
  transition: transform 0.4s ease-in-out;
  touch-action: pan-y;
}

.slide {
  min-width: 100%;
  box-sizing: border-box;
  text-align: center;
  background: #00000000;
}

.slide img {
  width: 100%;
  display: block;
}

.caption {
  padding: 1rem;
  font-size: 1rem;
  color: #ffffff;
}

.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgb(255 255 255 / 40%);
border: none;
color: white;
font-size: 1rem;
cursor: pointer;
padding: 10px 15px;
border-radius: 50%;
z-index: 2;
transition: background-color 0.3s;
}

.carousel-btn:hover {
  background-color: rgba(0,0,0,0.6);
}

.carousel-btn.prev { left: 0px; }
.carousel-btn.next { right: 0px; }

@media (max-width: 768px) {
  .caption {
    font-size: 0.9rem;
  }

  .buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    display: flex;
    gap: 1px 2px;
    row-gap: 2px;
    column-gap: 2px;
    margin: 10px;
}
}

footer {
  padding: 50px;
}



.container{
      width:100%;
      max-width:var(--maxw);
      box-shadow:0 6px 18px rgba(0,0,0,0.06);
      border-radius:10px;
      padding:20px 22px;
    }
    header h1{
      margin:0 0 6px 0;
      font-size:22px;
    }
    header p{ margin:0 0 18px 0; color:var(--muted); font-size:14px;}
    h2{font-size:16px; margin-top:20px;}
    p{margin:10px 0;}
    ol,ul{margin:8px 0 16px 24px;}
    table{
      width:100%;
      border-collapse:collapse;
      margin:12px 0 18px 0;
      font-size:14px;
    }
    table thead th{
      text-align:left;
      padding:8px;
      background:#000000;
      border-bottom:1px solid #e6e9ef;
    }
    table td{padding:10px; border-bottom:1px solid #f0f0f0; vertical-align:top;}
    .note{font-size:13px; color:var(--muted);}
    .small{font-size:13px; color:var(--muted); margin-top:6px;}
    .contact{margin-top:18px; padding:12px; background:#fbfdff; border-left:4px solid var(--accent); border-radius:6px;}
    .muted-block{background:#000000;padding:12px;border-radius:6px;color:var(--muted);font-size:13px;}
    @media(min-width:820px){
      header h1{font-size:26px;}
    }