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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

/* ====================================================== */
/* BODY */
/* ====================================================== */

body{

    background:#2f3441;

    font-family:Arial, Helvetica, sans-serif;

    color:#fff;

    overflow-x:hidden;

}

/* ====================================================== */
/* WRAPPER */
/* ====================================================== */

.wrapper{

    width:1200px;

    margin:auto;

}

/* ====================================================== */
/* NAV */
/* ====================================================== */

.nav{

    width:100%;

    height:120px;

    background:#111;

    border-bottom:2px solid #d39b32;

}

.nav_box{

    height:120px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

/* ====================================================== */
/* LOGO */
/* ====================================================== */

.logo img{

    width:170px;

}

/* ====================================================== */
/* MENU */
/* ====================================================== */

.menu a{

    color:#d39b32;

    text-decoration:none;

    margin-left:25px;

    font-size:18px;

    transition:0.3s;

}

.menu a:hover{

    color:#fff;

}

/* ====================================================== */
/* HEADER */
/* ====================================================== */

.header{

    width:100%;

    height:420px;

    background:url('../images/portada.jpg') center center no-repeat;

    background-size:cover;

    border-bottom:2px solid #d39b32;

}

.header_overlay{

    width:100%;

    height:100%;

    background:rgba(0,0,0,0.5);

}

.header_content{

    height:420px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.header_content img{

    width:450px;

    margin-bottom:20px;

}

.header_content h1{

    font-size:42px;

    color:#d39b32;

    margin-bottom:10px;

}

.header_content p{

    font-size:20px;

    color:#ddd;

}

/* ====================================================== */
/* CONTENT */
/* ====================================================== */

.content{

    padding:40px 0;

}

.content_box{

    display:flex;

    gap:20px;

}

/* ====================================================== */
/* LEFT */
/* ====================================================== */

.left{

    width:300px;

}

/* ====================================================== */
/* PANEL */
/* ====================================================== */

.panel{

    background:#1d212b;

    border:1px solid #d39b32;

    margin-bottom:20px;

    padding:20px;

    border-radius:10px;

}

.panel h2{

    color:#d39b32;

    margin-bottom:15px;

    font-size:22px;

}

.panel ul{

    list-style:none;

}

.panel ul li{

    margin-bottom:12px;

}

.panel ul li a{

    color:#fff;

    text-decoration:none;

    transition:0.3s;

}

.panel ul li a:hover{

    color:#d39b32;

}

/* ====================================================== */
/* RIGHT */
/* ====================================================== */

.right{

    flex:1;

}

/* ====================================================== */
/* SLIDER */
/* ====================================================== */

.slider{

    position:relative;

    width:100%;

    overflow:hidden;

}

/* ====================================================== */
/* SLIDES */
/* ====================================================== */

.slides{

    display:none;

}

.slides img{

    width:100%;

    height:auto;

    display:block;

    border-radius:10px;

    border:2px solid #d39b32;

}

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

.fade{

    animation:fadeEffect 1s;

}

@keyframes fadeEffect{

    from{

        opacity:0.4;

    }

    to{

        opacity:1;

    }

}

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

.slider_buttons{

    position:absolute;

    bottom:15px;

    width:100%;

    text-align:center;

}

/* ====================================================== */
/* ICONOS */
/* ====================================================== */

.dot{

    width:22px;

    height:22px;

    margin:0 5px;

    display:inline-block;

    cursor:pointer;

    transition:0.3s;

    background:url('../images/offIcon.png') no-repeat center;

    background-size:contain;

}

/* ====================================================== */
/* ACTIVO */
/* ====================================================== */

.dot.active{

    background:url('../images/onIcon.png') no-repeat center;

    background-size:contain;

}

/* ====================================================== */
/* NEWS */
/* ====================================================== */

.news{

    background:#1d212b;

    border:1px solid #d39b32;

    margin-top:20px;

    border-radius:10px;

    padding:25px;

}

.news h2{

    color:#d39b32;

    margin-bottom:15px;

}

.news_item{

    border-bottom:1px solid #333;

    padding-bottom:15px;

    margin-bottom:15px;

}

.news_item:last-child{

    border-bottom:none;

}

.news_item h3{

    color:#fff;

    margin-bottom:10px;

}

.news_item p{

    color:#ccc;

    line-height:1.6;

}

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

.footer{

    background:#111;

    border-top:2px solid #d39b32;

    padding:25px 0;

    margin-top:40px;

}

.footer_content{

    text-align:center;

}

.footer_content img{

    width:100px;

    margin-bottom:15px;

}

.footer_content p{

    color:#d39b32;

}

.footer_content span{

    color:#ff0000;

}

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

@media screen and (max-width:1200px){

    .wrapper{

        width:95%;

    }

}

/* ====================================================== */

@media screen and (max-width:900px){

    /* NAV */

    .nav{

        height:auto;

        padding:15px 0;

    }

    .nav_box{

        flex-direction:column;

        justify-content:center;

        height:auto;

    }

    /* LOGO */

    .logo img{

        width:140px;

        margin-bottom:15px;

    }

    /* MENU */

    .menu{

        text-align:center;

    }

    .menu a{

        display:inline-block;

        margin:8px 10px;

        font-size:16px;

    }

    /* HEADER */

    .header{

        height:300px;

    }

    .header_content{

        height:300px;

        padding:20px;

    }

    .header_content img{

        width:180px;

    }

    .header_content h1{

        font-size:28px;

    }

    .header_content p{

        font-size:16px;

    }

    /* CONTENT */

    .content_box{

        flex-direction:column;

    }

    .left{

        width:100%;

    }

    .right{

        width:100%;

    }

    /* SLIDER */

    .slides img{

        border-radius:8px;

    }

    .dot{

        width:18px;

        height:18px;

    }

    /* NEWS */

    .news{

        padding:18px;

    }

}

/* ====================================================== */

@media screen and (max-width:600px){

    /* HEADER */

    .header{

        height:240px;

    }

    .header_content{

        height:240px;

    }

    .header_content img{

        width:140px;

    }

    .header_content h1{

        font-size:22px;

    }

    .header_content p{

        font-size:14px;

    }

    /* MENU */

    .menu a{

        font-size:14px;

    }

    /* PANEL */

    .panel h2{

        font-size:18px;

    }

    /* NEWS */

    .news h2{

        font-size:20px;

    }

    .news_item h3{

        font-size:16px;

    }

    .news_item p{

        font-size:14px;

    }

    /* FOOTER */

    .footer_content img{

        width:80px;

    }

    .footer_content p{

        font-size:13px;

        line-height:22px;

    }

}


/* ====================================================== */
/* REGISTER FORM CENTER */
/* ====================================================== */

.news form{

    width:100%;

    max-width:500px;

    margin:0 auto;

}

/* ====================================================== */

.news h2{

    text-align:center;

    margin-bottom:30px;

}

/* ====================================================== */
/* INPUTS */
/* ====================================================== */

.input_box{

    margin-bottom:20px;

}

.input_box label{

    display:block;

    text-align:left;

    color:#d39b32;

    margin-bottom:8px;

    font-size:16px;

}

.input_box input{

    width:100%;

    height:50px;

    background:#1f2937;

    border:1px solid #444;

    border-radius:8px;

    padding:0 15px;

    color:#fff;

    font-size:16px;

    transition:0.3s;

}

.input_box input:focus{

    border-color:#d39b32;

    box-shadow:0 0 10px rgba(211,155,50,0.4);

}

/* ====================================================== */
/* CAPTCHA */
/* ====================================================== */

.captcha_box{

    text-align:center;

    margin-bottom:20px;

}

#captchaImg{

    border:2px solid #d39b32;

    border-radius:8px;

    cursor:pointer;

    transition:0.3s;

}

#captchaImg:hover{

    transform:scale(1.03);

}

/* ====================================================== */
/* BOTON */
/* ====================================================== */

.register_btn{

    width:100%;

    height:55px;

    border:none;

    border-radius:10px;

    background:linear-gradient(
        180deg,
        #f7c35f,
        #d39b32
    );

    color:#111;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:0.3s;

    letter-spacing:1px;

    box-shadow:0 0 15px rgba(211,155,50,0.3);

}

.register_btn:hover{

    transform:translateY(-2px);

    background:linear-gradient(
        180deg,
        #ffd97a,
        #e0a93d
    );

    box-shadow:0 0 20px rgba(211,155,50,0.6);

}

/* ====================================================== */
/* POPUP SUCCESS */
/* ====================================================== */

.popup_success{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,0.8);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.popup_box{

    width:400px;

    background:#111827;

    border:2px solid #d39b32;

    border-radius:12px;

    padding:35px;

    text-align:center;

    animation:popupShow 0.4s ease;

}

.popup_box h3{

    color:#d39b32;

    font-size:28px;

    margin-bottom:15px;

}

.popup_box p{

    color:#fff;

    margin-bottom:25px;

    font-size:16px;

}

.popup_box button{

    width:180px;

    height:50px;

    border:none;

    border-radius:8px;

    background:#d39b32;

    color:#111;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:0.3s;

}

.popup_box button:hover{

    background:#fff;

}

/* ====================================================== */
/* ANIMATION */
/* ====================================================== */

@keyframes popupShow{

    from{

        opacity:0;
        transform:scale(0.8);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}
/* ====================================================== */
/* POPUP LOGO */
/* ====================================================== */

.popup_logo{

    width:220px;

    margin-bottom:20px;

    animation:popupLogo 2s infinite alternate;

}

/* ====================================================== */
/* EFFECT */
/* ====================================================== */

@keyframes popupLogo{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.03);

    }

}




/* ====================================================== */
/* DOWNLOAD BOX */
/* ====================================================== */

.download_box{

    width:100%;

    background:#161c28;

    border:1px solid #d39b32;

    border-radius:12px;

    padding:25px;

    margin-bottom:25px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    transition:0.3s;

}

.download_box:hover{

    transform:translateY(-3px);

    box-shadow:0 0 20px rgba(211,155,50,0.2);

}

/* ====================================================== */
/* DOWNLOAD INFO */
/* ====================================================== */

.download_info{

    display:flex;

    align-items:center;

    gap:20px;

}

.download_info img{

    width:80px;

}

.download_info h3{

    color:#d39b32;

    margin-bottom:8px;

    font-size:24px;

}

.download_info p{

    color:#ccc;

    line-height:1.5;

}

/* ====================================================== */
/* DOWNLOAD BUTTON */
/* ====================================================== */

.download_btn{

    width:220px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    background:linear-gradient(
        180deg,
        #f7c35f,
        #d39b32
    );

    color:#111;

    text-decoration:none;

    font-weight:bold;

    font-size:16px;

    letter-spacing:1px;

    transition:0.3s;

    box-shadow:0 0 15px rgba(211,155,50,0.3);

}

.download_btn:hover{

    transform:scale(1.03);

    background:linear-gradient(
        180deg,
        #ffd97a,
        #e0a93d
    );

}

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

@media screen and (max-width:900px){

    .download_box{

        flex-direction:column;

        text-align:center;

        gap:20px;

    }

    .download_info{

        flex-direction:column;

    }

    .download_btn{

        width:100%;

    }

}

/* ====================================================== */
/* DOWNLOAD IMAGE */
/* ====================================================== */

.download_image{

    width:220px;

    transition:0.3s;

    cursor:pointer;

    filter:drop-shadow(
        0 0 10px rgba(211,155,50,0.4)
    );

}

.download_image:hover{

    transform:scale(1.05);

    filter:drop-shadow(
        0 0 18px rgba(211,155,50,0.8)
    );

}

/* ====================================================== */
/* DOWNLOAD LOGO */
/* ====================================================== */

.download_info img{

    width:140px;

}




/* ====================================================== */
/* RANKING TABLE */
/* ====================================================== */

.ranking_table{

    width:100%;

    overflow-x:auto;

}

.ranking_table table{

    width:100%;

    border-collapse:collapse;

}

.ranking_table th{

    background:#d39b32;

    color:#111;

    padding:15px;

    font-size:16px;

    text-align:center;

}

.ranking_table td{

    background:#161c28;

    color:#fff;

    padding:14px;

    border-bottom:1px solid #2b3447;

    text-align:center;

    transition:0.3s;

}

.ranking_table tr:hover td{

    background:#1d2433;

}

/* ====================================================== */
/* TOP 1 */
/* ====================================================== */

.top1 td{

    background:linear-gradient(
        90deg,
        #5c4300,
        #d39b32
    ) !important;

    color:#fff;

    font-weight:bold;

}

/* ====================================================== */
/* TOP 2 */
/* ====================================================== */

.top2 td{

    background:linear-gradient(
        90deg,
        #4a4a4a,
        #9f9f9f
    ) !important;

    color:#fff;

    font-weight:bold;

}

/* ====================================================== */
/* TOP 3 */
/* ====================================================== */

.top3 td{

    background:linear-gradient(
        90deg,
        #5a2f00,
        #b76a1d
    ) !important;

    color:#fff;

    font-weight:bold;

}

/* ====================================================== */
/* STATUS */
/* ====================================================== */

.status-online{

    color:#00ff66;

    font-size:18px;

}

.status-offline{

    color:#ff4444;

    font-size:18px;

}

/* ====================================================== */
/* PANEL LINKS */
/* ====================================================== */

.panel ul li a{

    color:#fff;

    text-decoration:none;

    transition:0.3s;

}

.panel ul li a:hover{

    color:#d39b32;

    padding-left:5px;

}

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

@media screen and (max-width:900px){

    .ranking_table table{

        min-width:700px;

    }

}