/* ==========================
   RESET GENERAL
========================== */

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Arial', sans-serif;
  background:#000;
  color:#fff;
  overflow-x:hidden;
}

/* ==========================
   NAVBAR
========================== */

.navbar{
  position:fixed;
  top:0;
  left:0;

  width:100%;

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

  padding:25px 60px;

  z-index:1000;

  background:rgba(0,0,0,0.25);
  backdrop-filter:blur(12px);

  border-bottom:1px solid rgba(255,255,255,0.08);
}

.logo{
  font-size:24px;
  font-weight:700;

  color:#c77dff;

  letter-spacing:3px;

  text-transform:uppercase;

  text-shadow:
  0 0 10px #9d4edd,
  0 0 20px #9d4edd;
}

.navbar nav{
  display:flex;
  gap:35px;
}

.navbar nav a{
  color:white;

  text-decoration:none;

  font-size:15px;

  transition:.4s;
}

.navbar nav a:hover{

  color:#c77dff;

  text-shadow:
  0 0 10px #9d4edd;

}

/* ==========================
   HERO
========================== */

.hero{
  position:relative;

  width:100%;
  min-height:100vh;

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

  text-align:center;

  overflow:hidden;
}

.video-bg{
  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:100%;

  object-fit:cover;

  z-index:1;
}

.overlay{
  position:absolute;

  width:100%;
  height:100%;

  background:
  linear-gradient(
    to bottom,
    rgba(0,0,0,.55),
    rgba(0,0,0,.85)
  );

  z-index:2;
}

.content{
  position:relative;

  z-index:3;

  max-width:950px;

  padding:30px;
}

/* ==========================
   TITULO PRINCIPAL
========================== */

.title{

  font-size:100px;

  font-weight:900;

  letter-spacing:6px;

  color:#ffffff;

  text-transform:uppercase;

  margin-bottom:25px;

  text-shadow:
  0 0 15px #9d4edd,
  0 0 30px #9d4edd,
  0 0 60px #7b2cbf;

  animation:fadeUp 1.5s ease forwards;
}

.subtitle{

  font-size:24px;

  color:#c77dff;

  margin-bottom:30px;

  letter-spacing:2px;

  animation:fadeUp 1.8s ease forwards;
}

.hero-text{

  max-width:800px;

  margin:auto;

  font-size:20px;

  line-height:1.9;

  color:#e5e5e5;

  margin-bottom:40px;

  animation:fadeUp 2s ease forwards;
}

/* ==========================
   BOTONES
========================== */

.buttons{

  display:flex;

  justify-content:center;

  gap:20px;

  flex-wrap:wrap;
}

.buttons a{

  padding:16px 38px;

  text-decoration:none;

  color:white;

  border-radius:12px;

  background:#7b2cbf;

  transition:.4s;

  font-weight:600;

  box-shadow:
  0 0 15px rgba(157,78,221,.4);
}

.buttons a:hover{

  transform:
  translateY(-5px)
  scale(1.05);

  background:#9d4edd;

  box-shadow:
  0 0 30px rgba(157,78,221,.9);
}

/* ==========================
   ANIMACIONES
========================== */

@keyframes fadeUp{

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

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

}

/* ==========================
   BIOGRAFÍA
========================== */

.bio-section{

  padding:120px 20px;

  background:
  linear-gradient(
    rgba(0,0,0,.75),
    rgba(0,0,0,.85)
  ),
  url("img/bio-bg.jpg");

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  
}

.bio-container{

  max-width:1200px;

  margin:auto;
}

.bio-title{

  text-align:center;

  margin-bottom:60px;
}

.bio-title h2{

  font-size:60px;

  color:#ffffff;

  letter-spacing:4px;

  text-transform:uppercase;

  text-shadow:
  0 0 15px #9d4edd;
}

.bio-box{

  max-width:900px;

  margin:auto;

  background:rgba(255,255,255,0.05);

  backdrop-filter:blur(15px);

  padding:50px;

  border-radius:30px;

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

  box-shadow:
  0 0 30px rgba(157,78,221,.15);
}

.bio-box p{

  font-size:18px;

  line-height:2;

  color:#e5e5e5;
}

/* ==========================
   HIGHLIGHTS
========================== */

.stats-section{

  padding:100px 20px;

  background:
linear-gradient(
  rgba(0,0,0,.70),
  rgba(0,0,0,.80)
),
url("img/stats-bg.jpg");

background-size:cover;
background-position:center;
background-repeat:no-repeat;

  display:flex;

  justify-content:center;

  align-items:center;

  gap:30px;

  flex-wrap:wrap;
}

.stat-card{

  width:300px;

  padding:40px 30px;

  text-align:center;

  border-radius:25px;

  background:rgba(255,255,255,0.04);

  backdrop-filter:blur(12px);

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

  transition:.4s;

  box-shadow:
  0 0 20px rgba(157,78,221,.15);
}

.stat-card:hover{

  transform:
  translateY(-10px);

  box-shadow:
  0 0 35px rgba(157,78,221,.5);

  border:1px solid rgba(199,125,255,.3);
}

.stat-card h3{

  font-size:48px;

  color:#c77dff;

  margin-bottom:15px;

  text-shadow:
  0 0 15px #9d4edd;
}

.stat-card p{

  color:#ddd;

  font-size:18px;

  line-height:1.6;
}

/* ==========================
   ULTIMO SET
========================== */

.section-two{

  position:relative;

  width:100%;

  min-height:100vh;

  display:flex;

  justify-content:center;

  align-items:center;

  overflow:hidden;

  padding:120px 50px;
}

.video-section{

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:100%;

  object-fit:cover;

  z-index:1;
}

.overlay-two{

  position:absolute;

  width:100%;
  height:100%;

  background:
  linear-gradient(
    rgba(0,0,0,.75),
    rgba(0,0,0,.90)
  );

  z-index:2;
}

.second-content{

  position:relative;

  z-index:3;

  width:100%;

  max-width:1400px;

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:50px;

  flex-wrap:wrap;
}

/* ==========================
   YOUTUBE BOX
========================== */

.youtube-box{

  flex:1;

  min-width:350px;

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

  backdrop-filter:blur(15px);

  border-radius:30px;

  padding:30px;

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

  box-shadow:
  0 0 30px rgba(157,78,221,.15);
}

.youtube-box h2{

  text-align:center;

  margin-bottom:25px;

  font-size:38px;

  color:#c77dff;

  letter-spacing:3px;
}

.youtube-preview{

  position:relative;

  display:block;

  overflow:hidden;

  border-radius:25px;
}

.youtube-preview img{

  width:100%;

  display:block;

  transition:.6s;
}

.youtube-preview:hover img{

  transform:scale(1.08);
}

.play-button{

  position:absolute;

  top:50%;
  left:50%;

  transform:
  translate(-50%,-50%);

  width:90px;
  height:90px;

  border-radius:50%;

  display:flex;

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

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

  backdrop-filter:blur(10px);

  font-size:38px;

  color:white;

  transition:.4s;
}

.youtube-preview:hover .play-button{

  background:#ff0000;

  transform:
  translate(-50%,-50%)
  scale(1.15);
}

/* ==========================
   REDES SOCIALES
========================== */

.social-boxes{

  display:flex;

  flex-direction:column;

  gap:25px;
}

.social-card{

  width:320px;

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

  backdrop-filter:blur(15px);

  border-radius:25px;

  padding:25px;

  display:flex;

  align-items:center;

  gap:20px;

  text-decoration:none;

  color:white;

  transition:.4s;

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

  box-shadow:
  0 0 20px rgba(157,78,221,.15);
}

.social-card:hover{

  transform:
  translateY(-8px)
  scale(1.03);

  background:
  rgba(157,78,221,.15);

  box-shadow:
  0 0 35px rgba(157,78,221,.5);
}

.social-card img{

  width:65px;

  height:auto;
}

.social-card span{

  font-size:22px;

  font-weight:600;

  letter-spacing:1px;
}


/* ==========================
   MEDIA KIT
========================== */


.media-kit{

  padding:120px 20px;

  background:
  linear-gradient(
    rgba(0,0,0,.80),
    rgba(0,0,0,.90)
  ),
  url("img/media-bg.jpg");

  background-size:cover;

  background-position:center;

  background-repeat:no-repeat;

  background-attachment:fixed;
}


.media-content{

  max-width:1200px;

  margin:auto;

  text-align:center;
}

.media-content h2{

  font-size:60px;

  margin-bottom:20px;

  color:#ffffff;

  letter-spacing:4px;

  text-transform:uppercase;

  text-shadow:
  0 0 15px #9d4edd;
}

.media-content p{

  font-size:20px;

  color:#dcdcdc;

  margin-bottom:50px;

  line-height:1.8;
}

/* ==========================
   DOWNLOAD CARDS
========================== */

.download-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(280px,1fr));

  gap:30px;
}

.download-card{

  padding:40px;

  border-radius:25px;

  text-decoration:none;

  color:white;

  font-size:22px;

  font-weight:600;

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

  backdrop-filter:blur(15px);

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

  transition:.4s;

  box-shadow:
  0 0 20px rgba(157,78,221,.15);
}

.download-card:hover{

  transform:
  translateY(-10px)
  scale(1.03);

  background:
  rgba(157,78,221,.15);

  box-shadow:
  0 0 40px rgba(157,78,221,.5);
}

/* ==========================
   GALERÍA
========================== */


.gallery-section{

  padding:120px 20px;

  background:
  linear-gradient(
    rgba(0,0,0,.75),
    rgba(0,0,0,.90)
  ),
  url("img/media-bg.jpg");

  background-size:cover;

  background-position:center;

  background-repeat:no-repeat;

  background-attachment:fixed;
}

.gallery-section h2{

  text-align:center;

  font-size:60px;

  margin-bottom:60px;

  letter-spacing:4px;

  text-transform:uppercase;

  color:white;

  text-shadow:
  0 0 15px #9d4edd;
}

.gallery-grid{

  max-width:1400px;

  margin:auto;

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(300px,1fr));

  gap:25px;
}

.gallery-grid img{

  width:100%;

  height:350px;

  object-fit:cover;

  border-radius:25px;

  transition:.6s;

  cursor:pointer;

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

  box-shadow:
  0 0 20px rgba(157,78,221,.15);
}

.gallery-video{

  width:100%;

  height:350px;

  object-fit:cover;

  display:block;

  border-radius:25px;

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

  box-shadow:
  0 0 20px rgba(157,78,221,.15);

  transition:.6s;
}

.gallery-video:hover{

  transform:scale(1.05);

  box-shadow:
  0 0 45px rgba(157,78,221,.7);
}


.gallery-grid img:hover{

  transform:
  scale(1.05);

  box-shadow:
  0 0 45px rgba(157,78,221,.7);
}

/* ==========================
   EFECTO REVISTA
========================== */

.gallery-grid img{

  width:100%;

  height:350px;

  object-fit:cover;

  border-radius:25px;

  transition:.6s;

  cursor:pointer;

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

  box-shadow:
  0 0 20px rgba(157,78,221,.15);
}

/* ==========================
   TECHNICAL RIDER
========================== */

.rider-section{

  padding:120px 20px;

  background:
  linear-gradient(
    rgba(0,0,0,.80),
    rgba(0,0,0,.90)
  ),
  url("img/rider-bg.jpg");

  background-size:cover;

  background-position:center;

  background-repeat:no-repeat;

  background-attachment:fixed;
}


.rider-container{

  max-width:1400px;

  margin:auto;

  display:flex;

  gap:40px;

  justify-content:center;

  align-items:stretch;

  flex-wrap:wrap;
}

.rider-box,
.hospitality-box{

  flex:1;

  min-width:400px;

  padding:60px;

  border-radius:30px;

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

  backdrop-filter:blur(15px);

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

  box-shadow:
  0 0 30px rgba(157,78,221,.15);
}


.rider-box{

  max-width:1000px;

  margin:auto;

  padding:60px;

  border-radius:30px;

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

  backdrop-filter:blur(15px);

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

  box-shadow:
  0 0 30px rgba(157,78,221,.15);
}

.rider-box h2{

  text-align:center;

  font-size:55px;

  margin-bottom:40px;

  color:white;

  letter-spacing:4px;

  text-shadow:
  0 0 15px #9d4edd;
}

.rider-box ul{

  list-style:none;
}

.rider-box li{

  padding:18px 0;

  font-size:20px;

  border-bottom:
  1px solid rgba(255,255,255,.08);

  color:#e5e5e5;
}

.rider-box li:last-child{

  border:none;
}

/* ==========================
   HOSPITALITY RIDER
========================== */


.hospitality-box{

  max-width:1000px;

  margin:auto;

  padding:60px;

  border-radius:30px;

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

  backdrop-filter:blur(15px);

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

  box-shadow:
  0 0 30px rgba(157,78,221,.15);
}

.hospitality-box h2{

  text-align:center;

  font-size:55px;

  margin-bottom:40px;

  color:white;

  letter-spacing:4px;

  text-shadow:
  0 0 15px #9d4edd;
}

.hospitality-box ul{

  list-style:none;
}

.hospitality-box li{

  padding:18px 0;

  font-size:20px;

  border-bottom:
  1px solid rgba(255,255,255,.08);

  color:#e5e5e5;
}

.hospitality-box li:last-child{

  border:none;
}

/* ==========================
   CONTACTO
========================== */

.contact-section{

  padding:140px 20px;

  background:
  linear-gradient(
    to bottom,
    #050505,
    #000
  );
}

.contact-box{

  max-width:900px;

  margin:auto;

  text-align:center;

  padding:70px 50px;

  border-radius:35px;

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

  backdrop-filter:blur(18px);

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

  box-shadow:
  0 0 40px rgba(157,78,221,.2);
}

.contact-box h2{

  font-size:60px;

  margin-bottom:25px;

  letter-spacing:4px;

  text-transform:uppercase;

  color:white;

  text-shadow:
  0 0 15px #9d4edd;
}

.contact-box h3{

  margin-top:30px;

  font-size:30px;

  color:#c77dff;
}

.contact-box p{

  font-size:18px;

  line-height:1.8;

  color:#ddd;

  margin-bottom:20px;
}

/* BOTONES CONTACTO */

.contact-buttons{

  display:flex;

  justify-content:center;

  flex-wrap:wrap;

  gap:20px;

  margin-top:40px;
}

.contact-buttons a{

  padding:18px 40px;

  border-radius:14px;

  text-decoration:none;

  color:white;

  font-weight:600;

  background:#7b2cbf;

  transition:.4s;

  box-shadow:
  0 0 20px rgba(157,78,221,.3);
}

.contact-buttons a:hover{

  transform:
  translateY(-6px)
  scale(1.05);

  background:#9d4edd;

  box-shadow:
  0 0 40px rgba(157,78,221,.8);
}

/* ==========================
   FOOTER
========================== */

.footer{

  padding:40px 20px;

  text-align:center;

  background:#000;

  border-top:
  1px solid rgba(255,255,255,.08);
}

.footer p{

  color:#999;

  font-size:15px;

  letter-spacing:2px;
}

/* ==========================
   EFECTOS GLOBALES
========================== */

.bio-box,
.stat-card,
.youtube-box,
.social-card,
.download-card,
.rider-box,
.hospitality-box,
.contact-box{

  transition:
  transform .5s ease,
  opacity .8s ease,
  box-shadow .5s ease;
}

/* EFECTO BRILLO */

.bio-box:hover,
.youtube-box:hover,
.rider-box:hover,
.hospitality-box:hover,
.contact-box:hover{

  box-shadow:
  0 0 50px rgba(157,78,221,.35);
}

/* ==========================
   SCROLL REVEAL
========================== */

.reveal{

  opacity:0;

  transform:
  translateY(60px);

  transition:
  opacity .8s ease,
  transform .8s ease;
}

.reveal.active{

  opacity:1;

  transform:
  translateY(0);
}

/* ==========================
   SCROLLBAR PERSONALIZADA
========================== */

::-webkit-scrollbar{

  width:10px;
}

::-webkit-scrollbar-track{

  background:#050505;
}

::-webkit-scrollbar-thumb{

  background:#7b2cbf;

  border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{

  background:#9d4edd;
}

/* ==========================
   RESPONSIVE TABLET
========================== */

@media(max-width:1024px){

  .navbar{

    padding:20px 30px;
  }

  .title{

    font-size:75px;
  }

  .bio-title h2,
  .gallery-section h2,
  .media-content h2,
  .rider-box h2,
  .hospitality-box h2,
  .contact-box h2{

    font-size:45px;
  }

  .second-content{

    flex-direction:column;
  }

  .social-boxes{

    width:100%;
  }

  .social-card{

    width:100%;
  }

}

/* ==========================
   RESPONSIVE MOVIL
========================== */

@media(max-width:768px){

  .navbar{

    flex-direction:column;

    gap:15px;

    padding:20px;
  }

  .navbar nav{

    flex-wrap:wrap;

    justify-content:center;

    gap:15px;
  }

  .logo{

    font-size:20px;
  }

  .title{

    font-size:50px;

    letter-spacing:2px;
  }

  .subtitle{

    font-size:18px;
  }

  .hero-text{

    font-size:16px;

    line-height:1.8;
  }

  .bio-box{

    padding:35px 25px;
  }

  .bio-box p{

    font-size:16px;
  }

  .stat-card{

    width:100%;
  }

  .youtube-box{

    min-width:100%;
  }

  .youtube-box h2{

    font-size:28px;
  }

  .play-button{

    width:70px;
    height:70px;

    font-size:30px;
  }

  .gallery-grid{

    grid-template-columns:1fr;
  }

  .gallery-grid img{

    height:280px;
  }

  .gallery-grid img:nth-child(1),
  .gallery-grid img:nth-child(4){

    height:280px;
  }

  .download-card{

    font-size:18px;
  }

  .rider-box,
  .hospitality-box,
  .contact-box{

    padding:35px 25px;
  }

  .rider-box h2,
  .hospitality-box h2,
  .contact-box h2{

    font-size:35px;
  }

  .rider-box li,
  .hospitality-box li{

    font-size:16px;
  }

  .contact-buttons{

    flex-direction:column;
  }

  .contact-buttons a{

    width:100%;
  }

}

/* ==========================
   RESPONSIVE PEQUEÑO
========================== */

@media(max-width:480px){

  .title{

    font-size:38px;
  }

  .subtitle{

    font-size:15px;
  }

  .bio-title h2,
  .gallery-section h2,
  .media-content h2{

    font-size:32px;
  }

  .contact-box h2{

    font-size:30px;
  }

  .stat-card h3{

    font-size:38px;
  }

  .stat-card p{

    font-size:15px;
  }

}

/* ==========================
   EFECTO FONDO NEON
========================== */

body::before{

  content:"";

  position:fixed;

  top:-50%;

  left:-50%;

  width:200%;

  height:200%;

  background:
  radial-gradient(
    circle,
    rgba(123,44,191,.06) 0%,
    transparent 70%
  );

  pointer-events:none;

  z-index:-1;
}

/* ==========================
   SELECCIÓN DE TEXTO
========================== */

::selection{

  background:#9d4edd;

  color:white;
}

/* ==========================
   LIGHTBOX
========================== */

.lightbox{

  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:100%;

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

  display:none;

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

  z-index:9999;
}

.lightbox.active{

  display:flex;
}

.lightbox img,
.lightbox video{

  max-width:90%;
  max-height:85vh;

  border-radius:20px;

  box-shadow:
  0 0 40px rgba(157,78,221,.7);
}

.close-lightbox{

  position:absolute;

  top:20px;
  right:35px;

  font-size:50px;

  color:white;

  cursor:pointer;

  z-index:10000;
}

.contact-buttons a:last-child{

  background:#25D366;
}

.contact-buttons a:last-child:hover{

  background:#1ebe5d;

  box-shadow:
  0 0 40px rgba(37,211,102,.8);
}