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

    @ stylesheet.css
    @ DOFUS 2.51 — Private Server
    @ Estética GAMER — Cian #26efff + Morado #3e00e2

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

/* ===================== RESET ===================== */
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td,p,figure,figcaption,button{
    padding:0;margin:0;font-size:inherit;color:inherit;background:transparent;
}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
a{text-decoration:none;}
table{border-spacing:0;}
fieldset,img,button,textarea{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-weight:normal;font-style:normal;}
strong{font-weight:bold;}
ol,ul{list-style:none;margin:0;padding:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
input{border:0;margin:0;}
i{font-style:normal;font-weight:bold;}
textarea{resize:none;}
a,button,input[type=submit]{cursor:pointer;}
.clear{clear:both;}
.clear-right{clear:right;}
.clear-left{clear:left;}

/* ===================== SELECTION ===================== */
*::selection        {background:rgba(38,239,255,0.25);color:#26efff;}
*::-moz-selection   {background:rgba(38,239,255,0.25);color:#26efff;}
*::-webkit-selection{background:rgba(38,239,255,0.25);color:#26efff;}

/* ===================== FONT FACES ===================== */
@font-face{
    font-family:'FontAwesome';
    src:url('../fonts/fontawesome/fontawesome-webfont.eot?v=4.4.0');
    src:url('../fonts/fontawesome/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'),
        url('../fonts/fontawesome/fontawesome-webfont.woff2?v=4.4.0') format('woff2'),
        url('../fonts/fontawesome/fontawesome-webfont.woff?v=4.4.0') format('woff'),
        url('../fonts/fontawesome/fontawesome-webfont.ttf?v=4.4.0') format('truetype'),
        url('../fonts/fontawesome/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
    font-weight:normal;font-style:normal;
}
@font-face{
    font-family:'proxima-nova_regular';
    src:url('../fonts/ProximaNova-Regular.eot');
    src:url('../fonts/ProximaNova-Regular.eot') format('embedded-opentype'),
        url('../fonts/ProximaNova-Regular.woff') format('woff'),
        url('../fonts/ProximaNova-Regular.ttf') format('truetype'),
        url('../fonts/ProximaNova-Regular.svg#ProximaNova-Regular') format('svg');
    font-weight:normal;font-style:normal;
}
@font-face{
    font-family:'proxima-nova_bold';
    src:url('../fonts/ProximaNova-Bold.eot');
    src:url('../fonts/ProximaNova-Bold.eot') format('embedded-opentype'),
        url('../fonts/ProximaNova-Bold.woff') format('woff'),
        url('../fonts/ProximaNova-Bold.ttf') format('truetype'),
        url('../fonts/ProximaNova-Bold.svg#ProximaNova-Bold') format('svg');
    font-weight:normal;font-style:normal;
}

/* Rajdhani: gamer con personalidad | Nunito Sans: UI limpio y legible */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Nunito+Sans:wght@300;400;600;700;800&display=swap');

/* ===================== VARIABLES ===================== */
:root{
    --cyan:          #26efff;
    --cyan-dim:      #17b8cc;
    --cyan-dark:     #0d6e7a;
    --cyan-glow:     rgba(38,239,255,0.35);
    --purple:        #3e00e2;
    --purple-bright: #6633ff;
    --purple-dim:    #2a0099;
    --purple-glow:   rgba(62,0,226,0.45);

    --bg:            #050608;
    --bg-card:       #0a0b10;
    --bg-panel:      #0d0e16;
    --bg-surface:    #11131e;

    --border:        rgba(38,239,255,0.12);
    --border-bright: rgba(38,239,255,0.35);
    --border-purple: rgba(102,51,255,0.35);

    --text:          #c8d8e8;
    --text-bright:   #e8f4ff;
    --text-muted:    #4a5870;

    --red:           #ff3a3a;
    --green:         #00e676;
    --amber:         #ffb300;

    --shadow-cyan:   0 0 20px rgba(38,239,255,0.25);
    --shadow-purple: 0 0 20px rgba(62,0,226,0.4);
    --shadow-deep:   0 4px 30px rgba(0,0,0,0.8);

    --font-title: 'Rajdhani', 'proxima-nova_bold', sans-serif;
    --font-ui:    'Nunito Sans', 'proxima-nova_regular', sans-serif;
}

/* ===================== BASE ===================== */
*{position:relative;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
*:focus{outline:none;}

html,body{font-family:var(--font-ui);width:100%;min-height:100%;color:var(--text);}

html{
    background:
        radial-gradient(ellipse 70% 45% at 15% 0%,   rgba(62,0,226,0.18)  0%, transparent 55%),
        radial-gradient(ellipse 60% 40% at 85% 5%,   rgba(38,239,255,0.1) 0%, transparent 50%),
        radial-gradient(ellipse 50% 60% at 50% 100%,  rgba(62,0,226,0.12) 0%, transparent 55%),
        url('../img/background.jpg') no-repeat center top / cover;
    background-color:var(--bg);
}
body{padding-top:400px;}
strong{font-family:'proxima-nova_bold', var(--font-ui);font-weight:normal;}
a{color:inherit;transition:color 0.2s;}

/* ===================== LAYOUT ===================== */
.ct{width:1100px;max-width:100%;padding:0 25px;margin:auto;}
    @media screen and (max-width:415px){.ct{padding:0 12px;}}

/* ===================== ALERTS ===================== */
.alert{
    padding:10px 15px !important;margin-top:10px;border-radius:2px;
    font-size:12px;font-family:var(--font-ui);font-weight:700;
    letter-spacing:0.03em;text-transform:uppercase;border-left:3px solid;
}
.alert.infos  {background:rgba(38,239,255,0.08); color:var(--cyan);   border-color:var(--cyan);}
.alert.error  {background:rgba(255,58,58,0.1);   color:#ff7070;        border-color:var(--red);}
.alert.valid  {background:rgba(0,230,118,0.08);  color:var(--green);   border-color:var(--green);}
.alert.warning{background:rgba(255,179,0,0.08);  color:var(--amber);   border-color:var(--amber);}

/* ===================== KEYFRAMES ===================== */
@keyframes cyanPulse{
    0%,100%{opacity:0.5;text-shadow:0 0 6px var(--cyan-glow);}
    50%    {opacity:1;  text-shadow:0 0 18px var(--cyan-glow), 0 0 35px var(--cyan-glow);}
}
@keyframes borderGlow{
    0%,100%{box-shadow:0 0 5px rgba(38,239,255,0.15),inset 0 0 5px rgba(38,239,255,0.04);}
    50%    {box-shadow:0 0 18px rgba(38,239,255,0.35),inset 0 0 10px rgba(38,239,255,0.07);}
}

/* ===================== TRANSITIONS ===================== */
header nav ul li.sub span{transition:0.2s ease;}

/* ===================== USER-SELECT ===================== */
main aside .butt, header nav{
    -khtml-user-select:none;-webkit-user-select:none;
    -moz-user-select:-moz-none;-ms-user-select:none;user-select:none;
}

/* ===================== FLEX ===================== */
main aside .item .illu{
    display:-webkit-box;display:-moz-box;display:-ms-flexbox;
    display:-webkit-flex;display:flex;
    -ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;
}

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

header{
    z-index:900;width:100%;height:65px;position:fixed;top:0;
    background:linear-gradient(180deg,rgba(5,6,8,0.98) 0%,rgba(8,9,15,0.97) 100%);
    border-bottom:1px solid var(--border);
    box-shadow:0 2px 0 rgba(38,239,255,0.06), 0 0 40px rgba(0,0,0,0.9);
}
/* Línea cian-morado-cian en el top del header */
header::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,var(--purple-bright) 0%,var(--cyan) 50%,var(--purple-bright) 100%);
    opacity:0.85;z-index:10;
}

header .ct{height:100%;}

/* Logotipo */
header #logotype{
    left:50%;margin-left:-75px;
    font-family:var(--font-title);text-transform:uppercase;
    text-align:center;font-weight:700;letter-spacing:0.12em;
    z-index:900;position:absolute;width:150px;
    background:linear-gradient(180deg,#180060 0%,#0d0035 100%);
    border:1px solid rgba(38,239,255,0.18);border-top:0;
    height:72px;padding-top:12px;
    font-size:23px;line-height:27px;
    color:var(--cyan);
    text-shadow:0 0 15px var(--cyan-glow),0 0 30px rgba(38,239,255,0.2);
    transition:all 0.25s;
    animation:borderGlow 3s ease-in-out infinite;
    clip-path:polygon(0 0,100% 0,100% 80%,85% 100%,15% 100%,0 80%);
}
header #logotype:hover{
    background:linear-gradient(180deg,#220080 0%,#130048 100%);
    color:#fff;text-shadow:0 0 20px var(--cyan),0 0 40px var(--cyan-glow);
}
header #logotype small{
    font-weight:400;font-family:var(--font-ui);display:block;
    line-height:14px;text-transform:none;font-size:9px;
    color:var(--cyan-dim);letter-spacing:0.2em;text-shadow:none;opacity:0.7;
}
/* pulso en la base del logo */
header #logotype::after{
    content:'';position:absolute;
    bottom:0;left:15%;width:70%;height:1px;
    background:linear-gradient(90deg,transparent,var(--cyan),transparent);
    animation:cyanPulse 2.5s ease-in-out infinite;
}

/* Nav */
header nav{height:100%;font-family:var(--font-title);}
header nav .nav{height:100%;border-left:1px solid var(--border);}
header nav .nav li,header .panel{
    color:var(--text-muted);width:calc(16.666% - 25px);
    height:100%;float:left;border-right:1px solid var(--border);
}
header nav .nav li:nth-child(3){border-right:0;}
header nav .nav li:hover{z-index:150;}

header nav .nav li a,header .panel a{
    color:var(--text-muted);padding-top:20px;float:left;text-align:center;
    width:100%;display:inline-block;height:100%;
    text-transform:uppercase;font-size:12px;font-weight:600;letter-spacing:0.1em;
    transition:color 0.2s,background 0.2s;
}
header nav .nav li a:hover,header .panel a:hover{
    color:var(--cyan);background:rgba(38,239,255,0.04);
}
header nav .nav li.sub{
    padding-top:20px;text-align:center;text-transform:uppercase;
    font-size:12px;font-weight:600;letter-spacing:0.1em;
    transition:color 0.2s,background 0.2s;
}
header nav .nav li.sub:hover{color:var(--cyan);background:rgba(38,239,255,0.04);}

header nav .nav li span{
    position:absolute;bottom:10px;text-align:center;
    left:0;width:100%;display:block;
    color:var(--cyan-dark) !important;font-size:7px;
}
header nav .nav li.sub:hover span{
    bottom:6px;color:var(--cyan) !important;
    text-shadow:0 0 8px var(--cyan-glow);
}
header nav .nav li.logotype{width:150px;height:72px;}

/* Submenu */
header nav .nav li ul.submenu{
    height:0;overflow:hidden;
    box-shadow:var(--shadow-deep),0 0 0 1px var(--border);
    padding:0 7px;width:185px;
    background:linear-gradient(180deg,#0a0b14 0%,#060710 100%);
    border:1px solid var(--border);border-top:2px solid var(--purple-bright);
    position:absolute;left:50%;margin-left:-92px;top:65px;
    border-radius:0 0 4px 4px;
}
header nav .nav li ul.submenu li{width:100%;float:none;height:36px;border-right:0;}
header nav .nav li ul.submenu li:first-child{margin-top:7px;}
header nav .nav li ul.submenu li a{
    font-size:11px;font-family:var(--font-ui);font-weight:700;letter-spacing:0.06em;
    background:rgba(38,239,255,0.04);border:1px solid rgba(38,239,255,0.08);border-radius:2px;
    margin-bottom:6px;padding-top:0;height:100%;line-height:34px;
    color:var(--text-muted);transition:all 0.15s;
}
header nav .nav li ul.submenu li a:hover{
    background:rgba(38,239,255,0.1);border-color:rgba(38,239,255,0.3);
    color:var(--cyan);text-shadow:0 0 8px var(--cyan-glow);
}
header nav .nav li ul.submenu li input{
    background:rgba(38,239,255,0.04);border:1px solid rgba(38,239,255,0.1) !important;
    border-radius:2px;margin-bottom:7px;padding-top:0;height:100%;
    color:var(--text);float:left;text-align:center;width:100%;display:inline-block;
    font-size:12px;font-weight:700;font-family:var(--font-ui);
}
header nav .nav li ul.submenu li input:hover{background:rgba(38,239,255,0.08);}

header .panel{position:absolute;right:16px;height:100%;top:0;}
header .panel .link{
    cursor:pointer;width:calc(50% - 0px);font-size:18px;
    display:inline-block;border-right:1px solid var(--border);
    color:var(--text-muted);transition:all 0.15s;
}
header .panel .link:hover{
    color:var(--cyan);background:rgba(38,239,255,0.04);
    text-shadow:0 0 10px var(--cyan-glow);
}
header .panel .link.menu{display:none;}
header .panel .link div{top:-2px;left:1px;}

    @media screen and (min-width:1000px){header nav{left:0 !important;}}
    @media screen and (max-width:1000px){
        header nav{
            overflow-x:scroll;padding-bottom:40px;position:fixed;
            height:calc(100vh - 65px);width:210px;
            background:linear-gradient(180deg,rgba(5,6,8,0.99) 0%,rgba(8,9,15,0.99) 100%);
            border-right:1px solid var(--border);
            top:65px;left:-210px;z-index:850;
            box-shadow:5px 0 25px rgba(0,0,0,0.8);
        }
        header nav .nav li{width:100%;height:auto;border-right:0;}
        header nav .nav li a,header nav .nav li.sub{text-align:left !important;padding-left:20px;}
        header nav .nav li.sub{padding-top:15px;}
        header nav .nav li a:hover,header nav .nav li.sub:hover{background:rgba(38,239,255,0.05);}
        header nav .nav li.logotype,header nav .nav li span{display:none;}
        header nav .nav li ul.submenu{
            padding-top:8px;top:0;height:auto !important;
            position:relative;background:transparent;
            box-shadow:none;width:100% !important;margin-left:0;left:0;border:0;
        }
        header nav .nav li ul.submenu li{height:auto;padding:0;}
        header nav .nav li ul.submenu li a{
            line-height:16px;padding-left:0;font-size:10px !important;
            font-weight:400;background:transparent;border:0;height:auto !important;
        }
        header nav .nav li ul.submenu li a:hover{background:transparent;}
        header nav .nav li a:hover{color:var(--cyan) !important;}
        header #logotype{margin-left:0;left:20px;}
        header .panel{width:213px;border-left:1px solid var(--border);}
        header .panel .link{width:60px;}
        header .panel .link.menu{display:inline-block;}
    }
    @media screen and (max-width:415px){
        header #logotype{left:5px;}
        header .panel{right:5px;}
        header .panel .link{width:60px;}
        header .panel .link.menu{display:inline-block;}
    }
    @media screen and (max-width:378px){
        header #logotype{left:5px;}
        header .panel{width:calc(100% - 165px);padding-right:30px;}
        header .panel .link{width:33.333%;font-size:13px;}
        header .panel .link div{top:4px;}
    }

/* ===================================================
   MAIN
=================================================== */

#logo{position:absolute;top:-230px;right:110px;}
    @media screen and (max-width:620px){
        #logo{position:absolute;right:0;width:100%;display:inline-block;text-align:center;}
        #logo img{max-width:80%;}
    }

main{
    background:linear-gradient(180deg,rgba(10,11,18,0.98) 0%,rgba(7,8,14,0.99) 100%);
    width:100%;
    box-shadow:0 -1px 0 rgba(38,239,255,0.08),0 0 60px rgba(0,0,0,0.5);
}

/* === ASIDE === */
main aside{
    padding:10px;
    background:linear-gradient(180deg,#080910 0%,#050609 100%);
    border-left:1px solid var(--border);
    position:absolute;top:0;right:0;width:250px;height:100%;
}

main aside .panel{
    padding:8px;
    background:rgba(38,239,255,0.03);
    border:1px solid var(--border);border-radius:2px;
    color:var(--text);margin-bottom:8px;
}
main aside .panel li{width:100%;padding-bottom:4px;}
main aside .panel li:last-child{padding-bottom:0;}
main aside .panel li a{
    opacity:0.7;overflow:hidden;display:inline-block;
    border:1px solid rgba(38,239,255,0.07);border-radius:2px;
    background:rgba(255,255,255,0.03);
    width:100%;padding:7px 12px;
    font-size:12px;font-family:var(--font-ui);font-weight:600;
    color:var(--text-muted);letter-spacing:0.03em;transition:all 0.15s;
}
main aside .panel li a:hover{
    opacity:1;background:rgba(38,239,255,0.07);
    border-color:rgba(38,239,255,0.2);color:var(--cyan);
    text-shadow:0 0 8px var(--cyan-glow);
}
main aside .panel li a.blue{background:rgba(38,239,255,0.08);border-color:rgba(38,239,255,0.2);color:var(--cyan);}
main aside .panel li a.red {background:rgba(255,58,58,0.1);border-color:rgba(255,58,58,0.25);color:#ff7070;}
main aside .panel li.og a  {padding-left:28px;}
main aside .panel li.og a img{width:70px;position:absolute;left:-20px;top:-22px;}

/* Botones CTA */
main aside .butt{
    text-shadow:0 1px 4px rgba(0,0,0,0.5);
    margin-bottom:8px;padding:14px 0 0 58px;
    height:60px;width:100%;line-height:15px;color:#fff;
    font-size:12px;font-family:var(--font-title);
    text-transform:uppercase;font-weight:700;letter-spacing:0.1em;
    display:inline-block;border-radius:2px;
    border:1px solid rgba(255,255,255,0.07);
    box-shadow:0 2px 8px rgba(0,0,0,0.5);
    transition:all 0.2s;overflow:hidden;
}
main aside .butt::before{
    content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(38,239,255,0.4),transparent);
}
main aside .butt:hover{transform:translateY(-1px);filter:brightness(1.15);box-shadow:0 6px 20px rgba(0,0,0,0.6);}
main aside .butt small{
    display:block;width:100%;font-size:10px;font-weight:400;
    text-transform:none;font-family:var(--font-ui);opacity:0.65;letter-spacing:0.02em;
}
main aside .butt .illu{
    position:absolute;top:0;left:4px;
    display:inline-block;width:50px;height:50px;
    background:url('../img/sprite.png') top center no-repeat;background-size:92% auto;
}

main aside .butt.discord {background:linear-gradient(135deg,#3a3fc7,#2730a0);border-color:#3a3fc7;}
main aside .butt.discord .illu{background-position:center -2508px;}
main aside .butt.twitter {background:linear-gradient(135deg,#0ea5c9,#0878a0);border-color:#0ea5c9;}
main aside .butt.twitter .illu{background-position:center -2555px;}
main aside .butt.facebook{background:linear-gradient(135deg,#1a1ea8,#10147a);border-color:#1a1ea8;}
main aside .butt.facebook .illu{background-position:center -2600px;}
main aside .butt.joins{
    background:linear-gradient(135deg,var(--cyan-dim),var(--cyan-dark));
    border-color:var(--cyan-dim);color:#001820;
}
main aside .butt.joins .illu{background-position:center -302px;margin-bottom:-5px;}
main aside .butt.vote{
    background:linear-gradient(135deg,var(--purple-bright),var(--purple-dim));
    border-color:var(--purple-bright);
}
main aside .butt.vote .illu{background-position:center -2239px;}
main aside .butt.ladder{background:linear-gradient(135deg,#1e3a5f,#112240);border-color:#1e3a5f;}
main aside .butt.ladder .illu{background-position:center -964px;}
main aside .butt.shop{
    background:linear-gradient(135deg,#0a5060,#062535);
    border-color:rgba(38,239,255,0.25);
    box-shadow:0 2px 8px rgba(0,0,0,0.5),0 0 10px rgba(38,239,255,0.08);
}
main aside .butt.shop:hover{box-shadow:0 6px 20px rgba(0,0,0,0.6),0 0 18px rgba(38,239,255,0.18);}
main aside .butt.shop .illu{background-position:center -2458px;}
main aside .butt.forum{background:linear-gradient(135deg,#6a1a30,#420e1e);border-color:#6a1a30;}
main aside .butt.forum .illu{background-position:center -482px;}

main aside .item{
    text-align:center;
    background:rgba(38,239,255,0.04);border:1px solid var(--border);border-radius:2px;
    height:55px;margin:-10px 0 10px;
}
main aside .item .illu{
    float:left;width:25%;height:100%;
    background:rgba(38,239,255,0.05);
    border-right:1px solid rgba(38,239,255,0.08);transition:all 0.15s;
}
main aside .item .illu:last-child{border-right:0;}
main aside .item .illu:hover{background:rgba(38,239,255,0.12);box-shadow:0 0 10px rgba(38,239,255,0.12) inset;}
main aside .item .illu img{margin:auto;width:40px;}
main aside .price{width:100%;background:rgba(0,0,0,0.4);}

/* === CONTENT === */
main #content{min-height:502px;width:calc(100% - 250px);padding:10px;}

main #content h1{
    text-transform:uppercase;color:var(--cyan);line-height:22px;
    padding:12px 18px;
    background:linear-gradient(90deg,rgba(62,0,226,0.2) 0%,rgba(38,239,255,0.06) 70%,transparent 100%);
    border-left:3px solid var(--purple-bright);
    font-size:18px;font-family:var(--font-title);font-weight:700;letter-spacing:0.15em;
    text-shadow:0 0 15px rgba(38,239,255,0.4);
    box-shadow:0 1px 0 rgba(38,239,255,0.08);
}

main #content #breadcrump{
    line-height:14px;margin-bottom:10px;
    background:rgba(5,6,8,0.7);border-bottom:1px solid var(--border);
    padding:9px 18px 10px;color:var(--text-muted);
    font-family:var(--font-ui);font-size:12px;
}
main #content #breadcrump li{display:inline;}
main #content #breadcrump li:after{content:'›';color:var(--purple-bright) !important;margin:0 6px;position:relative;top:1px;}
main #content #breadcrump li:last-child:after{display:none;}
main #content #breadcrump li:last-child{color:var(--text);}
main #content #breadcrump li a:hover{color:var(--cyan);}

main #content #middle{
    overflow:hidden;
    background:rgba(8,9,14,0.85);border:1px solid var(--border);border-top:0;
    padding:1px 10px 10px;color:var(--text);
}
main #content #middle h2{
    margin-top:10px;
    background:linear-gradient(90deg,rgba(62,0,226,0.15) 0%,transparent 80%);
    border-left:2px solid var(--purple-bright);
    color:var(--text-bright);line-height:18px;padding:12px 15px;
    font-size:14px;text-transform:uppercase;
    font-family:var(--font-title);font-weight:700;letter-spacing:0.12em;
}
main #content #middle h2 a:hover{color:var(--cyan);}
main #content #middle p{font-size:14px;line-height:23px;padding:10px 15px 5px;color:var(--text);opacity:0.8;}

main #content form{
    width:100%;background:rgba(8,9,14,0.7);border:1px solid var(--border);
    border-radius:2px;padding:22px;margin:10px auto 0;
}
main #content form label{
    display:block;color:var(--cyan);line-height:14px;
    font-family:var(--font-title);font-size:12px;
    text-transform:uppercase;font-weight:700;letter-spacing:0.12em;
}
main #content form label small{
    padding-bottom:10px;display:block;font-size:13px;text-transform:none;
    font-weight:400;font-family:var(--font-ui);color:var(--text-muted);letter-spacing:0;
}
main #content form label span{color:var(--purple-bright);}

main #content form textarea,
main #content form input[type=text],
main #content form input[type=password]{
    background:rgba(5,6,10,0.9);
    border:1px solid rgba(38,239,255,0.15) !important;border-radius:2px;
    color:var(--text);font-size:13px;
    width:300px;height:45px;margin-bottom:15px;padding:0 14px;
    font-family:var(--font-ui);transition:border-color 0.2s,box-shadow 0.2s;
}
main #content form textarea:focus,
main #content form input[type=text]:focus,
main #content form input[type=password]:focus{
    border-color:var(--cyan) !important;
    box-shadow:0 0 12px rgba(38,239,255,0.15),0 0 0 1px rgba(38,239,255,0.08);
}

main #content .btn{font-size:11px !important;text-align:center;padding:10px !important;width:100% !important;}
main #content .btn,
main #content form button{
    background:linear-gradient(135deg,rgba(62,0,226,0.4) 0%,rgba(38,239,255,0.08) 100%);
    border:1px solid var(--border-purple);border-radius:2px;display:block;
    text-transform:uppercase;color:var(--cyan);
    font-family:var(--font-title);padding:14px 20px;
    font-weight:700;font-size:12px;letter-spacing:0.12em;
    text-shadow:0 0 10px rgba(38,239,255,0.3);transition:all 0.2s;
}
main #content .btn:hover,
main #content form button:hover{
    background:linear-gradient(135deg,rgba(62,0,226,0.6) 0%,rgba(38,239,255,0.15) 100%);
    border-color:var(--purple-bright);
    box-shadow:0 0 20px rgba(62,0,226,0.4),0 0 40px rgba(38,239,255,0.08);color:#fff;
}
main #content form textarea{width:100%;height:125px;resize:none;padding-top:10px;padding-bottom:10px;}
main #content .principal{color:var(--cyan);text-shadow:0 0 8px var(--cyan-glow);}

    @media screen and (max-width:764px){
        main aside{width:100%;position:relative;border-left:0;}
        main #content{width:100%;min-height:auto;}
    }
    @media screen and (max-width:400px){
        main #content form label{text-align:center;}
        main #content form button,
        main #content form input[type=text],
        main #content form input[type=password]{width:100%;}
    }

/* ===================================================
   TABLA LADDER
=================================================== */

main table.ladder{width:100%;margin-bottom:-5px;}
main table.ladder.carac{
    margin-bottom:0;width:calc(50% - 5px);float:left;
    background:rgba(8,9,14,0.8);border:1px solid var(--border);border-radius:2px;
}
main table.ladder.carac.primaire{margin-right:10px;}
main table.ladder.carac span{top:-2px;margin-right:5px;vertical-align:middle;}

main table.ladder th{
    background:linear-gradient(90deg,rgba(62,0,226,0.2) 0%,rgba(38,239,255,0.05) 100%);
    border-bottom:1px solid var(--border);padding:8px 8px 7px;
    font-size:11px;font-family:var(--font-title);
    text-transform:uppercase;letter-spacing:0.1em;
    color:var(--cyan);text-shadow:0 0 8px rgba(38,239,255,0.3);
}
main table.ladder td{
    height:45px;border-bottom:1px solid rgba(38,239,255,0.05);
    padding:6px 8px;border-right:1px solid rgba(38,239,255,0.05);
    font-size:13px;color:var(--text);transition:background 0.15s,color 0.15s;
}
main table.ladder.carac th,main table.ladder.carac td{font-size:11px;}
main table.ladder.carac td{height:30px;padding-top:7px;}
main table.ladder tr:hover td{background:rgba(38,239,255,0.04);color:var(--text-bright);}
main table.ladder tr:last-child td{border-bottom:0;}

/* 1° cian, 2° morado, 3° mezcla */
main table.ladder tr td .rang{
    display:inline-block;width:34px;border-radius:2px;height:34px;
    vertical-align:middle;line-height:34px;text-align:center;
    font-family:var(--font-title);font-size:12px;font-weight:700;
}
main table.ladder tr:nth-child(1) .rang{
    background:linear-gradient(135deg,var(--cyan),var(--cyan-dim));
    color:#001820;box-shadow:0 0 12px rgba(38,239,255,0.5);
}
main table.ladder tr:nth-child(2) .rang{
    background:linear-gradient(135deg,var(--purple-bright),var(--purple-dim));
    color:#fff;box-shadow:0 0 10px rgba(62,0,226,0.5);
}
main table.ladder tr:nth-child(3) .rang{
    background:linear-gradient(135deg,#1a4060,#0d2035);
    color:var(--cyan);box-shadow:0 0 8px rgba(38,239,255,0.15);
}

main table.ladder .l{text-align:left;}
main table.ladder .r{text-align:right;}
main table.ladder .c{text-align:center;}
main table.ladder td.i{width:40px;}
main table.ladder td .class{width:35px;vertical-align:middle;}

    @media screen and (max-width:875px){main table.ladder.carac{width:100%;margin-right:0;}}

/* ===================================================
   NOTICIAS
=================================================== */

main #news{margin-bottom:-10px;}

main article{
    border:1px solid var(--border);font-size:14px;
    width:calc(50% - 5px);background:var(--bg-card);
    float:left;margin-bottom:10px;border-radius:3px;overflow:hidden;
    transition:transform 0.2s,border-color 0.2s,box-shadow 0.2s;
}
main article:hover{
    transform:translateY(-3px);
    border-color:rgba(38,239,255,0.25);
    box-shadow:0 8px 30px rgba(0,0,0,0.7),var(--shadow-cyan);
}
main article:nth-child(odd){margin-right:10px;}

main article .header{color:#fff;height:230px;background-size:cover;background-position:center center;}
main article .header::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(to top,rgba(5,6,8,0.9) 0%,rgba(5,6,8,0.1) 55%,transparent 100%);
    pointer-events:none;
}
main article .header time{
    display:inline-block;
    background:linear-gradient(180deg,var(--purple-bright),var(--purple-dim));
    color:#fff;left:12px;width:52px;text-align:center;
    font-size:20px;padding:10px 0 7px;line-height:13px;
    text-transform:uppercase;font-weight:700;font-family:var(--font-title);
    border-radius:0 0 3px 3px;box-shadow:0 2px 10px rgba(62,0,226,0.5);z-index:5;
}
main article .header time span{
    width:100%;display:inline-block;font-weight:400;font-size:10px;
    font-family:var(--font-ui);opacity:0.8;
}
main article .header h2{
    font-family:var(--font-ui);width:100%;position:absolute;bottom:0;
    font-weight:700;letter-spacing:0.02em;font-size:17px;line-height:22px;
    padding:14px;z-index:5;color:var(--text-bright);
    text-shadow:0 2px 8px rgba(0,0,0,0.8);
}
main article .header h2 img{vertical-align:-40%;margin:0 -2px 0 -6px;}

main article p{
    line-height:20px;padding:12px 15px;height:150px;overflow:hidden;
    color:var(--text-muted);font-size:13px;
}
main article .footer{
    background:rgba(5,6,10,0.9);border-top:1px solid var(--border);
    padding-left:12px;line-height:40px;font-size:11px;height:40px;color:var(--text-muted);
}
main article .footer time{font-weight:700;color:var(--cyan);}
main article .footer a{
    float:right;background:rgba(62,0,226,0.2);border-left:1px solid var(--border-purple);
    height:40px;font-weight:700;font-size:11px;font-family:var(--font-title);
    letter-spacing:0.08em;padding:0 14px;color:var(--cyan);
    text-transform:uppercase;transition:all 0.15s;
}
main article .footer a:hover{background:rgba(62,0,226,0.4);color:#fff;text-shadow:0 0 8px var(--cyan-glow);}
main article .footer a img{vertical-align:-20%;}

main #news.read{margin-bottom:0;}
main #news.read article{width:100%;}
main #news.read article p{height:auto;}

    @media screen and (max-width:900px){main article{width:100%;}}
    @media screen and (max-width:764px){main article{width:calc(50% - 5px);}}
    @media screen and (max-width:609px){main article{width:100%;}}

/* ===================================================
   BOTÓN PUNTOS
=================================================== */

main .butt-points{
    max-width:100%;
    background:linear-gradient(135deg,rgba(62,0,226,0.25) 0%,rgba(38,239,255,0.06) 100%);
    border:1px solid rgba(38,239,255,0.15);border-radius:2px;overflow:hidden;
    padding:18px 0 0;text-align:center;height:60px;width:280px;
    margin:15px auto 5px;display:block;line-height:15px;
    color:var(--cyan);font-size:12px;font-family:var(--font-title);
    text-transform:uppercase;font-weight:700;letter-spacing:0.12em;
    box-shadow:0 4px 20px rgba(0,0,0,0.5),0 0 20px rgba(38,239,255,0.05);
    transition:all 0.2s;animation:borderGlow 4s ease-in-out infinite;
}
main .butt-points:hover{
    background:linear-gradient(135deg,rgba(62,0,226,0.45) 0%,rgba(38,239,255,0.12) 100%);
    border-color:var(--cyan);
    box-shadow:0 6px 25px rgba(0,0,0,0.6),var(--shadow-cyan);
    transform:translateY(-1px);color:#fff;
}
main .butt-points img{position:absolute;top:-70px;left:-70px;}
main .butt-points span{z-index:100;}
main .comm{vertical-align:-20%;margin-bottom:-5px;top:-2px;margin-right:6px;margin-left:-3px;}

/* ===================================================
   COMENTARIOS
=================================================== */

main .comment li{
    min-height:130px;width:100%;
    background:rgba(8,9,14,0.8);border:1px solid var(--border);border-radius:2px;
    padding:20px 20px 15px;margin:10px auto 0;transition:border-color 0.2s;
}
main .comment li:hover{border-color:rgba(38,239,255,0.2);}
main .comment li .left{
    float:left;width:90px;height:90px;
    background:rgba(38,239,255,0.03);border:1px solid var(--border);border-radius:2px;
}
main .comment li .left .ico_user{font-size:50px;opacity:.1;left:27px;top:20px;color:var(--cyan);}
main .comment li .left .level{
    position:absolute;z-index:60;left:-15px;width:50px;
    text-align:center;top:-12px;color:#fff;font-size:10px !important;font-family:var(--font-title);
}
main .comment li .left .align{position:absolute;z-index:50;width:105px;left:-7px;top:-8px;}
main .comment li .left .class{position:absolute;width:100%;}
main .comment li .right{
    border:1px solid var(--border);border-radius:2px;
    width:calc(100% - 100px);background:rgba(5,6,10,0.5);
    margin-left:105px;padding-bottom:7px;padding-top:4px;
}
main .comment li .right p{line-height:18px !important;color:var(--text-muted);}
main .comment li .right p .time{
    display:block;font-size:11px;margin-bottom:5px;
    color:var(--purple-bright);font-family:var(--font-ui);font-weight:700;
}

    @media screen and (max-width:470px){
        main .comment li{min-height:auto;padding:10px;}
        main .comment li .left{display:none;}
        main .comment li .right{width:100%;margin-left:0;}
    }

/* ===================================================
   JOIN / DOWNLOAD
=================================================== */

.join{padding:0;overflow:hidden;background:var(--bg-card);}
.join .download{width:100%;height:315px;background:url('../img/bg-join.jpg') no-repeat center / cover;position:relative;}
.join .download::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(62,0,226,0.45) 0%,rgba(5,6,8,0.3) 60%,transparent 100%);
    pointer-events:none;
}
.join .download a.dn{
    top:90px;right:20px;border-radius:3px;
    background:linear-gradient(135deg,rgba(38,239,255,0.12) 0%,rgba(62,0,226,0.35) 100%);
    border:1px solid var(--cyan);
    font-family:var(--font-title);transition:all 0.2s;
    padding-top:16px;line-height:22px;letter-spacing:0.2em;
    color:var(--cyan);width:270px;height:92px;
    display:inline-block;text-align:center;text-transform:uppercase;
    position:absolute;font-size:11px;font-weight:700;
    text-shadow:0 0 12px var(--cyan-glow);
    box-shadow:0 4px 20px rgba(0,0,0,0.7),0 0 25px rgba(38,239,255,0.12);
}
.join .download a.dn span{width:100%;display:inline-block;font-size:28px;text-shadow:0 0 15px var(--cyan-glow);}
.join .download a.dn:hover{
    background:linear-gradient(135deg,rgba(38,239,255,0.22) 0%,rgba(62,0,226,0.6) 100%);
    color:#fff;
    box-shadow:0 6px 30px rgba(0,0,0,0.7),0 0 50px rgba(38,239,255,0.22),var(--shadow-purple);
    transform:translateY(-2px);text-shadow:0 0 20px #fff;
}
.join .download a.mac{
    opacity:0.4;transition:opacity 0.2s;color:var(--text-muted);
    text-transform:uppercase;letter-spacing:3px;
    position:absolute;font-size:11px;top:195px;right:50px;font-family:var(--font-ui);
}
.join .download a.mac:hover{opacity:0.8;color:var(--cyan);}

    @media screen and (max-width:430px){
        .join .download a.dn{position:relative;right:auto !important;left:auto;display:block;width:90%;margin:auto;}
    }

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

footer{
    color:var(--text-muted);font-size:11px;opacity:0.5;
    text-align:right;padding:18px 5px;
    font-family:var(--font-ui);border-top:1px solid var(--border);
}
footer::before{
    content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,var(--purple-bright),var(--cyan),var(--purple-bright),transparent);
}
footer a{font-family:'proxima-nova_bold',var(--font-ui);color:var(--purple-bright);transition:color 0.2s;}
footer a:hover{color:var(--cyan);text-shadow:0 0 8px var(--cyan-glow);opacity:1;}