.premium-tiers{display: flex; gap: 0px; justify-content: center; flex-wrap: wrap; margin-top: 32px;}
.premium-card{background: #232323; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.10); padding: 10px 0px 10px 0px; min-width: 300px; max-width: 400px; min-height: 200px; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; transition: box-shadow 0.3s, transform 0.3s;}
.premium-card:hover{box-shadow: 0 6px 24px rgba(0,0,0,0.18); transform: translateY(-4px) scale(1.005);}
.premium-title{font-size: 1.2em; margin-bottom: 10px; text-align: center;}
.premium-price{font-size: 2em; font-weight: bold; margin-bottom: 12px; text-align: center;}
.premium-price span{font-size: 0.7em; color: #aaa; margin-left: 4px;}
.premium-benefits{list-style: none; padding: 0; margin: 0 0 18px 0; text-align: left; width: 100%;}
.premium-benefits li{margin-bottom: 6px; padding-left: 12px; position: relative;}
.premium-benefits li:before{content: '•'; color: #9aff5b; position: absolute; left: 0;}
.premium-pay-btn{display: flex; align-items: center; justify-content: center; gap: 10px; background: #222; border-radius: 8px; padding: 10px 24px; text-decoration: none; color: #fff; font-weight: 500; box-shadow: 0 1px 4px rgba(0,0,0,0.08); transition: background 0.2s; margin-top: auto;}
.premium-pay-btn:hover{background: #333;}
.premium-pay-btn img{max-width: 32px; border-radius: 4px;}
.events h1{text-align: center;}


body{font-family: Arial; padding: 0; margin: 0; background-color: rgb(48, 48, 48); color: white; font-size: 16px;}
a,img{user-select: none;}
html{scroll-behavior: smooth;}
::-webkit-scrollbar{width: 7px; opacity: 100%;}
::-webkit-scrollbar-track{box-shadow: inset 0 0 5px black; transition: 0.5s;}
::-webkit-scrollbar-thumb:hover{background: #0073ff; transition: 0.4s; border-radius: 100px;}
.dropbtn{background-color: rgb(32, 38, 39); color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer;}
.dropdown{position: relative; display: inline-block; margin-right: 75px; border-radius: 20px;}
.dropdown-content{display: none; position: absolute; background-color: #f9f9f9; min-width: 100px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; margin-right: 50px; border-radius: 20px;}
.dropdown-content a{color: black; padding: 12px 16px; text-decoration: none; display: block;}
.dropdown-content a:hover{background-color: #9aff5b; border-radius: 20px;}
.dropdown:hover .dropdown-content{display: block;}
.dropdown:hover .dropbtn{background-color: rgb(32, 38, 39);}
.menu-bar{display: flex; position: sticky; background-color: rgb(32, 38, 39); position: -webkit-sticky; top: 0; height: 60px; width: 100%; align-items: center; justify-content: space-between; z-index: 99;}
.menu-bar h2{margin-left: 40px; color: white;}
.menu-bar ul{list-style: none; display: flex;}
.menu-bar ul li a{margin: 15px; text-decoration: none; color: white; transition: .4s;}
.menu-bar ul li a:hover{transition: .4s; color: #9aff5b;}
footer{background-color: rgb(32, 38, 39); padding: 30px 0; width: 100%; text-align: center; color: white;}
footer a:hover{color: #9aff5b;}
.footer-content{max-width: 1500px; margin: 0 auto; justify-content: space-between; align-items: center; user-select: none;}
.footer-content a{color: lightblue; text-decoration: none;}
.footer-content a:hover{color: #0073ff;}
.PP{min-height: 100vh; max-width: 1500px; margin: 0 auto;}
.PP p{font-size: 17px; margin: 30px !important;}
.PP h2{font-size: 40px;}
h1{margin: 30px; color: #0073ff;}
.container{display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 50px;}
.item{display: flex; flex-direction: row; align-items: center; margin: 20px; transition: .6s;}
.title{margin-right: 20px; color: #0073ff;}
.image{margin-left: 20px;}
.paragraph{margin-top: 10px; max-width: 200px;}
.column{flex-direction: column;}
.item img{width: 150px;}
.item:hover{transform: scale(1.02);}
h5{display: flex; justify-content: center; font-size: 25px;}
.container img{border-radius: 5px;}
hr{margin-left: 200px; margin-right: 200px;}
.frf{margin: 40px;}
.frf a{color: #0073ff; text-decoration: none; transition: .4s;}
.frf a:hover{color: #9aff5b;}
.Mb-staff-title{color: #0073ff; justify-content: center; text-align: center; font-size: 30px; margin-top: 40px;}
.frf h2{display: flex; justify-content: center; text-align: center; font-size: 40px;}
.frf h4{justify-content: center; text-align: center;}
.frf p{margin: 30px; font-size: 17px;}
.frf p b{font-size: 20px; color: rgba(0, 115, 255, 0.7);}
.frf hr{margin: 30px;}
.frf a{transition: .4s; text-decoration: none; color: rgba(0, 115, 255, 0.7);}
.frf a:hover{color: #9aff5b;}
.frf{max-width: 1500px; margin: 0 auto;}
br{user-select: none;}
h3{text-align: left; margin: 30px;}
.cuadrados{display: flex; flex-wrap: wrap; justify-content: center;}
h1{text-align: left; font-size: 35px;}
.PP h1, .RULES h1, .TOS h1{text-align: left;}
.events h1, .index h1, .staff h1{text-align: center !important;}
h3{font-size: 22px;}
button{min-width: 80px; min-height: 20px; border-radius: 5px; border-width: 0px;}
button a{font-size: 15px; text-decoration: none; color: black; font-family: "Arial";}
.cuadrados .item:hover{transform: scale(1.05);}
.cuadrados .item{border-radius: 20px; min-width: 330px; max-height: 100px; margin: 10px; background-color: rgb(32, 38, 39); padding: 9px; text-align: center;}
button:hover{background-color: #9aff5b; color: #FFFFFF; transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;}
.cuadrados a{text-decoration: none; color: white;}
.fondo{min-height: 100vh;}
.frfaza div{margin-top: 20px;}
.frfaza div h4{color: #0073ff; font-size: 20px;}
.frfaza div p{font-size: 17px;}
.frfaza div{margin-left: 20px; margin-right: 20px;}
.frfaza{margin-bottom: 120px;}
.frfazap{margin-left: 20px; margin-right: 20px;}
.frfazah1{margin-left: 15px;}
.event{display: flex; flex-direction: row; align-items: center; justify-content: space-between; background-color: #232323; color: #fff; margin: 16px auto 0px auto; width: 90%; max-width: 600px; box-shadow: 0 2px 12px rgba(0,0,0,0.10); border-radius: 18px; padding: 28px 22px; transition: box-shadow 0.3s, transform 0.3s; position: relative; overflow: hidden;}
.event-content{flex: 1;}
.event h2, .event h3, .event p{margin: 0 0 12px 0;}
.event img{border-radius: 10px; max-width: 160px; height: auto; margin-left: 32px; margin-bottom: 0; display: block;}
.event:hover{box-shadow: 0 6px 24px rgba(0,0,0,0.18); transform: translateY(-4px) scale(1.01); background-color: #2c2c2c;}
.fondo h2{text-align: center; padding-top: 20px; margin-bottom: 40px;}
.fondo{justify-content: center; align-items: center; min-height: 100vh;}
.image-container{order: 2; display: flex; align-items: center;}
.image-container img{max-width: 100px; border-radius: 5px;}
.text-container{order: 1;}
.disc{display: flex; justify-content: center; text-align: center; margin: 18px;}
.disc h3{color: #0073ff;}
.fondo-botones-index a{display: inline-block; margin-right: 10px; padding: 10px 20px; border: 1px solid #fff; color: #fff; transition: .4s; text-decoration: none;}
.fondo-botones-index a:hover{color: black; border-radius: 10px; background-color: white;}
.fondo-index{display: flex; justify-content: center; align-items: center; height: 81vh; text-align: left !important; background: rgb(48, 48, 48);}
.wrap-index-fondo{display: flex; max-width: 1200px; margin: 0 auto;}
.izquierda-fondo-index{margin-right: 30px;}
.derecha-fondo-index{flex-direction: column; justify-content: center;}
.derecha-fondo-index p a{user-select: text; color: #0073ff; text-decoration: none;}
.derecha-fondo-index p a:hover{text-decoration: underline; color: #9aff5b;}
.fondo-botones-index{display: flex; align-items: flex-end;}
img{margin-right: 30px; max-width: 210px; width: auto; border-radius: 10px;}
.wsycu{max-width: 1500px; margin: 0 auto;}
.wsycu h3{color: #0073ff; font-size: 25px; justify-content: center; text-align: center;}
.wsycu p{justify-content: center; text-align: center; margin-left: 60px; margin-right: 60px; margin-bottom: 40px;}
.carousel{max-width: 1000px; margin: 0 auto; position: relative; font-family: sans-serif; margin-bottom: 50px;}
.carousel .viewport{overflow: hidden; position: relative; width: 100%;}
.carousel .track{display: flex; transition: transform 0.4s ease;}
.carousel .slide{min-width: 100%; flex: 0 0 100%; padding: 20px; box-sizing: border-box;}
.carousel .slide-content{display: flex; align-items: center; gap: 20px;}
.carousel .slide-content .left{flex: 1;}
.carousel .slide-content .right{flex: 1; text-align: right;}
.carousel .slide-content .left p b{color: #9aff5b;}
.carousel .slide-content img{max-width: 100%; height: 475px; border-radius: 6px;}
.carousel .controls{display: flex; align-items: center; justify-content: space-between; margin-top: 10px; width: 100%;}
.carousel .btn{padding: 6px 12px; cursor: pointer; font-family: "Arial";}
.carousel .btn:hover{background: #9aff5b; color: black; border: black;}
.carousel .dots{display: flex; gap: 12px; justify-content: center; flex: 0 0 auto;}
.carousel .dot{width: 20px !important; height: 20px !important; min-width: 10px; min-height: 10px; max-width: 15px; max-height: 10px; border-radius: 50%; background: #5b5353; border: none; cursor: pointer; padding: 0; margin: 0; box-sizing: border-box;}
.carousel .dot[aria-current="true"]{background: #0073ff;}
.carousel .dot[aria-current="true"]:hover{background: #0073ff;}
.carousel .dot:hover{background: #9aff5b;}
@media(max-width: 600px){
    .fondo-index{height: 100%; margin-bottom: 70px; margin-top: 50px;}
    .wrap-index-fondo{display: inline; max-width: 1200px; margin: 0 auto; text-align: center;}
    .wrap-index-fondo img{margin: 0 auto !important;}
    .derecha-fondo-index{text-align: center; margin: 0px;}
    .fondo-botones-index{justify-content: center;}
    .carousel .slide-content img{max-width: 100%; height: 100%; border-radius: 6px;}
    .carousel .controls{display: block; text-align: center;}
    .carousel .controls *{margin: 10px 0;}
    .slide, div.track{height: 100% !important;}
    .wsycu p{margin: 30px !important;}
    .slide p{margin: 10px !important;}
    .dots{display: none !important;}
    .wsycu .tags{display: flex; flex-direction: column; text-align: center;}

    .event{flex-direction: column; margin-bottom: 20px; margin-top: 0;}
}
@media(max-width: 1024px){
    .carousel .slide-content{flex-direction: column; text-align: center;}
    .carousel .slide-content .right{text-align: center;}
}
.carousel .left h2{color: #0073ff;}
.carousel .controls button{background-color: rgb(48, 48, 48); color: white; border: 1px solid white; border-radius: 20px;}
.wsycu .tags{justify-content: center; display: flex; flex-wrap: wrap; gap: 30px; margin: 30px; margin-top: 0;}
.wsycu .tags span, .wsycu .tags a{border: #0073ff 1px solid; padding: 10px; border-radius: 10px; transition: all .2s; color: white; text-decoration: none;}
.wsycu .tags span:hover, .wsycu .tags a:hover{border: #9aff5b 1px solid;}
.list-badges{display: flex; flex-wrap: wrap; justify-content: center;}
.badge{background-color: rgb(32,38,39); padding: 10px; margin: 20px; border-radius: 30px;}
.badge{display: flex;}
.badge .der{vertical-align: middle; display: flex; align-items: center;}
.badge img{max-width: 75px;}
.badges{min-height: 100vh;}
.badge:hover{transform: scale(1.05); transition: 0s;}
.badge .izq{max-width: 200px; margin-right: 15px;}
.b-tit{text-align: center;}
.tiers{display: flex; justify-content: center;}
.tiers div{max-width: 350px; padding: 15px; background-color: rgb(32,38,39); border-radius: 20px; margin: 10px; transition: 0.4s;}
.tiers div h4,.tiers div h5,.tiers div p{text-align: center;}
.tiers div h4{color: #0073ff;}
.tiers div a{text-align: center; display: block;}
.tiers div a img{margin: 0;}
.frffr{padding: 10px;}
.frffr a{transition: 0.4s all;}
.frffr a:hover{color: #9aff5b;}