*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#05070d;color:#fff;font-family:Arial,Helvetica,sans-serif}
a{text-decoration:none;color:inherit}

.topbar{position:fixed;top:0;left:0;right:0;height:78px;background:rgba(5,7,13,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(250,204,21,.18);display:flex;align-items:center;justify-content:space-between;padding:0 7%;z-index:50}
.brand{display:flex;align-items:center;gap:12px;font-size:24px;font-weight:900}
.brand b{color:#8cff00}.brand-mark{background:#8cff00;color:#000;padding:10px 9px;border-radius:10px;font-size:14px}
.nav{display:flex;gap:28px;font-weight:800;color:#d1d5db}
.nav a:hover{color:#8cff00}
.account{display:flex;align-items:center;gap:12px}
.signin,.logout,.btn{background:#8cff00;color:#000;border:0;border-radius:12px;padding:13px 22px;font-weight:900;cursor:pointer}
.profile-pill{display:flex;align-items:center;gap:10px;background:#111827;border:1px solid rgba(250,204,21,.25);padding:8px 12px;border-radius:999px;font-weight:900}
.avatar{width:34px;height:34px;border-radius:50%;background:#8cff00;color:#000;display:grid;place-items:center;font-weight:900}

.hero-pro{position:relative;min-height:720px;padding:150px 7% 80px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 25% 25%,rgba(250,204,21,.22),transparent 30%),linear-gradient(90deg,#05070d 0%,rgba(5,7,13,.85) 55%,#05070d 100%);z-index:-2}
.hero-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,#000,transparent)}
.eyebrow{color:#8cff00;font-weight:900;letter-spacing:2px;margin-bottom:18px}
.hero-content h1{font-size:72px;line-height:.95;max-width:780px;text-transform:uppercase}
.hero-content p{font-size:22px;color:#cbd5e1;max-width:650px;margin:24px 0 34px;line-height:1.5}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.primary-btn,.secondary-btn{padding:15px 24px;border-radius:12px;font-weight:900}
.primary-btn{background:#8cff00;color:#000}
.secondary-btn{background:#111827;border:1px solid rgba(250,204,21,.25);color:#fff}

.live-panel{background:rgba(15,23,42,.86);border:1px solid rgba(250,204,21,.25);border-radius:22px;padding:26px;box-shadow:0 25px 80px rgba(0,0,0,.5)}
.live-panel h3{color:#8cff00;margin-bottom:18px;font-size:24px}
.live-item{display:grid;gap:10px;color:#cbd5e1}.live-item b{font-size:22px;color:#fff}

.section-pro{padding:80px 7%}
.section-title{text-align:center;margin-bottom:36px}.section-title span{color:#8cff00;font-weight:900;letter-spacing:2px}.section-title h2{font-size:44px;margin-top:8px}

.servers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.server-card{background:#0f172a;border:1px solid rgba(250,204,21,.18);border-radius:22px;overflow:hidden;box-shadow:0 20px 55px rgba(0,0,0,.35);transition:.25s}
.server-card:hover{transform:translateY(-6px);border-color:#8cff00}
.map-img{height:150px;background:radial-gradient(circle,#334155,#020617);display:flex;align-items:end;padding:16px;color:rgba(255,255,255,.14);font-size:44px;font-weight:900;text-transform:uppercase}
.server-body{padding:22px}
.status{display:inline-flex;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:900;margin-bottom:13px}
.online{background:#14532d;color:#86efac}.offline{background:#7f1d1d;color:#fecaca}
.server-body h3{font-size:20px;margin-bottom:14px;min-height:48px}
.info{color:#cbd5e1;line-height:1.9}
.server-actions{display:flex;gap:10px;margin-top:18px}
.connect,.players-btn{flex:1;text-align:center;padding:12px;border-radius:10px;font-weight:900}
.connect{background:#8cff00;color:#000}.players-btn{background:#1e293b;color:#fff;border:1px solid rgba(255,255,255,.08)}

.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.hub-card{background:#0f172a;border:1px solid rgba(250,204,21,.18);border-radius:20px;padding:28px;transition:.25s}
.hub-card:hover{transform:translateY(-5px);border-color:#8cff00}.hub-card b{font-size:22px;color:#8cff00}.hub-card p{color:#cbd5e1;margin-top:10px}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal.show{display:flex}
.modal-card{width:430px;background:#0f172a;border:1px solid rgba(250,204,21,.3);border-radius:24px;padding:30px;position:relative;box-shadow:0 30px 100px rgba(0,0,0,.65)}
.modal-close{position:absolute;right:18px;top:14px;background:none;border:0;color:#fff;font-size:30px;cursor:pointer}
.modal-card h2{color:#8cff00;font-size:28px;margin-bottom:8px}.modal-card p{color:#cbd5e1;margin-bottom:18px}
.social{width:100%;padding:14px;border-radius:12px;margin-bottom:10px;border:0;font-weight:900;color:#fff;opacity:.7}
.google{background:#2563eb}.facebook{background:#1877f2}.discord{background:#5865f2}
.divider{text-align:center;color:#64748b;margin:18px 0;position:relative}
.modal-form input{width:100%;padding:14px;margin-bottom:10px;border-radius:10px;border:1px solid #334155;background:#020617;color:#fff}
.modal-form button{width:100%;padding:14px;border-radius:10px;border:0;background:#8cff00;color:#000;font-weight:900}
.create-link{display:block;text-align:center;margin-top:16px;color:#8cff00;font-weight:900}

.auth-section{min-height:100vh;padding:130px 20px;display:flex;justify-content:center}
.auth-card{width:430px;background:#0f172a;border:1px solid rgba(250,204,21,.25);border-radius:20px;padding:30px}
.auth-card h2{color:#8cff00;text-align:center;margin-bottom:22px}.auth-card input{width:100%;padding:14px;margin-bottom:12px;background:#020617;border:1px solid #334155;color:#fff;border-radius:10px}.auth-card button{width:100%;padding:14px;background:#8cff00;color:#000;border:0;border-radius:10px;font-weight:900}.auth-card p{text-align:center;color:#cbd5e1;margin-top:16px}.auth-card a{color:#8cff00}

.chat-shell{min-height:100vh;padding-top:78px;display:grid;grid-template-columns:280px 1fr;background:#020617}
.chat-sidebar{background:#05070d;border-right:1px solid rgba(250,204,21,.15);padding:28px}
.chat-sidebar h3{color:#8cff00;margin-bottom:20px}.chat-sidebar a{display:block;padding:12px;border-radius:10px;color:#cbd5e1;margin-bottom:8px}.chat-sidebar a.active,.chat-sidebar a:hover{background:#111827;color:#8cff00}
.chat-main{padding:28px}.chat-header{border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:18px;margin-bottom:18px}.chat-header h2{color:#8cff00}.chat-header p{color:#94a3b8}
.notice.big{background:#111827;border:1px solid rgba(250,204,21,.2);padding:30px;border-radius:18px;color:#cbd5e1}
.chat-messages.pro{height:calc(100vh - 230px);overflow-y:auto;background:#05070d;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:20px}
.chat-msg{display:grid;grid-template-columns:46px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.chat-avatar{width:46px;height:46px;border-radius:50%;background:#8cff00;color:#000;display:grid;place-items:center;font-weight:900}
.chat-content strong{color:#fff}.chat-content span{color:#64748b;font-size:12px;margin-left:8px}.chat-content p{color:#e5e7eb;margin-top:6px}
.chat-form.pro{display:flex;gap:10px;margin-top:14px}.chat-form.pro input{flex:1;padding:15px;background:#05070d;border:1px solid #334155;color:#fff;border-radius:12px}.chat-form.pro button{width:140px;background:#8cff00;color:#000;border:0;border-radius:12px;font-weight:900}

@media(max-width:900px){.nav{display:none}.hero-pro{grid-template-columns:1fr;padding-top:120px}.hero-content h1{font-size:42px}.chat-shell{grid-template-columns:1fr}.chat-sidebar{display:none}}

/* DISCORD CHAT STYLE */
.discord-msg{
    display:flex;
    gap:14px;
    padding:14px 16px;
    border-radius:16px;
    margin-bottom:10px;
    background:rgba(17,24,39,.78);
    border:1px solid rgba(250,204,21,.08);
    transition:.18s;
}

.discord-msg:hover{
    background:rgba(31,41,55,.95);
    border-color:rgba(250,204,21,.22);
}

.discord-avatar{
    width:46px;
    height:46px;
    border-radius:50%;
    object-fit:cover;
    flex:0 0 46px;
    border:2px solid #8cff00;
    background:#111827;
}

.discord-body{
    flex:1;
    min-width:0;
}

.discord-meta{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:5px;
}

.discord-meta strong{
    color:#58a6ff;
    font-size:15px;
    font-weight:900;
}

.discord-meta small{
    color:#8b949e;
    font-size:12px;
}

.discord-level{
    background:#8cff00;
    color:#000;
    padding:2px 7px;
    border-radius:999px;
    font-size:10px;
    font-weight:900;
}

.discord-text{
    color:#e5e7eb;
    font-size:15px;
    line-height:1.45;
    word-break:break-word;
}

.chat-messages.pro{
    height:calc(100vh - 245px);
    overflow-y:auto;
    background:#05070d;
    border:1px solid rgba(250,204,21,.12);
    border-radius:20px;
    padding:18px;
    box-shadow:inset 0 0 35px rgba(0,0,0,.45);
}

.chat-messages.pro::-webkit-scrollbar{
    width:8px;
}

.chat-messages.pro::-webkit-scrollbar-thumb{
    background:#8cff00;
    border-radius:99px;
}

.chat-form.pro{
    display:flex;
    gap:12px;
    margin-top:14px;
    background:#05070d;
    border:1px solid rgba(250,204,21,.15);
    padding:12px;
    border-radius:18px;
}

.chat-form.pro input{
    flex:1;
    background:#111827;
    color:#fff;
    border:1px solid #334155;
    border-radius:14px;
    padding:15px;
    outline:none;
}

.chat-form.pro input:focus{
    border-color:#8cff00;
}

.chat-form.pro button{
    background:#8cff00;
    color:#000;
    border:0;
    border-radius:14px;
    padding:0 24px;
    font-weight:900;
    cursor:pointer;
}

.chat-form.pro button:hover{
    filter:brightness(1.08);
}

.chat-sidebar{
    background:#05070d;
    border-right:1px solid rgba(250,204,21,.15);
}

.chat-main{
    background:linear-gradient(180deg,#020617,#05070d);
}

.chat-header{
    background:rgba(17,24,39,.75);
    border:1px solid rgba(250,204,21,.12);
    border-radius:18px;
    padding:18px;
}

@media(max-width:700px){
    .chat-form.pro{
        flex-direction:column;
    }

    .chat-form.pro button{
        padding:14px;
    }

    .discord-msg{
        padding:12px;
    }
}


/* RADIO PLAYER */
.radio-player{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:999;
    background:#111827;
    border:1px solid rgba(250,204,21,.35);
    border-radius:18px;
    padding:14px 16px;
    width:290px;
    box-shadow:0 15px 45px rgba(0,0,0,.55);
}

.radio-title{
    color:#8cff00;
    font-weight:900;
    margin-bottom:8px;
}

.radio-player audio{
    width:100%;
}

@media(max-width:700px){
    .radio-player{
        left:12px;
        right:12px;
        bottom:12px;
        width:auto;
    }
}


/* MINI MUSIC PLAYER FIX */
.radio-player{
    position:fixed !important;
    right:18px !important;
    bottom:18px !important;
    width:320px !important;
    max-height:420px !important;
    z-index:9999 !important;
    background:linear-gradient(180deg,#111827,#020617) !important;
    border:1px solid rgba(250,204,21,.45) !important;
    border-radius:22px !important;
    padding:14px !important;
    box-shadow:0 18px 60px rgba(0,0,0,.70) !important;
    overflow:hidden !important;
}

.radio-title{
    color:#8cff00 !important;
    font-size:15px !important;
    font-weight:900 !important;
    margin-bottom:6px !important;
}

.radio-current{
    color:#fff !important;
    font-size:13px !important;
    font-weight:700 !important;
    line-height:1.3 !important;
    margin-bottom:10px !important;
}

.radio-player audio{
    width:100% !important;
    height:36px !important;
    margin-bottom:8px !important;
}

.radio-next{
    width:100% !important;
    padding:10px !important;
    border:0 !important;
    border-radius:12px !important;
    background:#8cff00 !important;
    color:#000 !important;
    font-weight:900 !important;
    cursor:pointer !important;
    margin-bottom:10px !important;
}

.radio-list{
    max-height:190px !important;
    overflow-y:auto !important;
    padding-right:4px !important;
}

.radio-list button{
    width:100% !important;
    background:#0f172a !important;
    color:#e5e7eb !important;
    border:1px solid rgba(255,255,255,.08) !important;
    border-radius:12px !important;
    padding:8px 10px !important;
    margin-bottom:6px !important;
    cursor:pointer !important;
    text-align:left !important;
}

.radio-list button.active{
    background:#1e293b !important;
    border-color:#8cff00 !important;
}

.radio-list b{
    display:block !important;
    color:#8cff00 !important;
    font-size:12px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

.radio-list span{
    display:block !important;
    color:#cbd5e1 !important;
    font-size:11px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

.radio-list::-webkit-scrollbar{
    width:6px;
}

.radio-list::-webkit-scrollbar-thumb{
    background:#8cff00;
    border-radius:99px;
}

@media(max-width:700px){
    .radio-player{
        left:10px !important;
        right:10px !important;
        bottom:10px !important;
        width:auto !important;
        max-height:330px !important;
    }
}


/* COMMUNITY FEED */
.community-shell{
    max-width:920px;
    margin:34px auto 130px;
    padding:0 18px;
}

.community-head{
    background:linear-gradient(135deg,#111827,#020617);
    border:1px solid rgba(250,204,21,.18);
    border-radius:24px;
    padding:24px;
    margin-bottom:18px;
    box-shadow:0 16px 45px rgba(0,0,0,.35);
}

.community-head h1{
    color:#8cff00;
    margin:0 0 6px;
}

.community-head p{
    color:#cbd5e1;
    margin:0;
}

.community-form{
    background:#0f172a;
    border:1px solid rgba(250,204,21,.22);
    border-radius:22px;
    padding:16px;
    margin-bottom:18px;
    display:grid;
    gap:12px;
}

.community-form textarea,
.community-form select,
.community-form input{
    width:100%;
    background:#020617;
    color:#fff;
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    padding:13px;
    outline:none;
}

.community-form textarea{
    min-height:95px;
    resize:vertical;
}

.community-form button{
    background:#8cff00;
    color:#000;
    border:0;
    border-radius:14px;
    padding:14px;
    font-weight:900;
    cursor:pointer;
}

.community-feed{
    display:grid;
    gap:16px;
}

.community-post{
    background:linear-gradient(180deg,#111827,#020617);
    border:1px solid rgba(250,204,21,.16);
    border-radius:24px;
    padding:16px;
    box-shadow:0 16px 50px rgba(0,0,0,.38);
}

.community-user{
    display:flex;
    align-items:center;
    gap:12px;
}

.community-user img{
    width:48px;
    height:48px;
    border-radius:50%;
    border:2px solid #8cff00;
    object-fit:cover;
}

.community-user strong{
    display:block;
    color:#58a6ff;
    font-size:15px;
}

.community-user span{
    color:#94a3b8;
    font-size:12px;
}

.community-server{
    display:inline-block;
    margin-top:12px;
    color:#000;
    background:#8cff00;
    border-radius:999px;
    padding:5px 10px;
    font-size:12px;
    font-weight:900;
}

.community-text{
    color:#e5e7eb;
    line-height:1.5;
    margin:14px 0;
}

.community-media{
    width:100%;
    max-height:520px;
    object-fit:contain;
    background:#000;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.08);
}

.community-actions{
    display:flex;
    gap:10px;
    margin-top:12px;
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:12px;
}

.community-actions button{
    flex:1;
    background:#0f172a;
    color:#cbd5e1;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    padding:10px;
    cursor:pointer;
    font-weight:800;
}

.community-actions button:hover{
    color:#8cff00;
    border-color:#8cff00;
}

.community-empty{
    background:#0f172a;
    border:1px solid rgba(250,204,21,.18);
    border-radius:18px;
    padding:18px;
    color:#cbd5e1;
    text-align:center;
}

@media(max-width:700px){
    .community-actions{
        flex-direction:column;
    }
}


/* COMMUNITY FEED */
.community-shell{
    max-width:920px;
    margin:34px auto 130px;
    padding:0 18px;
}

.community-head{
    background:linear-gradient(135deg,#111827,#020617);
    border:1px solid rgba(250,204,21,.18);
    border-radius:24px;
    padding:24px;
    margin-bottom:18px;
    box-shadow:0 16px 45px rgba(0,0,0,.35);
}

.community-head h1{
    color:#8cff00;
    margin:0 0 6px;
}

.community-head p{
    color:#cbd5e1;
    margin:0;
}

.community-form{
    background:#0f172a;
    border:1px solid rgba(250,204,21,.22);
    border-radius:22px;
    padding:16px;
    margin-bottom:18px;
    display:grid;
    gap:12px;
}

.community-form textarea,
.community-form select,
.community-form input{
    width:100%;
    background:#020617;
    color:#fff;
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    padding:13px;
    outline:none;
}

.community-form textarea{
    min-height:95px;
    resize:vertical;
}

.community-form button{
    background:#8cff00;
    color:#000;
    border:0;
    border-radius:14px;
    padding:14px;
    font-weight:900;
    cursor:pointer;
}

.community-feed{
    display:grid;
    gap:16px;
}

.community-post{
    background:linear-gradient(180deg,#111827,#020617);
    border:1px solid rgba(250,204,21,.16);
    border-radius:24px;
    padding:16px;
    box-shadow:0 16px 50px rgba(0,0,0,.38);
}

.community-user{
    display:flex;
    align-items:center;
    gap:12px;
}

.community-user img{
    width:48px;
    height:48px;
    border-radius:50%;
    border:2px solid #8cff00;
    object-fit:cover;
}

.community-user strong{
    display:block;
    color:#58a6ff;
    font-size:15px;
}

.community-user span{
    color:#94a3b8;
    font-size:12px;
}

.community-server{
    display:inline-block;
    margin-top:12px;
    color:#000;
    background:#8cff00;
    border-radius:999px;
    padding:5px 10px;
    font-size:12px;
    font-weight:900;
}

.community-text{
    color:#e5e7eb;
    line-height:1.5;
    margin:14px 0;
}

.community-media{
    width:100%;
    max-height:520px;
    object-fit:contain;
    background:#000;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.08);
}

.community-actions{
    display:flex;
    gap:10px;
    margin-top:12px;
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:12px;
}

.community-actions button{
    flex:1;
    background:#0f172a;
    color:#cbd5e1;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    padding:10px;
    cursor:pointer;
    font-weight:800;
}

.community-actions button:hover{
    color:#8cff00;
    border-color:#8cff00;
}

.community-empty{
    background:#0f172a;
    border:1px solid rgba(250,204,21,.18);
    border-radius:18px;
    padding:18px;
    color:#cbd5e1;
    text-align:center;
}

@media(max-width:700px){
    .community-actions{
        flex-direction:column;
    }
}


.community-comments{
    display:none;
    margin-top:12px;
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:12px;
}

.community-comments.open{
    display:block;
}

.community-comment{
    background:#0f172a;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    padding:9px 11px;
    margin-bottom:8px;
}

.community-comment b{
    color:#8cff00;
    margin-right:6px;
}

.community-comment span{
    color:#e5e7eb;
}

.comment-form{
    display:flex;
    gap:8px;
    margin-top:10px;
}

.comment-form input{
    flex:1;
    background:#020617;
    color:#fff;
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    padding:11px;
}

.comment-form button{
    background:#8cff00;
    color:#000;
    border:0;
    border-radius:12px;
    padding:0 16px;
    font-weight:900;
}


.server-stats{
    max-width:900px;
    margin:22px auto 34px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.server-stats div{
    background:#0f172a;
    border:1px solid rgba(250,204,21,.28);
    border-radius:18px;
    padding:18px;
    text-align:center;
    box-shadow:0 14px 40px rgba(0,0,0,.35);
}

.server-stats b{
    display:block;
    color:#8cff00;
    font-size:30px;
    line-height:1;
}

.server-stats span{
    color:#cbd5e1;
    font-weight:800;
    font-size:13px;
}

@media(max-width:700px){
    .server-stats{
        grid-template-columns:repeat(2,1fr);
    }
}
.avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    object-fit:cover;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f2b705;
    color:#000;
    font-weight:700;
    overflow:hidden;
}

.avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.avatar-img{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    border-radius:50% !important;
    object-fit:cover !important;
    border:2px solid #8cff00 !important;
    display:block !important;
}

.profile-pill .avatar{
    width:42px;
    height:42px;
}

.chat-avatar-img,
.chat-msg img{
    width:56px !important;
    height:56px !important;
    min-width:56px !important;
    max-width:56px !important;
    max-height:56px !important;
    border-radius:14px !important;
    object-fit:cover !important;
    border:2px solid #8cff00 !important;
    display:block !important;
}

.chat-avatar{
    width:56px !important;
    height:56px !important;
    min-width:56px !important;
    border-radius:14px !important;
}

.chat-msg{
    align-items:flex-start !important;
}


/* =======================================================
   VenezuelaServers Wallpaper
   ======================================================= */

html,
body{
    min-height:100%;
}

body{
    background-color:#050505;
    background-image:url('/assets/images/bg-wallpaper.webp');
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    background-attachment:fixed;
}


/* VS-WALLPAPER-INICIO */

/* Fondo general de toda la página */
html,
body {
    min-height: 100%;
}

body {
    background-color: #02040a !important;
    background-image:
        linear-gradient(
            rgba(2, 4, 10, 0.50),
            rgba(2, 4, 10, 0.72)
        ),
        url('/assets/images/bg-wallpaper.webp?v=20260710') !important;

    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

/* Fondo de la portada principal */
.hero,
.home-hero,
.hero-section,
#hero,
main > section:first-child {
    background-color: transparent !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(2, 4, 10, 0.68) 0%,
            rgba(2, 4, 10, 0.42) 48%,
            rgba(2, 4, 10, 0.62) 100%
        ),
        url('/assets/images/bg-wallpaper.webp?v=20260710') !important;

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

/* Mantener visibles los textos y botones */
.hero-content,
.hero-inner,
.hero-container,
main > section:first-child > * {
    position: relative;
    z-index: 2;
}

/* Ajuste para teléfonos */
@media (max-width: 768px) {
    body {
        background-attachment: scroll !important;
        background-position: center top !important;
    }

    .hero,
    .home-hero,
    .hero-section,
    #hero,
    main > section:first-child {
        background-position: 48% center !important;
        min-height: 720px;
    }
}

/* VS-WALLPAPER-FIN */

/* VS-GLASS-THEME-INICIO */

/* =========================================================
   VENEZUELASERVERS — WALLPAPER + GLASS GAMING THEME
   ========================================================= */

:root {
    --vs-yellow: #8cff00;
    --vs-yellow-soft: rgba(255, 208, 0, 0.42);

    --vs-bg-dark: rgba(2, 5, 12, 0.32);
    --vs-bg-card: rgba(8, 15, 30, 0.48);
    --vs-bg-card-hover: rgba(10, 20, 40, 0.62);

    --vs-border: rgba(255, 208, 0, 0.30);
    --vs-border-soft: rgba(255, 255, 255, 0.10);

    --vs-text: #ffffff;
    --vs-text-soft: #d8e1f0;
}

/* Página completa */
html {
    min-height: 100%;
    background: #02040a;
}

body {
    min-height: 100%;
    margin: 0;

    color: var(--vs-text);

    background-color: #02040a !important;

    background-image:
        linear-gradient(
            180deg,
            rgba(1, 3, 8, 0.18) 0%,
            rgba(1, 3, 8, 0.30) 45%,
            rgba(1, 3, 8, 0.48) 100%
        ),
        url('/assets/images/bg-wallpaper.webp?v=glass20260710') !important;

    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

/* Evitar que wrappers grandes tapen el wallpaper */
main,
.main,
.page,
.page-wrapper,
.site-wrapper,
.content-wrapper,
.home,
.home-page,
.servers-page,
.server-page,
section {
    background-color: transparent !important;
}

/* =========================================================
   BARRA SUPERIOR
   ========================================================= */

header,
.header,
.site-header,
.navbar,
.topbar,
nav {
    background: rgba(2, 5, 12, 0.74) !important;

    border-bottom: 1px solid rgba(255, 208, 0, 0.18) !important;

    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.30);
}

/* =========================================================
   PORTADA PRINCIPAL
   ========================================================= */

.hero,
.home-hero,
.hero-section,
.banner,
.home-banner,
#hero,
main > section:first-child {
    position: relative;

    min-height: 540px;

    background:
        linear-gradient(
            90deg,
            rgba(2, 5, 12, 0.50) 0%,
            rgba(2, 5, 12, 0.25) 45%,
            rgba(2, 5, 12, 0.38) 100%
        ) !important;

    border-bottom: 1px solid rgba(255, 208, 0, 0.18);

    overflow: hidden;
}

/* Brillo leve sobre la portada */
.hero::before,
.home-hero::before,
.hero-section::before,
.banner::before,
.home-banner::before,
#hero::before,
main > section:first-child::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 18% 18%,
            rgba(255, 208, 0, 0.12),
            transparent 35%
        ),
        radial-gradient(
            circle at 75% 50%,
            rgba(190, 15, 30, 0.12),
            transparent 40%
        );

    z-index: 0;
}

.hero > *,
.home-hero > *,
.hero-section > *,
.banner > *,
.home-banner > *,
#hero > *,
main > section:first-child > * {
    position: relative;
    z-index: 1;
}

/* Texto principal con sombra para que sea legible */
.hero h1,
.home-hero h1,
.hero-section h1,
.banner h1,
.home-banner h1,
#hero h1,
main > section:first-child h1 {
    color: #ffffff !important;

    text-shadow:
        0 3px 4px rgba(0, 0, 0, 0.95),
        0 0 22px rgba(0, 0, 0, 0.65);
}

.hero p,
.home-hero p,
.hero-section p,
.banner p,
.home-banner p,
#hero p,
main > section:first-child p {
    color: #edf3ff !important;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.95);
}

/* =========================================================
   CUADRO “AHORA JUGANDO”
   ========================================================= */

.now-playing,
.playing-now,
.featured-server,
.current-server,
.hero-card,
.status-card,
.server-highlight,
main > section:first-child .card {
    background: rgba(8, 15, 30, 0.42) !important;

    border: 1px solid rgba(255, 208, 0, 0.36) !important;

    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;

    border-radius: 22px !important;
}

/* =========================================================
   SECCIÓN DE SERVIDORES
   ========================================================= */

.servers,
.server-list,
.servers-list,
.servers-grid,
.server-grid,
#servers,
[data-section="servers"] {
    background: transparent !important;
}

/* Cuadros de cada servidor */
.server-card,
.server-item,
.server-box,
.servers-grid > article,
.server-grid > article,
.servers-grid > div,
.server-grid > div {
    position: relative;

    background:
        linear-gradient(
            145deg,
            rgba(10, 19, 38, 0.48),
            rgba(4, 9, 19, 0.36)
        ) !important;

    border: 1px solid rgba(255, 208, 0, 0.26) !important;

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;

    border-radius: 20px !important;

    overflow: hidden;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease;
}

.server-card:hover,
.server-item:hover,
.server-box:hover,
.servers-grid > article:hover,
.server-grid > article:hover,
.servers-grid > div:hover,
.server-grid > div:hover {
    transform: translateY(-5px);

    background:
        linear-gradient(
            145deg,
            rgba(12, 24, 48, 0.65),
            rgba(5, 11, 23, 0.52)
        ) !important;

    border-color: rgba(255, 208, 0, 0.70) !important;

    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.44),
        0 0 24px rgba(255, 208, 0, 0.08) !important;
}

/* Cabecera donde sale el nombre del mapa */
.server-card-header,
.server-map-header,
.map-header,
.server-card .map-image,
.server-item .map-image,
.server-box .map-image {
    background:
        linear-gradient(
            180deg,
            rgba(18, 31, 56, 0.42),
            rgba(9, 17, 34, 0.22)
        ) !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Letras siempre visibles */
.server-card,
.server-card *,
.server-item,
.server-item *,
.server-box,
.server-box *,
.servers-grid > article,
.servers-grid > article *,
.server-grid > article,
.server-grid > article * {
    color: #ffffff;
}

/* Nombres de mapas grandes */
.server-card-header h2,
.server-card-header h3,
.server-map,
.map-name,
.server-card .map-name,
.server-item .map-name,
.server-box .map-name {
    color: rgba(255, 255, 255, 0.30) !important;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.70);
}

/* Nombre del servidor */
.server-card h2,
.server-card h3,
.server-item h2,
.server-item h3,
.server-box h2,
.server-box h3 {
    color: #ffffff !important;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.90);
}

/* Información secundaria */
.server-card p,
.server-item p,
.server-box p,
.server-card span,
.server-item span,
.server-box span {
    text-shadow:
        0 1px 4px rgba(0, 0, 0, 0.90);
}

/* Estado ONLINE */
.online,
.status-online,
.badge-online,
.server-online {
    color: #79ffae !important;

    background: rgba(11, 120, 61, 0.72) !important;

    border: 1px solid rgba(83, 255, 151, 0.18);

    box-shadow:
        0 0 16px rgba(30, 220, 105, 0.10);
}

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

.btn-primary,
.button-primary,
.connect-button,
.btn-connect,
a.btn-primary,
button.btn-primary {
    color: #050505 !important;

    background:
        linear-gradient(
            135deg,
            #ffe13b,
            #ffc400
        ) !important;

    border: 1px solid rgba(255, 227, 77, 0.90) !important;

    box-shadow:
        0 8px 22px rgba(255, 196, 0, 0.18);

    font-weight: 800;

    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        box-shadow 0.18s ease;
}

.btn-primary:hover,
.button-primary:hover,
.connect-button:hover,
.btn-connect:hover,
a.btn-primary:hover,
button.btn-primary:hover {
    transform: translateY(-2px);

    filter: brightness(1.08);

    box-shadow:
        0 12px 30px rgba(255, 196, 0, 0.28);
}

.btn-secondary,
.button-secondary,
.players-button,
.btn-players {
    color: #ffffff !important;

    background: rgba(20, 33, 57, 0.58) !important;

    border: 1px solid rgba(255, 255, 255, 0.12) !important;

    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

/* =========================================================
   RESTO DE TARJETAS Y PANELES
   ========================================================= */

.card,
.panel,
.box,
.widget,
.news-card,
.community-card,
.chat-panel {
    background: rgba(8, 15, 30, 0.46);

    border-color: rgba(255, 208, 0, 0.20);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* El reproductor conserva legibilidad, pero se ve más integrado */
.music-player,
.audio-player,
.player-widget {
    background: rgba(5, 10, 20, 0.76) !important;

    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);

    border-color: rgba(255, 208, 0, 0.45) !important;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.42) !important;
}

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

::-webkit-scrollbar {
    width: 11px;
}

::-webkit-scrollbar-track {
    background: #03060d;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 208, 0, 0.58);
    border-radius: 20px;
    border: 3px solid #03060d;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 208, 0, 0.82);
}

/* =========================================================
   MÓVILES
   ========================================================= */

@media (max-width: 900px) {
    body {
        background-attachment: scroll !important;
        background-position: center top !important;
    }

    .hero,
    .home-hero,
    .hero-section,
    .banner,
    .home-banner,
    #hero,
    main > section:first-child {
        min-height: 650px;

        background:
            linear-gradient(
                180deg,
                rgba(2, 5, 12, 0.38),
                rgba(2, 5, 12, 0.58)
            ) !important;
    }

    .server-card,
    .server-item,
    .server-box,
    .servers-grid > article,
    .server-grid > article,
    .servers-grid > div,
    .server-grid > div {
        background: rgba(8, 15, 30, 0.60) !important;
    }
}

/* VS-GLASS-THEME-FIN */

/* VS-HERO-EFFECTS-INICIO */

/* =========================================================
   VENEZUELASERVERS — EFECTOS ANIMADOS DEL HERO
   ========================================================= */

:root {
    /*
     * Posición aproximada de la punta del arma en el wallpaper.
     * Se puede ajustar después sin modificar JavaScript.
     */
    --vs-muzzle-x: 68%;
    --vs-muzzle-y: 72%;

    --vs-parallax-x: 0px;
    --vs-parallax-y: 0px;
}

/* Hero identificado automáticamente por JavaScript */
.vs-animated-hero {
    isolation: isolate;
    position: relative !important;
    overflow: hidden !important;

    /*
     * Conserva el wallpaper existente y añade movimiento suave.
     */
    background-position:
        calc(50% + var(--vs-parallax-x))
        calc(50% + var(--vs-parallax-y)) !important;

    transition:
        background-position 0.18s ease-out,
        filter 0.25s ease;
}

/* Oscilación muy leve, como respiración */
.vs-animated-hero.vs-hero-alive {
    animation: vsHeroBreathing 7s ease-in-out infinite;
}

@keyframes vsHeroBreathing {
    0%,
    100% {
        filter:
            brightness(1)
            contrast(1.02)
            saturate(1.03);
    }

    50% {
        filter:
            brightness(1.035)
            contrast(1.045)
            saturate(1.08);
    }
}

/* =========================================================
   CAPA DE LUZ CINEMATOGRÁFICA
   ========================================================= */

.vs-hero-lighting {
    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 54% 48%,
            rgba(255, 35, 35, 0.07),
            transparent 27%
        ),
        radial-gradient(
            circle at 45% 38%,
            rgba(20, 80, 255, 0.07),
            transparent 32%
        );

    mix-blend-mode: screen;

    animation: vsLightingPulse 4.8s ease-in-out infinite;
}

@keyframes vsLightingPulse {
    0%,
    100% {
        opacity: 0.55;
    }

    50% {
        opacity: 0.95;
    }
}

/* =========================================================
   DESTELLO DEL DISPARO
   ========================================================= */

.vs-muzzle-flash {
    position: absolute;

    left: var(--vs-muzzle-x);
    top: var(--vs-muzzle-y);

    width: 14px;
    height: 14px;

    z-index: 5;

    pointer-events: none;

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(0.1)
        rotate(-12deg);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #ffffff 0%,
            #fff7a1 16%,
            #ffce19 34%,
            #ff4d00 58%,
            rgba(255, 35, 0, 0) 76%
        );

    box-shadow:
        0 0 10px rgba(255, 255, 255, 1),
        0 0 24px rgba(255, 207, 30, 1),
        0 0 55px rgba(255, 45, 0, 0.95),
        0 0 95px rgba(255, 20, 0, 0.55);
}

/* Forma alargada del fuego */
.vs-muzzle-flash::before,
.vs-muzzle-flash::after {
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;

    transform-origin: left center;

    pointer-events: none;
}

.vs-muzzle-flash::before {
    width: 95px;
    height: 18px;

    transform:
        translate(0, -50%)
        rotate(-7deg);

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 220, 0.95),
            rgba(255, 190, 20, 0.82),
            rgba(255, 40, 0, 0)
        );

    filter: blur(2px);

    clip-path: polygon(
        0 25%,
        100% 50%,
        0 75%
    );
}

.vs-muzzle-flash::after {
    width: 56px;
    height: 48px;

    transform:
        translate(-7px, -50%)
        rotate(-4deg);

    background:
        radial-gradient(
            ellipse at left,
            rgba(255, 255, 220, 0.95),
            rgba(255, 170, 0, 0.55) 40%,
            rgba(255, 30, 0, 0) 75%
        );

    filter: blur(4px);
}

/* Cuando JavaScript activa el disparo */
.vs-animated-hero.vs-firing .vs-muzzle-flash {
    animation: vsMuzzleShot 0.24s ease-out;
}

@keyframes vsMuzzleShot {
    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(0.1)
            rotate(-12deg);
    }

    12% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1.55)
            rotate(-8deg);
    }

    40% {
        opacity: 0.95;
        transform:
            translate(-50%, -50%)
            scale(1)
            rotate(-4deg);
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(0.35)
            rotate(2deg);
    }
}

/* =========================================================
   HUMO DEL ARMA
   ========================================================= */

.vs-gun-smoke {
    position: absolute;

    left: var(--vs-muzzle-x);
    top: var(--vs-muzzle-y);

    width: 48px;
    height: 48px;

    z-index: 4;

    pointer-events: none;

    opacity: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(225, 230, 240, 0.45),
            rgba(120, 130, 145, 0.18) 45%,
            transparent 72%
        );

    filter: blur(8px);

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

.vs-animated-hero.vs-firing .vs-gun-smoke {
    animation: vsGunSmoke 1.65s ease-out;
}

@keyframes vsGunSmoke {
    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(0.2);
    }

    12% {
        opacity: 0.68;
    }

    55% {
        opacity: 0.32;
    }

    100% {
        opacity: 0;
        transform:
            translate(65px, -105px)
            scale(3.2);
    }
}

/* =========================================================
   RETROCESO DEL DISPARO
   ========================================================= */

.vs-animated-hero.vs-firing {
    animation:
        vsWeaponRecoil 0.24s ease-out,
        vsHeroBreathing 7s ease-in-out infinite;
}

@keyframes vsWeaponRecoil {
    0% {
        background-position:
            calc(50% + var(--vs-parallax-x))
            calc(50% + var(--vs-parallax-y));
    }

    28% {
        background-position:
            calc(50% + var(--vs-parallax-x) - 5px)
            calc(50% + var(--vs-parallax-y) + 2px);
    }

    55% {
        background-position:
            calc(50% + var(--vs-parallax-x) + 2px)
            calc(50% + var(--vs-parallax-y) - 1px);
    }

    100% {
        background-position:
            calc(50% + var(--vs-parallax-x))
            calc(50% + var(--vs-parallax-y));
    }
}

/* Flash ambiental que ilumina la pantalla durante el tiro */
.vs-shot-light {
    position: absolute;
    inset: 0;

    z-index: 3;

    pointer-events: none;

    opacity: 0;

    background:
        radial-gradient(
            circle at var(--vs-muzzle-x) var(--vs-muzzle-y),
            rgba(255, 232, 145, 0.32),
            rgba(255, 65, 0, 0.12) 22%,
            transparent 53%
        );
}

.vs-animated-hero.vs-firing .vs-shot-light {
    animation: vsShotLight 0.28s ease-out;
}

@keyframes vsShotLight {
    0% {
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* =========================================================
   PARTÍCULAS
   ========================================================= */

.vs-particle-layer {
    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    overflow: hidden;
}

.vs-particle {
    position: absolute;

    width: var(--particle-size, 3px);
    height: var(--particle-size, 3px);

    left: var(--particle-x, 50%);
    bottom: -15px;

    border-radius: 50%;

    opacity: 0;

    background: var(--particle-color, #ff3030);

    box-shadow:
        0 0 8px var(--particle-color, #ff3030);

    animation:
        vsParticleRise
        var(--particle-duration, 8s)
        linear
        var(--particle-delay, 0s)
        infinite;
}

@keyframes vsParticleRise {
    0% {
        opacity: 0;
        transform:
            translate3d(0, 20px, 0)
            scale(0.45);
    }

    16% {
        opacity: 0.72;
    }

    70% {
        opacity: 0.34;
    }

    100% {
        opacity: 0;
        transform:
            translate3d(
                var(--particle-drift, 35px),
                -620px,
                0
            )
            scale(1.25);
    }
}

/* =========================================================
   PROTEGER EL CONTENIDO
   ========================================================= */

.vs-animated-hero > *:not(.vs-hero-effect) {
    position: relative;
    z-index: 10;
}

/* =========================================================
   MÓVILES
   ========================================================= */

@media (max-width: 900px) {
    :root {
        --vs-muzzle-x: 69%;
        --vs-muzzle-y: 70%;
    }

    .vs-particle:nth-child(n+15) {
        display: none;
    }

    .vs-muzzle-flash::before {
        width: 68px;
    }
}

/* Personas que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
    .vs-animated-hero,
    .vs-animated-hero *,
    .vs-particle {
        animation: none !important;
        transition: none !important;
    }
}

/* VS-HERO-EFFECTS-FIN */

/* =========================================================
   VenezuelaServers - Modal de inicio de sesión
   ========================================================= */

#loginModal.modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

#loginModal.modal.active,
#loginModal.modal.show {
    display: flex;
}

#loginModal .modal-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 32px;
    border: 1px solid rgba(255, 204, 0, 0.38);
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(255, 204, 0, 0.10), transparent 32%),
        linear-gradient(145deg, #121b31 0%, #0b1222 100%);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.65),
        0 0 35px rgba(255, 204, 0, 0.08);
}

#loginModal .modal-card h2 {
    margin: 0 42px 7px 0;
    color: #8cff00;
    font-size: 29px;
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -0.5px;
}

#loginModal .modal-card > p {
    margin: 0 0 23px;
    color: #aeb8cc;
    font-size: 15px;
    line-height: 1.5;
}

#loginModal .modal-close {
    position: absolute;
    top: 17px;
    right: 17px;
    width: 39px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
    transition: 0.2s ease;
}

#loginModal .modal-close:hover {
    color: #0b1222;
    background: #8cff00;
    border-color: #8cff00;
    transform: rotate(90deg);
}

#loginModal .social-login-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 11px;
}

#loginModal .social {
    box-sizing: border-box;
    width: 100%;
    min-height: 55px;
    display: grid;
    grid-template-columns: 38px 1fr 20px;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 14px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    text-align: left;
    text-decoration: none;
    opacity: 1;
    overflow: hidden;
    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

#loginModal .social:hover {
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
    filter: brightness(1.1);
}

#loginModal .social.google {
    background: linear-gradient(135deg, #ffffff, #edf1f7);
    color: #1c2433;
    border-color: rgba(255, 255, 255, 0.8);
}

#loginModal .social.google:hover {
    color: #1c2433;
    box-shadow: 0 9px 23px rgba(255, 255, 255, 0.13);
}

#loginModal .social.facebook {
    background: linear-gradient(135deg, #1877f2, #0d5dcc);
    box-shadow: 0 8px 22px rgba(24, 119, 242, 0.16);
}

#loginModal .social.discord {
    background: linear-gradient(135deg, #5865f2, #404eed);
    box-shadow: 0 8px 22px rgba(88, 101, 242, 0.16);
}

#loginModal .social-icon {
    width: 37px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 20px;
    font-weight: 900;
}

#loginModal .google-icon {
    color: #4285f4;
    background: #ffffff;
    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.12);
}

#loginModal .facebook-icon,
#loginModal .discord-icon {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
}

#loginModal .facebook-icon {
    font-family: Arial, sans-serif;
    font-size: 25px;
}

#loginModal .social-arrow {
    justify-self: end;
    font-size: 27px;
    line-height: 1;
    opacity: 0.72;
}

#loginModal .divider {
    position: relative;
    display: flex;
    align-items: center;
    margin: 23px 0 19px;
    color: #8792a7;
    font-size: 13px;
    text-align: center;
}

#loginModal .divider::before,
#loginModal .divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
}

#loginModal .divider span {
    padding: 0 12px;
    white-space: nowrap;
}

#loginModal .modal-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#loginModal .modal-form input {
    box-sizing: border-box;
    width: 100%;
    height: 53px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid #36445f;
    border-radius: 13px;
    outline: none;
    background: rgba(4, 10, 23, 0.72);
    color: #ffffff;
    font-size: 15px;
    transition: 0.2s ease;
}

#loginModal .modal-form input::placeholder {
    color: #7f8ba1;
}

#loginModal .modal-form input:focus {
    border-color: #8cff00;
    box-shadow: 0 0 0 3px rgba(255, 208, 0, 0.12);
}

#loginModal .modal-form button {
    width: 100%;
    height: 54px;
    margin-top: 2px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(135deg, #ffd400, #ffb800);
    color: #111827;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(255, 196, 0, 0.18);
    transition: 0.18s ease;
}

#loginModal .modal-form button:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

#loginModal .create-link {
    display: block;
    margin-top: 19px;
    color: #8cff00;
    font-size: 15px;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
}

#loginModal .create-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

@media (max-width: 560px) {
    #loginModal.modal {
        padding: 12px;
        align-items: center;
    }

    #loginModal .modal-card {
        max-width: 100%;
        padding: 27px 19px 23px;
        border-radius: 20px;
    }

    #loginModal .modal-card h2 {
        font-size: 25px;
    }

    #loginModal .social {
        min-height: 53px;
        grid-template-columns: 36px 1fr 17px;
        padding: 8px 11px;
        font-size: 14px;
    }

    #loginModal .social-icon {
        width: 35px;
        height: 35px;
    }
}


/* =========================================================
   VenezuelaServers - Página de Servicios
   ========================================================= */

.services-page {
    min-height: 100vh;
    padding: 34px clamp(18px, 4vw, 70px) 70px;
    background:
        radial-gradient(circle at 83% 5%, rgba(151, 255, 0, 0.09), transparent 28%),
        linear-gradient(180deg, #030604 0%, #070b08 50%, #030503 100%);
    color: #ffffff;
}

.services-hero {
    position: relative;
    min-height: 410px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(330px, 0.85fr);
    align-items: center;
    gap: 35px;
    padding: clamp(35px, 6vw, 80px);
    overflow: hidden;
    border: 1px solid rgba(151, 255, 0, 0.28);
    border-radius: 28px;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.77) 52%, rgba(4, 15, 5, 0.66) 100%),
        repeating-linear-gradient(
            135deg,
            rgba(151, 255, 0, 0.025) 0,
            rgba(151, 255, 0, 0.025) 2px,
            transparent 2px,
            transparent 12px
        );
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.52),
        inset 0 0 60px rgba(151, 255, 0, 0.035);
}

.services-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 78% 40%, rgba(145, 255, 0, 0.16), transparent 19%),
        linear-gradient(110deg, transparent 58%, rgba(151, 255, 0, 0.035));
}

.services-hero-content,
.services-hero-visual {
    position: relative;
    z-index: 2;
}

.services-kicker,
.services-section-heading > span {
    display: inline-block;
    color: #9cff00;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2.4px;
}

.services-hero h1 {
    max-width: 790px;
    margin: 15px 0 18px;
    font-size: clamp(42px, 6vw, 78px);
    line-height: 0.98;
    letter-spacing: -2.5px;
    text-transform: uppercase;
}

.services-hero h1 strong {
    display: block;
    color: #9cff00;
}

.services-hero p {
    max-width: 680px;
    margin: 0;
    color: #c3c9c4;
    font-size: 18px;
    line-height: 1.65;
}

.services-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 28px;
}

.services-primary-btn,
.services-secondary-btn {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 23px;
    border-radius: 13px;
    font-weight: 900;
    text-decoration: none;
    transition: 0.2s ease;
}

.services-primary-btn {
    color: #071000;
    background: linear-gradient(135deg, #aaff00, #73d900);
    box-shadow: 0 13px 32px rgba(125, 237, 0, 0.18);
}

.services-secondary-btn {
    border: 1px solid rgba(255,255,255,0.2);
    color: #ffffff;
    background: rgba(255,255,255,0.055);
}

.services-primary-btn:hover,
.services-secondary-btn:hover {
    transform: translateY(-3px);
    filter: brightness(1.09);
    text-decoration: none;
}

.services-hero-visual {
    min-height: 300px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.services-crosshair {
    position: absolute;
    top: 24px;
    left: 50%;
    width: 220px;
    height: 220px;
    transform: translateX(-50%);
    border: 1px solid rgba(151,255,0,0.23);
    border-radius: 50%;
}

.services-crosshair::before,
.services-crosshair::after {
    content: "";
    position: absolute;
    background: rgba(151,255,0,0.32);
}

.services-crosshair::before {
    width: 1px;
    height: 280px;
    top: -30px;
    left: 50%;
}

.services-crosshair::after {
    width: 280px;
    height: 1px;
    top: 50%;
    left: -30px;
}

.services-status-card {
    width: min(100%, 320px);
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px;
    border: 1px solid rgba(151,255,0,0.32);
    border-radius: 17px;
    background: rgba(3, 9, 4, 0.82);
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

.services-status-card strong,
.services-status-card small {
    display: block;
}

.services-status-card small {
    margin-top: 3px;
    color: #aeb8ae;
}

.services-live-dot {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border-radius: 50%;
    background: #9cff00;
    box-shadow: 0 0 18px rgba(156,255,0,0.8);
}

.services-plans-section,
.additional-services {
    padding-top: 70px;
}

.services-section-heading {
    max-width: 790px;
    margin: 0 auto 34px;
    text-align: center;
}

.services-section-heading h2 {
    margin: 10px 0;
    font-size: clamp(31px, 4vw, 48px);
    line-height: 1.08;
}

.services-section-heading p {
    margin: 0;
    color: #aeb6af;
    font-size: 16px;
    line-height: 1.6;
}

.services-plans-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.service-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 550px;
    padding: 25px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 23px;
    background:
        radial-gradient(circle at top right, rgba(151,255,0,0.08), transparent 32%),
        linear-gradient(160deg, #141a15 0%, #070a08 72%);
    box-shadow: 0 24px 60px rgba(0,0,0,0.33);
    transition: 0.22s ease;
}

.service-plan-card:hover {
    transform: translateY(-7px);
    border-color: rgba(151,255,0,0.55);
}

.service-plan-featured {
    border-color: rgba(151,255,0,0.58);
    box-shadow:
        0 25px 70px rgba(0,0,0,0.4),
        0 0 32px rgba(151,255,0,0.08);
}

.service-recommended {
    position: absolute;
    top: 0;
    right: 0;
    padding: 8px 15px;
    border-radius: 0 22px 0 14px;
    color: #081000;
    background: #9cff00;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.7px;
}

.service-plan-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 23px;
}

.service-location {
    color: #d8ddd9;
    font-size: 13px;
    font-weight: 800;
}

.service-online {
    padding: 7px 11px;
    border-radius: 999px;
    color: #0a1300;
    background: #9cff00;
    font-size: 12px;
    font-weight: 900;
}

.service-plan-icon {
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border: 1px solid rgba(151,255,0,0.34);
    border-radius: 21px;
    color: #9cff00;
    background: rgba(151,255,0,0.07);
    font-size: 35px;
    font-weight: 950;
}

.service-plan-card h3 {
    margin: 0;
    font-size: 25px;
}

.service-price {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    margin: 16px 0 22px;
}

.service-price strong {
    color: #9cff00;
    font-size: 55px;
    line-height: 1;
}

.service-price span {
    padding-bottom: 7px;
    color: #9ba49d;
}

.service-plan-card ul {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 25px;
    padding: 0;
    list-style: none;
}

.service-plan-card li {
    position: relative;
    padding-left: 24px;
    color: #c4cbc5;
    line-height: 1.45;
}

.service-plan-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #9cff00;
    font-weight: 900;
}

.service-plan-card > a {
    min-height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #091200;
    background: linear-gradient(135deg, #aaff00, #72db00);
    font-weight: 900;
    text-decoration: none;
    transition: 0.18s ease;
}

.service-plan-card > a:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.additional-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.additional-services-grid article {
    padding: 25px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    background: linear-gradient(150deg, #101511, #070907);
    transition: 0.2s ease;
}

.additional-services-grid article:hover {
    transform: translateY(-5px);
    border-color: rgba(151,255,0,0.42);
}

.additional-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 17px;
    border-radius: 16px;
    color: #9cff00;
    background: rgba(151,255,0,0.09);
    font-size: 13px;
    font-weight: 950;
}

.additional-services-grid h3 {
    margin: 0 0 10px;
    font-size: 21px;
}

.additional-services-grid p {
    margin: 0;
    color: #aeb6af;
    line-height: 1.65;
}

.services-whatsapp {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 22px;
    margin-top: 65px;
    padding: 27px;
    border: 1px solid rgba(151,255,0,0.42);
    border-radius: 22px;
    background:
        radial-gradient(circle at left, rgba(151,255,0,0.12), transparent 29%),
        #080c08;
}

.services-whatsapp-icon {
    width: 67px;
    height: 67px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #9cff00;
    border-radius: 50%;
    color: #9cff00;
    font-size: 30px;
}

.services-whatsapp span {
    color: #aeb6af;
}

.services-whatsapp h2 {
    margin: 4px 0 0;
    font-size: 25px;
}

.services-whatsapp a {
    min-height: 49px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 21px;
    border-radius: 12px;
    color: #091200;
    background: #9cff00;
    font-weight: 900;
    text-decoration: none;
}

@media (max-width: 1050px) {
    .services-hero {
        grid-template-columns: 1fr;
    }

    .services-hero-visual {
        min-height: 180px;
    }

    .services-crosshair {
        top: -25px;
    }

    .services-plans-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .additional-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .services-page {
        padding: 16px 12px 50px;
    }

    .services-hero {
        min-height: auto;
        padding: 32px 21px;
        border-radius: 21px;
    }

    .services-hero h1 {
        font-size: 39px;
        letter-spacing: -1.4px;
    }

    .services-hero p {
        font-size: 16px;
    }

    .services-hero-visual {
        display: none;
    }

    .services-hero-actions {
        flex-direction: column;
    }

    .services-primary-btn,
    .services-secondary-btn {
        width: 100%;
        box-sizing: border-box;
    }

    .services-plans-grid,
    .additional-services-grid {
        grid-template-columns: 1fr;
    }

    .service-plan-card {
        min-height: auto;
    }

    .services-whatsapp {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .services-whatsapp-icon {
        margin: 0 auto;
    }

    .services-whatsapp a {
        width: 100%;
        box-sizing: border-box;
    }
}


/* =========================================================
   VenezuelaServers - Tema verde profesional 2026
   ========================================================= */

:root {
    --vs-green: #9cff00;
    --vs-green-strong: #74dd00;
    --vs-green-dark: #3f8200;
    --vs-green-soft: rgba(156, 255, 0, 0.12);
    --vs-green-border: rgba(156, 255, 0, 0.40);

    --vs-black: #020503;
    --vs-panel: #071008;
    --vs-panel-light: #0d1710;
    --vs-white: #ffffff;
    --vs-muted: #aeb8b0;
}

/* Fondo y selección */

body {
    background:
        radial-gradient(circle at 80% 0%, rgba(156, 255, 0, 0.055), transparent 28%),
        #020503;
    color: var(--vs-white);
}

::selection {
    color: #071000;
    background: var(--vs-green);
}

/* Barra superior */

.topbar {
    border-bottom: 1px solid rgba(156, 255, 0, 0.20);
    background:
        linear-gradient(90deg, rgba(2, 5, 3, 0.98), rgba(5, 11, 7, 0.98));
    box-shadow:
        0 8px 35px rgba(0, 0, 0, 0.42),
        0 1px 0 rgba(156, 255, 0, 0.04);
}

.brand {
    color: #ffffff;
    text-decoration: none;
}

.brand b {
    color: var(--vs-green) !important;
}

.brand-mark {
    color: #061000 !important;
    background:
        linear-gradient(145deg, #b5ff21, #70d900) !important;
    border: 1px solid rgba(205, 255, 123, 0.38);
    box-shadow:
        0 7px 23px rgba(124, 230, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

/* Menú principal */

.nav a {
    position: relative;
    color: #e8ede9 !important;
    text-decoration: none;
    transition:
        color 0.18s ease,
        text-shadow 0.18s ease;
}

.nav a:hover {
    color: var(--vs-green) !important;
    text-shadow: 0 0 16px rgba(156, 255, 0, 0.35);
}

.nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 0;
    height: 2px;
    border-radius: 999px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--vs-green), transparent);
    box-shadow: 0 0 12px rgba(156, 255, 0, 0.65);
    transition: width 0.2s ease;
}

.nav a:hover::after {
    width: 100%;
}

/* Botón iniciar sesión */

.signin {
    border: 1px solid rgba(181, 255, 33, 0.35) !important;
    color: #071000 !important;
    background:
        linear-gradient(135deg, #b0ff17, #72dc00) !important;
    box-shadow:
        0 10px 28px rgba(112, 220, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);
    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        box-shadow 0.18s ease;
}

.signin:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow:
        0 15px 35px rgba(112, 220, 0, 0.28),
        0 0 22px rgba(156, 255, 0, 0.10);
}

/* Usuario conectado */

.profile-pill {
    border: 1px solid rgba(156, 255, 0, 0.30) !important;
    background:
        linear-gradient(145deg, rgba(17, 31, 20, 0.93), rgba(6, 13, 8, 0.93)) !important;
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.34),
        inset 0 0 22px rgba(156, 255, 0, 0.025);
}

.profile-pill:hover {
    border-color: rgba(156, 255, 0, 0.65) !important;
}

.profile-pill .avatar,
.profile-pill .avatar-img {
    border: 2px solid var(--vs-green) !important;
    box-shadow:
        0 0 0 3px rgba(156, 255, 0, 0.10),
        0 0 17px rgba(156, 255, 0, 0.22);
}

.profile-pill .avatar {
    background:
        linear-gradient(145deg, #9cff00, #458f00) !important;
    color: #071000 !important;
}

.logout {
    border: 1px solid rgba(156, 255, 0, 0.38) !important;
    color: #061000 !important;
    background:
        linear-gradient(135deg, #afff19, #72dc00) !important;
    box-shadow: 0 9px 26px rgba(112, 220, 0, 0.18);
    transition:
        transform 0.18s ease,
        filter 0.18s ease;
}

.logout:hover {
    color: #061000 !important;
    transform: translateY(-2px);
    filter: brightness(1.08);
}

/* Hero principal */

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.12), transparent 45%),
        radial-gradient(circle at 82% 40%, rgba(156, 255, 0, 0.055), transparent 27%);
}

.hero .eyebrow,
.hero-kicker {
    color: var(--vs-green) !important;
}

.hero h1 strong,
.hero h1 span {
    color: inherit;
}

.hero p {
    color: #e3e8e4;
}

/* Botones generales amarillos */

.btn-primary,
.primary-btn,
.hero .btn:first-of-type,
.hero-actions a:first-child,
a.yellow,
button.yellow {
    border-color: rgba(156, 255, 0, 0.36) !important;
    color: #071000 !important;
    background:
        linear-gradient(135deg, #b0ff18, #72dc00) !important;
    box-shadow:
        0 12px 29px rgba(112, 220, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.btn-primary:hover,
.primary-btn:hover,
.hero .btn:first-of-type:hover,
.hero-actions a:first-child:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}

/* Tarjeta Ahora jugando */

.now-playing,
.server-highlight,
.hero-server-card {
    border-color: rgba(156, 255, 0, 0.30) !important;
    background:
        radial-gradient(circle at top right, rgba(156, 255, 0, 0.075), transparent 34%),
        linear-gradient(145deg, rgba(12, 25, 15, 0.91), rgba(6, 12, 8, 0.93)) !important;
    box-shadow:
        0 24px 55px rgba(0, 0, 0, 0.35),
        inset 0 0 30px rgba(156, 255, 0, 0.022);
}

.now-playing h2,
.now-playing h3,
.server-highlight h2,
.server-highlight h3,
.hero-server-card h2,
.hero-server-card h3 {
    color: var(--vs-green) !important;
}

/* Títulos y detalles destacados */

.section-title,
.section-kicker,
.highlight,
.accent,
.text-yellow {
    color: var(--vs-green) !important;
}

/* Modal login verde */

#loginModal .modal-card {
    border-color: rgba(156, 255, 0, 0.40) !important;
    background:
        radial-gradient(circle at top right, rgba(156, 255, 0, 0.10), transparent 32%),
        linear-gradient(145deg, #101b12 0%, #071008 100%) !important;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.70),
        0 0 42px rgba(156, 255, 0, 0.07) !important;
}

#loginModal .modal-card h2 {
    color: var(--vs-green) !important;
}

#loginModal .modal-close {
    border-color: rgba(156, 255, 0, 0.22) !important;
}

#loginModal .modal-close:hover {
    color: #061000 !important;
    border-color: var(--vs-green) !important;
    background: var(--vs-green) !important;
}

#loginModal .modal-form input:focus {
    border-color: var(--vs-green) !important;
    box-shadow: 0 0 0 3px rgba(156, 255, 0, 0.12) !important;
}

#loginModal .modal-form button {
    color: #071000 !important;
    background:
        linear-gradient(135deg, #afff17, #72dc00) !important;
    box-shadow: 0 10px 28px rgba(112, 220, 0, 0.19) !important;
}

#loginModal .create-link {
    color: var(--vs-green) !important;
}

/* Tarjetas generales */

.card,
.server-card,
.community-card,
.chat-box,
.panel-card {
    border-color: rgba(156, 255, 0, 0.18) !important;
    background:
        linear-gradient(145deg, rgba(13, 24, 15, 0.93), rgba(5, 11, 7, 0.95)) !important;
}

.card:hover,
.server-card:hover,
.community-card:hover {
    border-color: rgba(156, 255, 0, 0.42) !important;
}

/* Scrollbar verde */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #030604;
}

::-webkit-scrollbar-thumb {
    border: 2px solid #030604;
    border-radius: 999px;
    background:
        linear-gradient(180deg, #9cff00, #4d9b00);
}

::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(180deg, #b4ff2a, #68ce00);
}

/* Responsivo */

@media (max-width: 800px) {
    .topbar {
        background: rgba(3, 7, 4, 0.98);
    }

    .nav a::after {
        display: none;
    }
}


/* =========================================================
   Corrección final: eliminar amarillos restantes
   ========================================================= */

/* Hero principal */
.hero .eyebrow,
.hero .section-kicker,
.hero .kicker,
.hero .subtitle-label {
    color: #9cff00 !important;
}

.hero .btn,
.hero a.btn,
.hero button,
.hero-actions a,
.hero-actions button {
    border-color: rgba(156, 255, 0, 0.45) !important;
}

.hero .btn:first-child,
.hero-actions a:first-child,
.hero .primary,
.hero .btn-primary {
    color: #071000 !important;
    background: linear-gradient(135deg, #b1ff1d, #70d900) !important;
    box-shadow:
        0 12px 30px rgba(112, 220, 0, 0.24),
        0 0 18px rgba(156, 255, 0, 0.12) !important;
}

/* Tarjeta ahora jugando */
.now-playing h2,
.now-playing h3,
.hero-server-card h2,
.hero-server-card h3,
.server-highlight h2,
.server-highlight h3 {
    color: #9cff00 !important;
}

.now-playing,
.hero-server-card,
.server-highlight {
    border-color: rgba(156, 255, 0, 0.38) !important;
}

/* Tarjetas de servidores */
.server-card,
.server-item,
.server-box {
    border-color: rgba(156, 255, 0, 0.28) !important;
}

.server-card:hover,
.server-item:hover,
.server-box:hover {
    border-color: rgba(156, 255, 0, 0.65) !important;
}

.server-card .connect,
.server-card .connect-btn,
.server-card a[href^="steam://"],
.server-card button:first-of-type,
.server-item .connect,
.server-item .connect-btn {
    color: #071000 !important;
    border-color: rgba(156, 255, 0, 0.45) !important;
    background: linear-gradient(135deg, #b1ff1d, #70d900) !important;
    box-shadow: 0 10px 26px rgba(112, 220, 0, 0.20) !important;
}

.server-card .connect:hover,
.server-card .connect-btn:hover,
.server-card a[href^="steam://"]:hover,
.server-item .connect:hover,
.server-item .connect-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}

/* Botones generales que aún tengan amarillo */
button,
.button,
.btn {
    transition: 0.18s ease;
}

button[style*="yellow"],
button[style*="#ffc"],
button[style*="#ffd"],
a[style*="yellow"],
a[style*="#ffc"],
a[style*="#ffd"] {
    color: #071000 !important;
    background: #9cff00 !important;
}

/* Bordes amarillos restantes */
[style*="border-color: #8cff00"],
[style*="border-color:#ff"],
[style*="border: 1px solid yellow"],
[style*="border:1px solid yellow"] {
    border-color: rgba(156, 255, 0, 0.45) !important;
}

/* Texto amarillo restante */
[style*="color: #8cff00"],
[style*="color:#ffd"],
[style*="color:#ffc"] {
    color: #9cff00 !important;
}

/* Estados online */
.online,
.status-online,
.server-online,
.badge-online {
    color: #d7ffc4 !important;
    border-color: rgba(0, 255, 106, 0.35) !important;
    background: linear-gradient(135deg, #0f7d3f, #075f2d) !important;
}

/* Scrollbar */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #9cff00, #4f9f00) !important;
}

/* Modal */
#loginModal .modal-card h2,
#loginModal .create-link {
    color: #9cff00 !important;
}

#loginModal .modal-form button {
    background: linear-gradient(135deg, #b1ff1d, #70d900) !important;
}

/* Perfil y salir */
.logout,
.signin {
    background: linear-gradient(135deg, #b1ff1d, #70d900) !important;
}

/* Servicios */
.services-page,
.services-page * {
    --service-accent: #9cff00;
}

/* Forzar cualquier variable amarilla antigua */
:root {
    --yellow: #9cff00 !important;
    --gold: #9cff00 !important;
    --accent: #9cff00 !important;
    --primary: #9cff00 !important;
    --brand: #9cff00 !important;
}


/* =========================================================
   VenezuelaServers — Corrección definitiva verde/blanco
   ========================================================= */

:root {
    --vs-accent: #8cff00 !important;
    --vs-accent-2: #65cf00 !important;
    --vs-accent-soft: rgba(140, 255, 0, .12) !important;
    --vs-accent-border: rgba(140, 255, 0, .42) !important;
}

/* Texto superior del inicio */
.hero-kicker,
.hero .eyebrow,
.hero-content > span,
.hero-content .label,
.home-hero .eyebrow {
    color: #8cff00 !important;
}

/* Ahora jugando */
.now-playing h2,
.now-playing h3,
.now-playing-title,
.featured-server h2,
.featured-server h3,
.hero-server-card h2,
.hero-server-card h3 {
    color: #8cff00 !important;
}

.now-playing,
.featured-server,
.hero-server-card {
    border-color: rgba(140, 255, 0, .40) !important;
}

/* Botones principales */
.hero a:first-of-type,
.hero-content a:first-of-type,
.hero-actions a:first-child,
.btn-primary,
.connect-btn,
.server-connect,
a.connect,
button.connect {
    color: #061000 !important;
    border-color: rgba(140, 255, 0, .48) !important;
    background: linear-gradient(135deg, #9dff00, #65cf00) !important;
    box-shadow: 0 10px 28px rgba(101, 207, 0, .22) !important;
}

/* Tarjetas de servidores */
.server-card,
.server-box,
.server-item {
    border-color: rgba(140, 255, 0, .28) !important;
}

.server-card:hover,
.server-box:hover,
.server-item:hover {
    border-color: rgba(140, 255, 0, .62) !important;
}

/* Centro VenezuelaServers */
.community-preview .eyebrow,
.community-preview > span,
.community-home > span,
.community-section > span,
.community-kicker,
.community-label {
    color: #8cff00 !important;
}

.community-preview h2,
.community-home h2,
.community-section h2,
.community-title {
    color: #8cff00 !important;
}

/* Tarjetas Chat Global, Noticias, Foro y Top Players */
.community-preview article h3,
.community-home article h3,
.home-community-card h3,
.feature-card h3,
.quick-card h3 {
    color: #8cff00 !important;
}

.community-preview article,
.community-home article,
.home-community-card,
.feature-card,
.quick-card {
    border-color: rgba(140, 255, 0, .25) !important;
}

.community-preview article:hover,
.community-home article:hover,
.home-community-card:hover,
.feature-card:hover,
.quick-card:hover {
    border-color: rgba(140, 255, 0, .55) !important;
}

/* Chat */
.chat-sidebar h3,
.chat-sidebar strong,
.chat-brand,
.chat-title,
.chat-header h2,
.chat-header h3,
.chat-layout h2,
.chat-layout h3 {
    color: #8cff00 !important;
}

.chat-sidebar a.active,
.chat-sidebar .active,
.chat-channel.active,
.channel.active {
    color: #8cff00 !important;
    border-color: rgba(140, 255, 0, .35) !important;
    background: rgba(140, 255, 0, .10) !important;
}

.chat-sidebar {
    border-color: rgba(140, 255, 0, .20) !important;
}

.chat-header,
.chat-box,
.chat-messages,
.chat-panel {
    border-color: rgba(140, 255, 0, .25) !important;
}

.chat-message .avatar,
.message-avatar {
    border-color: #8cff00 !important;
    box-shadow: 0 0 15px rgba(140, 255, 0, .20) !important;
}

/* Campos y botón del chat */
.chat-form input,
.chat-form textarea,
.chat-input {
    border-color: rgba(140, 255, 0, .25) !important;
}

.chat-form input:focus,
.chat-form textarea:focus,
.chat-input:focus {
    border-color: #8cff00 !important;
    box-shadow: 0 0 0 3px rgba(140, 255, 0, .10) !important;
}

.chat-form button,
.chat-send,
.send-message {
    color: #061000 !important;
    border-color: #8cff00 !important;
    background: linear-gradient(135deg, #9dff00, #65cf00) !important;
}

/* Etiquetas y títulos amarillos genéricos */
.kicker,
.eyebrow,
.section-label,
.section-kicker,
.small-title,
.accent-title,
.title-accent {
    color: #8cff00 !important;
}

/* Bordes antiguos dorados */
.hero-card,
.info-card,
.content-card,
.chat-card,
.community-card {
    border-color: rgba(140, 255, 0, .24) !important;
}

/* Scrollbar */
html {
    scrollbar-color: #8cff00 #030604;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #9dff00, #4c9f00) !important;
}

/* Perfil */
.profile-pill {
    border-color: rgba(140, 255, 0, .40) !important;
}

.profile-pill .avatar,
.profile-pill .avatar-img {
    border-color: #8cff00 !important;
}

/* Botón Salir */
.logout {
    color: #071000 !important;
    border-color: rgba(140, 255, 0, .45) !important;
    background: linear-gradient(135deg, #9dff00, #65cf00) !important;
}

/* =========================================================
   Eliminar amarillos por variables antiguas
   ========================================================= */

:root {
    --yellow: #8cff00 !important;
    --yellow-2: #65cf00 !important;
    --gold: #8cff00 !important;
    --accent-yellow: #8cff00 !important;
    --primary-yellow: #8cff00 !important;
    --brand-yellow: #8cff00 !important;
}


/* =========================================================
   VenezuelaServers — Verde final sin amarillo
   ========================================================= */

:root {
    --vs-final-green: #8cff00;
    --vs-final-green-dark: #60c900;
    --vs-final-green-border: rgba(140, 255, 0, 0.42);
}

/* Inicio */
.hero .eyebrow,
.hero-kicker,
.hero-content > span,
.hero-content .kicker,
.home-kicker {
    color: var(--vs-final-green) !important;
}

.now-playing h1,
.now-playing h2,
.now-playing h3,
.now-playing-title,
.hero-server-card h1,
.hero-server-card h2,
.hero-server-card h3 {
    color: var(--vs-final-green) !important;
}

/* Centro VenezuelaServers */
.community-kicker,
.community-preview > span,
.community-preview .eyebrow,
.community-home > span,
.home-community > span {
    color: var(--vs-final-green) !important;
}

.community-preview h2,
.community-home h2,
.home-community h2,
.community-title {
    color: var(--vs-final-green) !important;
}

/* Chat Global, Noticias, Foro y Top Players */
.community-preview article h3,
.community-home article h3,
.home-community article h3,
.quick-card h3,
.feature-card h3 {
    color: var(--vs-final-green) !important;
}

/* Página Comunidad */
.community-page h1,
.community-page h2,
.community-page h3,
.community-header h1,
.community-header h2,
.community-header h3,
.community-title,
.community-title * {
    color: var(--vs-final-green) !important;
}

.community-page button[type="submit"],
.community-form button,
#communityForm button,
button.publish,
.publish-button {
    color: #061000 !important;
    border-color: var(--vs-final-green) !important;
    background: linear-gradient(
        135deg,
        var(--vs-final-green),
        var(--vs-final-green-dark)
    ) !important;
    box-shadow: 0 10px 28px rgba(96, 201, 0, 0.22) !important;
}

/* Chat */
.chat-sidebar h1,
.chat-sidebar h2,
.chat-sidebar h3,
.chat-header h1,
.chat-header h2,
.chat-header h3,
.chat-title,
.chat-brand {
    color: var(--vs-final-green) !important;
}

.chat-sidebar a.active,
.chat-channel.active,
.channel.active {
    color: var(--vs-final-green) !important;
    border-color: var(--vs-final-green-border) !important;
    background: rgba(140, 255, 0, 0.10) !important;
}

/* Botones principales */
.connect-btn,
.server-connect,
.server-card a[href^="steam://"],
.hero .btn-primary,
.hero-actions a:first-child,
.community-form button,
button[type="submit"] {
    color: #061000 !important;
    border-color: var(--vs-final-green-border) !important;
    background: linear-gradient(
        135deg,
        var(--vs-final-green),
        var(--vs-final-green-dark)
    ) !important;
}

/* Bordes de las tarjetas */
.community-preview article,
.community-home article,
.quick-card,
.feature-card,
.community-page > section,
.community-form,
.community-header,
.now-playing {
    border-color: rgba(140, 255, 0, 0.28) !important;
}

/* Texto genérico anteriormente amarillo */
.text-yellow,
.yellow-text,
.gold-text,
.accent-yellow,
.kicker,
.eyebrow,
.section-kicker,
.section-label {
    color: var(--vs-final-green) !important;
}


/* =========================================================
   VenezuelaServers — Contador de visitas
   ========================================================= */

.vs-visit-counter {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 8000;

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

    padding: 11px 15px;
    border: 1px solid rgba(140, 255, 0, 0.42);
    border-radius: 16px;

    background:
        radial-gradient(
            circle at top left,
            rgba(140, 255, 0, 0.12),
            transparent 45%
        ),
        rgba(4, 11, 6, 0.94);

    box-shadow:
        0 14px 38px rgba(0, 0, 0, 0.52),
        0 0 20px rgba(140, 255, 0, 0.06);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.vs-visit-icon {
    width: 37px;
    height: 37px;

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

    border-radius: 11px;
    color: #061000;
    background: linear-gradient(135deg, #9dff00, #61ca00);

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

    box-shadow: 0 7px 18px rgba(97, 202, 0, 0.20);
}

.vs-visit-info > span {
    display: block;
    margin-bottom: 3px;

    color: #8cff00;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.vs-visit-info > div {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.vs-visit-info strong {
    color: #ffffff;
    font-size: 16px;
}

.vs-visit-info small {
    color: #9ca99e;
    font-size: 11px;
}

.vs-visit-info i {
    width: 1px;
    height: 13px;
    margin: 0 5px;
    background: rgba(140, 255, 0, 0.28);
}

@media (max-width: 700px) {
    .vs-visit-counter {
        left: 10px;
        bottom: 10px;
        padding: 9px 11px;
    }

    .vs-visit-icon {
        width: 33px;
        height: 33px;
    }

    .vs-visit-info > span {
        display: none;
    }

    .vs-visit-info strong {
        font-size: 14px;
    }
}


/* =========================================================
   VenezuelaServers — Empresas Miami y Atlanta
   ========================================================= */

.hosting-location {
    position: relative;
}

.hosting-company-badge {
    width: max-content;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin: 0 auto 18px;
    padding: 9px 19px;
    border: 1px solid rgba(140, 255, 0, 0.48);
    border-radius: 999px;
    color: #8cff00;
    background:
        linear-gradient(
            135deg,
            rgba(140, 255, 0, 0.11),
            rgba(140, 255, 0, 0.025)
        );
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 1.7px;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.30),
        0 0 24px rgba(140, 255, 0, 0.07);
}

.hosting-company-badge i {
    width: 1px;
    height: 15px;
    background: rgba(140, 255, 0, 0.45);
}

.hosting-company-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: #8cff00;
    box-shadow: 0 0 13px rgba(140, 255, 0, 0.85);
}

.miami-location .services-section-heading h2 strong {
    color: #8cff00;
}

.hosting-location-divider {
    display: grid;
    grid-template-columns: minmax(30px, 1fr) auto minmax(30px, 1fr);
    align-items: center;
    gap: 17px;
    margin: 75px 0 5px;
}

.hosting-location-divider span {
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(140, 255, 0, 0.55),
            transparent
        );
}

.hosting-location-divider strong {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(140, 255, 0, 0.48);
    border-radius: 14px;
    color: #071000;
    background: linear-gradient(135deg, #9dff00, #61ca00);
    font-size: 15px;
    font-weight: 950;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.35),
        0 0 23px rgba(140, 255, 0, 0.14);
}

/* Atlanta */

.atlanta-location {
    --atlanta-blue: #00b7ff;
    --atlanta-blue-dark: #087cd9;
    --atlanta-blue-border: rgba(0, 183, 255, 0.46);
}

.atlanta-badge {
    color: var(--atlanta-blue);
    border-color: var(--atlanta-blue-border);
    background:
        linear-gradient(
            135deg,
            rgba(0, 183, 255, 0.12),
            rgba(0, 183, 255, 0.025)
        );
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.30),
        0 0 24px rgba(0, 183, 255, 0.08);
}

.atlanta-badge .hosting-company-dot {
    background: var(--atlanta-blue);
    box-shadow: 0 0 13px rgba(0, 183, 255, 0.85);
}

.atlanta-badge i {
    background: var(--atlanta-blue-border);
}

.atlanta-location .services-section-heading > span,
.atlanta-location .services-section-heading h2 strong {
    color: var(--atlanta-blue) !important;
}

.atlanta-plan-card {
    border-color: rgba(0, 183, 255, 0.27) !important;
    background:
        radial-gradient(
            circle at top right,
            rgba(0, 183, 255, 0.08),
            transparent 33%
        ),
        linear-gradient(160deg, #10181d 0%, #060a0d 72%) !important;
}

.atlanta-plan-card:hover {
    border-color: rgba(0, 183, 255, 0.68) !important;
    box-shadow:
        0 25px 65px rgba(0, 0, 0, 0.40),
        0 0 30px rgba(0, 183, 255, 0.08);
}

.atlanta-plan-card .service-plan-icon {
    color: var(--atlanta-blue) !important;
    border-color: var(--atlanta-blue-border) !important;
    background: rgba(0, 183, 255, 0.08) !important;
}

.atlanta-plan-card .service-price strong {
    color: var(--atlanta-blue) !important;
}

.atlanta-plan-card li::before {
    color: var(--atlanta-blue) !important;
}

.atlanta-plan-card .service-online {
    color: #00131c !important;
    background: linear-gradient(
        135deg,
        #21c6ff,
        #008de4
    ) !important;
}

.atlanta-plan-card > a {
    color: #00131c !important;
    background: linear-gradient(
        135deg,
        #23c8ff,
        #0786e4
    ) !important;
    box-shadow: 0 11px 28px rgba(0, 151, 231, 0.20) !important;
}

.atlanta-plan-card .service-recommended {
    color: #00131c !important;
    background: linear-gradient(
        135deg,
        #23c8ff,
        #0786e4
    ) !important;
}

.atlanta-featured {
    border-color: rgba(0, 183, 255, 0.68) !important;
    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.40),
        0 0 34px rgba(0, 183, 255, 0.09) !important;
}

@media (max-width: 700px) {
    .hosting-company-badge {
        padding: 8px 13px;
        gap: 8px;
        font-size: 10px;
        letter-spacing: 1px;
    }

    .hosting-location-divider {
        margin-top: 55px;
    }
}