*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
background:#050505;
color:#fff;
font-family:'Montserrat',sans-serif;
overflow-x:hidden;

padding-top:36px;
}

img{
max-width:100%;
display:block;
}

/* HERO */

.hero{
padding:30px 20px 60px;
text-align:center;
}

.logo{
width:130px;
margin:0 auto 20px;
}

.badge{
display:inline-block;
padding:10px 18px;
border:1px solid #ff5a00;
border-radius:999px;
color:#ff5a00;
font-weight:700;
font-size:14px;
margin-bottom:25px;
}

.hero-title{
  font-family:'Oswald',sans-serif;
  font-size:36px;
  line-height:1;
  margin-bottom:25px;
  position:relative;
}


.hero-title span{
  display:block;
  color:#ff5a00;
}

.hero-bike{
width:92%;
max-width:550px;

margin:10px auto 15px;

filter:
drop-shadow(
0 0 35px rgba(255,90,0,.25)
);
}

.countdown{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:8px;

max-width:420px;

margin:8px auto;

padding:0;

background:none;

border:none;

}

.time-box{

background:#0d0d0d;

border:1px solid #1d1d1d;

border-radius:12px;

padding:10px 6px;

}


.time-box span{

display:block;

font-size:20px;

font-weight:900;

color:#ff5a00;

line-height:1;

}

.time-box small{

display:block;

margin-top:4px;

font-size:10px;

letter-spacing:1px;

color:#bdbdbd;

}

.draw-date{
  color:#ccc;
  font-size:14px;

  margin-top:8px;
  margin-bottom:15px;
}



.participar-btn,
.gallery-cta{

background:linear-gradient(
  90deg,
  #ffd700,
  #ffb300
);

color:#111;

box-shadow:
  0 0 20px rgba(255,215,0,.25),
  0 0 40px rgba(255,215,0,.10);

}

.consultar-btn{
background:#2563eb;
}
/* TRUST */

.trust{

padding:30px 20px;

border:1px solid rgba(255,255,255,.12);

border-radius:24px;

max-width:700px;

margin:40px auto;

background:rgba(255,255,255,.02);

}

.trust h2{
font-size:28px;
line-height:1.15;
max-width:320px;
margin:0 auto 15px;
}

.trust p{
max-width:500px;
margin:auto;
text-align:center;
line-height:1.5;
color:#ccc;
font-size:15px;
}


/* CHANCES */

.chances{
padding:60px 20px;
}

.chances h2{
font-family:'Oswald',sans-serif;
font-size:42px;
text-align:center;
margin-bottom:30px;
}

.chance-card{
background:#101010;
border:1px solid #1e1e1e;
border-radius:18px;
padding:22px;
margin-bottom:14px;

display:flex;
justify-content:space-between;
align-items:center;

cursor:pointer;
transition:.25s;
}

.chance-card:hover{
border-color:#ff5a00;
transform:translateY(-2px);
}

.chance-card h3{
font-size:18px;
}

.chance-card strong{
font-size:24px;
color:#ff5a00;
}

.featured{
  border:2px solid #ff5a00;
  box-shadow:
    0 0 20px rgba(255,90,0,.35),
    0 0 40px rgba(255,90,0,.15);

  transform: scale(1.02);
}

.featured small{
display:block;
margin-top:5px;
color:#ff5a00;
font-weight:700;
}

/* DESKTOP */

@media(min-width:992px){

.hero{
max-width:1200px;
margin:auto;
padding-top:50px;
}

.hero-title{
font-size:54px;
}

.logo{
width:240px;
}


.hero-bike{
max-width:800px;
}

.countdown{
max-width:700px;
}

.time-box span{
font-size:48px;
}

.chances{
max-width:900px;
margin:auto;
}

}




/* GALLERY */

.gallery{
  padding:30px 20px 50px;
}

.gallery h2{
  color:#fff;
  font-size:38px;
  font-weight:900;
  text-align:center;
  letter-spacing:1px;
  margin-bottom:15px;
}

.gallery h2::after{
  content:"";
  display:block;
  width:80px;
  height:3px;
  background:#ff5a00;
  margin:12px auto 0;
  border-radius:10px;
}

/* MODAL */

.modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.85);

display:flex;
align-items:center;
justify-content:center;

padding:20px;

opacity:0;
visibility:hidden;

transition:.3s;

z-index:99999;
}

.modal.show{
opacity:1;
visibility:visible;
}

.modal-content{
  width:100%;
  max-width:520px;

  max-height:90vh;
  overflow-y:auto;

  background:#101010;
  border:1px solid #252525;
  border-radius:24px;

  padding:30px;
  position:relative;
}

.close-modal{
position:absolute;
top:15px;
right:15px;

width:40px;
height:40px;

border:none;
background:#1a1a1a;

border-radius:50%;
color:white;

font-size:24px;
cursor:pointer;
}

.modal-content h2{
font-family:'Oswald',sans-serif;
margin-bottom:20px;
text-align:center;
}

.bank-info{
background:#0b0b0b;
border:1px solid #202020;
padding:18px;
border-radius:14px;
margin-bottom:20px;
}

.bank-info p{
word-break:break-word;
}

.purchase-form{
display:flex;
flex-direction:column;
gap:12px;
}

.purchase-form input{
width:100%;
padding:15px;
background:#0b0b0b;
border:1px solid #222;
border-radius:12px;
color:white;
font-size:15px;
}

.upload-label{
font-size:14px;
color:#bbb;
margin-top:5px;
}

.purchase-form button{
background:#ff5a00;
color:white;
border:none;
padding:16px;
border-radius:14px;
font-weight:800;
cursor:pointer;
font-size:15px;
}
.selected-pack{
background:#0b0b0b;
border:1px solid #202020;
border-radius:14px;
padding:15px;
margin-bottom:20px;
text-align:center;
}

.selected-pack p{
font-size:12px;
color:#999;
letter-spacing:1px;
margin-bottom:5px;
}

.selected-pack h3{
color:#ff5a00;
font-size:24px;
font-weight:800;
}
.copy-btn{
width:100%;
margin-top:10px;

background:#1a1a1a;
color:#fff;

border:1px solid #2a2a2a;

padding:12px;
border-radius:10px;

font-weight:700;
cursor:pointer;

transition:.2s;
}

.copy-btn:hover{
border-color:#ff5a00;
color:#ff5a00;
}

.wp-float{
    position: fixed;
    right: 20px;
    bottom: 20px;

    width: 68px;
    height: 68px;

    border-radius: 50%;
    background: #25D366;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none; /* importante */
    overflow: hidden;      /* importante */

    z-index: 999999;
}

.wp-float i{
    color: #fff;
    font-size: 34px;
    line-height: 1;
}
body.modal-open{
  overflow: hidden;
}
/* ==================================
   MODAL COMPROBANTE ENVIADO
================================== */

.success-modal{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;

  display:none;

  justify-content:center;
  align-items:center;

  padding:20px;

  background:rgba(0,0,0,.85);

  z-index:99999999;
}

.success-modal.show{
  display:flex;
}

.success-box{
  width:100%;
  max-width:420px;

  background:#0f0f0f;

  border:2px solid #22c55e;
  border-radius:24px;

  padding:30px 25px;

  text-align:center;

  box-shadow:
    0 0 30px rgba(34,197,94,.20);

  animation:modalSuccess .25s ease;
}

.success-box h2{
  font-family:'Oswald',sans-serif;
  font-size:32px;
  color:#22c55e;

  margin-bottom:18px;
}

.success-box p{
  color:#d7d7d7;
  font-size:16px;
  line-height:1.6;

  margin-bottom:12px;
}

.success-box strong{
  display:block;
  margin-top:10px;

  color:#fff;
  font-size:18px;
}

.success-box button{
  width:100%;

  margin-top:20px;

  background:#22c55e;
  color:white;

  border:none;
  border-radius:14px;

  padding:16px;

  font-size:16px;
  font-weight:800;

  cursor:pointer;

  transition:.2s;
}

.success-box button:active{
  transform:scale(.98);
}

@keyframes modalSuccess{

  from{
    opacity:0;
    transform:translateY(15px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}
#comprobante{
  width:100%;
  padding:18px;
  background:#0b0b0b;
  border:2px solid #22c55e;
  border-radius:14px;
  color:white;
  font-size:16px;
}

#comprobante::file-selector-button{
  background:#22c55e;
  color:white;
  border:none;
  padding:12px 18px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  margin-right:12px;
}
.upload-btn{
  display:block;
  width:100%;
  padding:18px;
  background:#22c55e;
  color:#fff;
  text-align:center;
  border-radius:14px;
  font-weight:800;
  font-size:16px;
  cursor:pointer;
  margin-bottom:12px;
  transition:.2s;
}

.upload-btn:hover{
  transform:translateY(-1px);
  background:#16a34a;
}

.cta-btn{
  display:block;
  width:90%;
  max-width:450px;
  margin:15px auto;
  text-align:center;
  text-decoration:none;
  padding:18px;
  border-radius:16px;
  font-weight:800;
  font-size:18px;
}

.hero .cta-btn:last-of-type{
  background:#2563eb;
  color:white;
}
.consulta-container{
  max-width:500px;
  margin:120px auto;
  padding:30px;
}

.consulta-container h1{
  text-align:center;
  font-family:'Oswald',sans-serif;
  font-size:48px;
  margin-bottom:25px;
}

#dni{
  width:100%;
  padding:18px;
  background:#101010;
  border:1px solid #333;
  border-radius:14px;
  color:white;
  font-size:18px;
  margin-bottom:15px;
}

#btnConsultar{
  width:100%;
  padding:18px;
  background:#ff5a00;
  color:white;
  border:none;
  border-radius:14px;
  font-size:18px;
  font-weight:800;
  cursor:pointer;
  transition:.2s;
}

#btnConsultar:hover{
  transform:translateY(-2px);
  opacity:.95;
}



.progress-title{
  text-align:center;
  font-weight:700;
  margin-bottom:12px;
  color:#fff;
}

.progress-bar{
  width:100%;
  height:28px;
  background:#222;
  border-radius:999px;
  overflow:hidden;
}

.progress-fill{
  width:0%;
  height:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  font-weight:800;
  color:#fff;

  background:linear-gradient(
    90deg,
    #facc15,
    #f59e0b
  );

  border-radius:999px;

  box-shadow:
    0 0 20px rgba(250,204,21,.45);

  transition:width .4s ease;
}


.progress-note{

display:flex;
flex-direction:column;

justify-content:center;
align-items:center;

gap:4px;

padding:14px;

margin:12px auto 10px;

background:#0c0c0c;

border:1px solid #2a2a2a;

border-radius:14px;

font-family:'Oswald',sans-serif;

font-size:15px;

font-weight:700;

color:white;

text-transform:uppercase;

}

.progress-note small{

font-family:'Montserrat',sans-serif;

font-size:11px;

font-weight:600;

color:#bdbdbd;

text-transform:none;

letter-spacing:.5px;

}

.progress-row{

display:flex;

align-items:center;

gap:8px;

margin-top:8px;

}

.progress-star{

font-size:22px;

}


.progress-section{
  max-width:700px;
  margin:25px auto 15px;
  padding:0 20px;
}
.instagram-card{

  display:flex;
  align-items:center;
  gap:8px;

  max-width:220px;

  padding:8px 10px;

  margin:20px auto 0;

  text-decoration:none;
  color:white;

  border-radius:16px;

  background:linear-gradient(
    45deg,
    #405DE6,
    #5851DB,
    #833AB4,
    #C13584,
    #E1306C,
    #FD1D1D,
    #F77737,
    #FCAF45
  );

  box-shadow:
    0 6px 15px rgba(193,53,132,.25);

  transition:.25s;

}

.instagram-card:hover{
  transform:translateY(-2px);
}

.instagram-icon{
  width:30px;
  height:30px;

  border-radius:16px;

  background:rgba(255,255,255,.15);

  display:flex;
  align-items:center;
  justify-content:center;
}

.instagram-icon i{
  font-size:16px;
}

.instagram-info{
  text-align:left;
}

.instagram-info span{
  display:block;
  font-size:9px;
  opacity:.9;
}

.instagram-info strong{
  font-size:13px;
}

.gallery-grid{
  display:grid;
  gap:12px;
}

.gallery-img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:18px;
  cursor:pointer;
  border:1px solid #1f1f1f;
}

.gallery-cta{

margin-top:25px;

background:linear-gradient(
  90deg,
  #ffd700,
  #ffb300
) !important;

color:#111 !important;

}
.image-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.95);

  display:none;
  align-items:center;
  justify-content:center;

  padding:20px;

  z-index:999999;
}

.image-modal.show{
  display:flex;
}

.image-modal img{
  max-width:100%;
  max-height:90vh;
  border-radius:18px;
}

.close-image{
  position:absolute;
  top:20px;
  right:20px;

  width:50px;
  height:50px;

  border:none;
  border-radius:50%;

  background:#111;
  color:white;

  font-size:24px;
  cursor:pointer;
}

.gallery-grid:has(.gallery-img:nth-child(4):last-child){
  grid-template-columns:repeat(2,1fr);
}

@media(min-width:1px){

.gallery-grid{
  grid-template-columns:repeat(3,1fr);
}

.gallery-grid:has(.gallery-img:nth-child(4):last-child){
  grid-template-columns:repeat(2,1fr);
}

}

@media(min-width:992px){

.gallery-grid{
  grid-template-columns:repeat(4,1fr);
}

}.gallery-arrow{
  position:fixed;

  top:50%;
  transform:translateY(-50%);

  width:42px;
  height:42px;

  background:rgba(0,0,0,.55);
  color:white;

  border:none;
  border-radius:50%;

  font-size:20px;
  font-weight:800;

  z-index:999999999;

  cursor:pointer;
}

.gallery-arrow.left{
  left:10px;
}

.gallery-arrow.right{
  right:10px;
}

@media(min-width:992px){

  .gallery-arrow{
    width:50px;
    height:50px;
    font-size:24px;
  }

}

.close-image{
  z-index:999999999;
}

#progressText{
  width:100%;
  text-align:center;
  white-space:nowrap;
}
.gallery-counter{
  position:absolute;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  color:white;
  font-weight:700;
  font-size:18px;
  background:rgba(0,0,0,.5);
  padding:6px 12px;
  border-radius:999px;
}
/* =========================
   RANKING EN VIVO
========================= */

.ranking-live{
  padding:30px 20px 50px;
  text-align:center;
}

.ranking-badge{

  display:inline-block;

  background:linear-gradient(
    90deg,
    #ffd700,
    #ffb300
  );

  color:#111;

  font-weight:900;

  padding:14px 28px;

  border-radius:999px;

  margin-bottom:25px;

  letter-spacing:1px;

}

.ranking-live h2{
  font-size:22px;
  font-weight:900;
  line-height:1.15;
  margin-bottom:20px;
}

.ranking-live h2 span{

  color:#ffd700;

}

.ranking-subtitle{
  color:#bdbdbd;
  font-size:15px;

  max-width:700px;

  margin:0 auto 40px;

}

.ranking-card{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  background:#111;

  border:1px solid #2b2b2b;

  border-radius:24px;

  padding:12px 14px;

  margin-bottom:12px;

}

.ranking-card.first{

  position:relative;

 border:1px solid #d4af37;

  background:
    linear-gradient(
      90deg,
      rgba(255,215,0,.18),
      rgba(255,180,0,.05)
    );

}

.ranking-left{

  display:flex;
  align-items:center;
  gap:12px;

}

.ranking-position{

  width: 38px;
  height:38px;

  border-radius:50%;

  display:flex;

  align-items:center;
  justify-content:center;

  font-size:20px;
  font-weight:900;

  border:3px solid #d4af37;

  color:#ffd700;

}

.ranking-name{

  font-size:16px;
  font-weight:800;

  text-align:left;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

}

.ranking-chances{

  color:#ffd700;

  font-size:18px;

  font-weight:900;

}

.ranking-footer{

  margin-top:18px;

  color:#8a8a8a;

  font-size:14px;

  letter-spacing:.3px;

}

@media(max-width:768px){

  .ranking-card{
    padding:10px 12px;
  }

  .ranking-position{
    width:32px;
    height:32px;
    font-size:16px;
  }

  .ranking-name{
    font-size:14px;
  }

  .ranking-chances{
    font-size:15px;
  }

}


.ranking-card.first .ranking-position{

  border:3px solid #ffd700;

  color:#ffd700;

  box-shadow:
    0 0 20px rgba(255,215,0,.45);

}
.top-ticker{

  position:fixed;
  top:0;
  left:0;

  width:100%;

  overflow:hidden;

  background:#0d0d0d;

  border-bottom:1px solid #202020;

  padding:8px 0;

  z-index:99999;

}

.ticker-track{

  display:flex;

  width:max-content;

  animation:ticker 25s linear infinite;

}

.ticker-track span{

  white-space:nowrap;

  padding-right:80px;

  color:#ff5a00;

  font-size:13px;

  font-weight:800;

}

@keyframes ticker{

  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }

}
.chances-click{

  text-align:center;

  color:#bdbdbd;

  font-size:14px;

  font-weight:600;

  margin-top:-15px;
  margin-bottom:25px;

}
.trust-image-section{
  padding: 20px;
}

.trust-image{
  width:100%;
  max-width:420px;
  display:block;
  margin:0 auto;
  border-radius:18px;
}

.prize-info{
  padding:20px;
}

.prize-info-img{
  width:100%;
  max-width:420px;
  display:block;
  margin:0 auto;
  border-radius:18px;
}