/* ==========================================================================
   RAZORMU — OVERRIDE OSCURO PARA TEMPLATE ASGARD
   ========================================================================== */

/* ==== BASE ==== */
html, body { background-color:#000 !important; color:#e4e6eb !important; }
a { color:#e4e6eb !important; }
a:hover { color:#ffda8a !important; }
h1, h2, h3 { color:#e4e6eb !important; }

/* Contenedores principales */
.container_web { background-color:#242526 !important; }
.content { color:#e4e6eb !important; }
.sidebar { background:#1b1b1b !important; }

/* ==== PANELS / CARDS ==== */
.panel, .panel-sidebar{
  background:#1b1b1b !important; color:#e4e6eb !important;
  border:1px solid #2a2b2d !important; border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.35); overflow:hidden;
}
.panel-sidebar > .panel-heading{
  background:linear-gradient(180deg,rgba(255,50,20,.12),rgba(255,50,20,0));
  color:#fff !important; border-bottom:1px solid rgba(255,50,20,.25) !important;
  padding:12px 14px;
}
.panel-sidebar .panel-title{
  display:flex; align-items:center; justify-content:space-between;
  font-weight:700; letter-spacing:.3px;
}
.panel-sidebar .panel-title .btn.btn-primary.btn-xs{
  background:#ff3214 !important; border:0 !important; color:#fff !important;
  padding:2px 8px; border-radius:8px; transition:transform .12s, filter .12s;
}
.panel-sidebar .panel-title .btn.btn-primary.btn-xs:hover{
  transform:translateY(-1px); filter:brightness(1.1);
}

/* ==== TABLAS GENERALES ==== */
.panel-sidebar .table{ margin:0; color:#e4e6eb; border-collapse:separate; border-spacing:0; }
.panel-sidebar thead th{
  background:#1a1b1e; color:#eaecef; border-bottom:2px solid #ff3214;
  font-size:12px; text-transform:uppercase; letter-spacing:.6px; padding:12px 10px; white-space:nowrap;
}
.panel-sidebar tbody tr{ background:#131416; transition:background .15s, transform .08s; }
.panel-sidebar tbody tr:nth-child(odd){ background:#15171a; }
.panel-sidebar tbody tr:hover{ background:#1a1c21; transform:translateY(-1px); }
.panel-sidebar td{ border-bottom:1px solid #232428; padding:12px 10px; color:#e4e6eb; }
.panel-sidebar a{ color:#e4e6eb; text-decoration:none; }
.panel-sidebar a:hover{ color:#ffda8a; }

/* ==== FORMULARIOS ==== */
input[type=text],input[type=password],input[type=number],
.form input,.form select,textarea{
  background:#3a3b3c !important; border:1px solid #4e4f50 !important; color:#e4e6eb !important;
}
::placeholder{ color:#ccc !important; }
.form button, .button, .panel-sidebar .btn{
  background:#3a3b3c !important; border:1px solid #4e4f50 !important; color:#e4e6eb !important;
}
.form button:hover, .panel-sidebar .btn:hover{ filter:brightness(1.12); }

/* ==== SERVER INFO (bloque lateral base) ==== */
.serverBlock{ background-color:#1b1b1b !important; }
.server-name{ color:#e4e6eb !important; }
.server-online{ color:#e4e6eb !important; }
.server-online span{ color:#00ff00 !important; }
.server-progressbar{ background:#3a3b3c !important; }
.server-progressbar span{ background:#00ff00 !important; }

/* ==== EVENTOS ==== */
.sidebarBlock .sidebarTitle h2{ color:#e4e6eb !important; }
.sidebarBlock .top-list{ border-bottom:1px solid #232428; }
.sidebarBlock .smalltext{ color:#aab0b6 !important; }

/* ==== BANNERS DERECHA ==== */
.download-img{ display:block; width:300px; margin-left:-25px; margin-bottom:10px; }
.download-img img{ display:block; width:100%; height:auto; border-radius:5px; box-shadow:0 0 10px #000; }
.download-img img:hover{ filter:brightness(120%); }

/* (Se eliminaron reglas de FOOTER para no interferir con tu nuevo footer) */

/* ==========================================================================
   RANKING — tabla moderna + numeración automática
   ========================================================================== */
.rank-table-modern thead th:first-child{ border-top-left-radius:12px; }
.rank-table-modern thead th:last-child{ border-top-right-radius:12px; }
.rank-table-modern .rank-num{
  width:52px; font-weight:800; text-align:center; color:#ffd9d3;
  background:linear-gradient(180deg,rgba(255,50,20,.22),rgba(255,50,20,.06));
  border:1px solid rgba(255,50,20,.3); border-radius:999px; padding:6px 0;
}
.rank-table-modern .rank-player a{ color:#eaf2ff; font-weight:600; }
.rank-table-modern .rank-player a:hover{ color:#ffda8a; }
.rank-table-modern .rank-class{ font-weight:600; color:#b6c2ff; }
.rank-table-modern .rank-class::before{ content:"●"; font-size:10px; margin-right:6px; color:#7eb9ff; opacity:.9; }
.rank-table-modern .rank-level{ font-weight:800; color:#fff; }

/* Numeración automática */
.rank-table-modern{ counter-reset:rownum; }
.rank-table-modern tbody tr{ counter-increment:rownum; }
.rank-table-modern tbody td:first-child{
  position:relative; padding-left:56px; text-align:left;
}
.rank-table-modern tbody td:first-child::before{
  content:"# " counter(rownum);
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  min-width:42px; text-align:center; font-weight:800; color:#ffd9d3;
  background:linear-gradient(180deg,rgba(255,50,20,.22),rgba(255,50,20,.06));
  border:1px solid rgba(255,50,20,.3); border-radius:999px; padding:4px 8px;
}

/* Panel de rankings: compacta y legible */
.panel.panel-sidebar .table{ width:100%; border-collapse:separate; border-spacing:0; }
.panel.panel-sidebar .table thead th{
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; opacity:.85;
  border-bottom:1px solid rgba(255,255,255,.15); vertical-align:middle;
}
.panel.panel-sidebar .table td, .panel.panel-sidebar .table th{
  padding:8px 10px; vertical-align:middle; white-space:nowrap;
}
.panel.panel-sidebar .table tbody tr:not(:last-child) td{ border-bottom:1px dashed rgba(255,255,255,.08); }
.col-rank{ width:32px; text-align:left; }
.col-flag{ width:46px; text-align:center; }
.col-class{ width:52px; text-align:center; }
.col-player{ width:auto; text-overflow:ellipsis; overflow:hidden; max-width:0; }
.col-resets{ width:70px; text-align:center; }
.col-flag img, .col-class img{ display:block; margin:0 auto; image-rendering:-webkit-optimize-contrast; }

/* Extra estética panel */
.panel.panel-sidebar{
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,80,80,.06),rgba(0,0,0,.25));
  border:1px solid rgba(255,80,80,.18);
  box-shadow:0 6px 22px rgba(0,0,0,.25) inset, 0 4px 16px rgba(0,0,0,.25);
}
.rank-table{ table-layout:fixed; width:100%; }
.rank-table th, .rank-table td{ padding:6px 8px; vertical-align:middle; font-size:12px; }
.rank-table thead th{ text-transform:uppercase; font-weight:600; opacity:.85; }
.rank-table .text-center{ text-align:center; }
.rank-table td img{ display:block; margin:0 auto; }
.rank-table td{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ==========================================================================
   ACCOUNT PANEL (LOGIN + USERCP)
   ========================================================================== */
.sidebarBlock.sidebarBlockLogin,
.sidebarBlock.sidebarBlockLogin .widget.light-fon.login-block{
  position:relative;
  background:linear-gradient(180deg,#1a1b1d 0%, #101112 100%) !important;
  border:1px solid rgba(255,50,20,.25) !important; border-radius:16px !important;
  box-shadow:0 8px 28px rgba(0,0,0,.6), 0 0 12px rgba(255,50,20,.18);
  padding:18px 16px !important; overflow:hidden; margin-bottom:16px;
}
.sidebarBlock.sidebarBlockLogin::before,
.sidebarBlock.sidebarBlockLogin .widget.light-fon.login-block::before{
  content:""; position:absolute; inset:-36px;
  background:radial-gradient(circle at top center,rgba(255,50,20,.15),transparent 70%); pointer-events:none;
}
.sidebarBlock.sidebarBlockLogin h3{
  position:relative; margin:0 0 14px; padding:0 10px 10px; text-align:center;
  color:#fff !important; font-weight:900; font-size:18px; text-transform:uppercase; letter-spacing:.8px;
}
.sidebarBlock.sidebarBlockLogin h3::before{ content:"🔑"; margin-right:6px; font-size:16px; }
.sidebarBlock.sidebarBlockLogin h3::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:42px; height:2px; background:#ff3214; border-radius:2px;
}

/* Login form */
#login_form.form{ position:relative; z-index:1; display:grid; gap:10px; }
#login_form .formGroup input[type="text"],
#login_form .formGroup input[type="password"]{
  background:#2a2b2f !important; border:1px solid #3d3e42 !important; color:#e4e6eb !important;
  border-radius:10px; padding:10px 12px; width:100%; transition:border .15s, box-shadow .15s;
}
#login_form .formGroup input[type="text"]:focus,
#login_form .formGroup input[type="password"]:focus{
  border-color:#ff3214 !important; box-shadow:0 0 6px rgba(255,50,20,.35); outline:none;
}
#login_form .formGroup-button .button-login{
  width:100%; background:linear-gradient(180deg,rgba(255,50,20,.25),rgba(255,50,20,.08)) !important;
  border:1px solid rgba(255,50,20,.35) !important; color:#fff !important;
  font-weight:800; text-transform:uppercase; letter-spacing:.4px;
  border-radius:10px; padding:10px 0; transition:transform .12s, filter .12s, box-shadow .12s;
}
#login_form .formGroup-button .button-login:hover{
  filter:brightness(1.1); transform:translateY(-1px); box-shadow:0 8px 18px rgba(255,50,20,.18);
}
#login_form .formGroup-links{ margin-top:4px; text-align:center; font-size:12px; color:#aaa !important; }
#login_form .formGroup-links a{ color:#ffda8a !important; text-decoration:none; }
#login_form .formGroup-links a:hover{ color:#fff !important; }

/* USERCP (tarjeta general) */
.usercp-card{
  position:relative; background:linear-gradient(180deg,#1a1b1d 0%, #101112 100%) !important;
  border:1px solid rgba(255,50,20,.25) !important; border-radius:16px !important;
  box-shadow:0 8px 28px rgba(0,0,0,.6), 0 0 12px rgba(255,50,20,.18);
  padding:18px 16px !important; margin:0 0 20px !important; color:#e4e6eb !important; overflow:hidden;
}
.usercp-card::before{
  content:""; position:absolute; inset:-36px;
  background:radial-gradient(circle at top center,rgba(255,50,20,.15),transparent 70%); pointer-events:none;
}
.usercp-card h1, .usercp-card h2{
  text-align:center; color:#fff !important; margin:0 0 14px; font-weight:900; letter-spacing:.6px;
}
.usercp-card h1::after, .usercp-card h2::after{
  content:""; display:block; width:44px; height:2px; margin:8px auto 0; background:#ff3214; border-radius:2px;
}
.usercp-card table{ width:100%; border-collapse:separate; border-spacing:0; }
.usercp-card th, .usercp-card td{
  background:transparent !important; border:0 !important; padding:10px 0; color:#e4e6eb !important;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.usercp-card tr:last-child td{ border-bottom:0; }
.usercp-card th{ text-transform:uppercase; font-size:12px; font-weight:700; opacity:.9; }
.usercp-card .btn, .usercp-card a.btn, .usercp-card input[type=button].btn{
  background:linear-gradient(180deg,rgba(255,50,20,.25),rgba(255,50,20,.08)) !important;
  border:1px solid rgba(255,50,20,.35) !important; color:#fff !important;
  border-radius:8px; padding:6px 10px; font-size:12px; transition:transform .12s, filter .12s;
}
.usercp-card .btn:hover{ filter:brightness(1.1); transform:translateY(-1px); }
.usercp-card .usercp-characters{ display:flex; flex-wrap:wrap; gap:16px; }
.usercp-card .char-box{
  background:rgba(0,0,0,.35); border:1px solid rgba(255,50,20,.25);
  border-radius:10px; padding:10px; width:150px; text-align:center; transition:transform .12s, filter .12s;
}
.usercp-card .char-box:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.usercp-card .char-box img{ max-width:100%; border-radius:6px; margin-bottom:6px; }
.usercp-card .char-box .char-name{ font-weight:700; color:#ffda8a; }
.usercp-card .char-box .char-info{ font-size:12px; color:#bfc5cc; }

/* ==========================================================================
   SERVER INFO CARD (lateral moderno)
   ========================================================================== */
.serverinfo-card{
  box-sizing:border-box; width:100%; max-width:330px; margin:0 auto 20px; padding:18px 16px;
  background:linear-gradient(180deg,#1a1b1d 0%, #101112 100%); border:1px solid rgba(255,50,20,.25);
  border-radius:16px; box-shadow:0 8px 28px rgba(0,0,0,.55); color:#e4e6eb; position:relative; overflow:hidden;
}
.serverinfo-card::before{
  content:""; position:absolute; inset:-36px;
  background:radial-gradient(circle at 50% -10%,rgba(255,50,20,.14),transparent 65%); pointer-events:none; z-index:0;
}
.serverinfo-card .sidebarTitle{ position:relative; text-align:center; margin:0 0 14px; }
.serverinfo-card .sidebarTitle img,
.serverinfo-card .sidebarTitle .title-logo{ display:none !important; }
.serverinfo-card .sidebarTitle h2{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding-bottom:6px;
  font-size:16px; font-weight:900; text-transform:uppercase; color:#fff; letter-spacing:.8px; z-index:1;
}
.serverinfo-card .sidebarTitle h2::before{ content:"⚔️"; font-size:18px; transform:translateY(1px); }
.serverinfo-card .sidebarTitle h2::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:42px; height:2px; background:#ff3214; border-radius:2px;
}
.serverinfo-list{ display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none; position:relative; z-index:1; }
.serverinfo-list li{ display:flex; align-items:center; justify-content:space-between; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.serverinfo-list li:last-child{ border-bottom:0; }
.serverinfo-list .srv-label{ display:flex; align-items:center; gap:8px; font-size:13px; color:#cfd6dd; white-space:nowrap; }
.serverinfo-list .srv-label i{ width:16px; text-align:center; color:#ff7b14; opacity:.9; }
.serverinfo-list .srv-value{ font-weight:700; font-size:13px; text-align:right; white-space:nowrap; }
.srv-pill{ display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; line-height:1; }
.pill-exp{ background:#ff321422; border:1px solid #ff3214aa; color:#fff; }
.pill-drop{ background:#1473ff22; border:1px solid #1473ffaa; color:#cfe4ff; }
.pill-online{ background:#00c87822; border:1px solid #00c878aa; color:#d9ffe8; }
.srv-bar{ height:14px; margin-top:6px; background:#232428; border:1px solid #303135; border-radius:999px; position:relative; overflow:hidden; }
.srv-bar span{
  position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,#ff3214,#ff7b14);
  box-shadow:0 0 10px rgba(255,50,20,.5); border-radius:999px; transition:width .35s ease;
}
.srv-bar b{
  position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:12px; font-weight:800; color:#fff;
  text-shadow:0 0 6px rgba(0,0,0,.6);
}

/* ==========================================================================
   PARCHE ANTI-SCROLL (estable)
   ========================================================================== */
html{ overflow-y:scroll; overflow-x:hidden; }
body{ overflow-x:hidden; }
.header_web{ overflow:hidden; position:relative; }
.wrapper_web, .container_web{ overflow-x:hidden; }
.left-sidebar, .right-sidebar{ overflow-x:hidden; }
.download, .serverBlock, .soc-block, .download-img{ margin-left:0 !important; }
.slider{ width:600px; max-width:100%; overflow:hidden; }
.slider .slides{ width:100%; }
.slider .slides .slide{ width:600px; max-width:100%; }
.swiper-slider, .swiper-carousel{ overflow:hidden; }
.top-list, .news{ margin:0 !important; }
.top-list:hover, .news:hover{ margin:0 !important; padding-left:10px !important; padding-right:10px !important; }
.rank-table{ table-layout:fixed; width:100%; }
.rank-table td{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rank-table .col-rank{ width:28px; text-align:center; white-space:normal; overflow:visible; text-overflow:clip; }
.rank-table .col-resets{ width:64px; text-align:right; }

/* ==========================================================================
   SERVER HERO — centrado y responsivo
   ========================================================================== */
.server-hero{
  display:flex !important; justify-content:center !important; align-items:center !important;
  width:100% !important; margin:18px auto 12px !important; transform:none !important;
  overflow:hidden; pointer-events:none;
}
.serverBlock.hero{
  position:static !important; margin:0 auto !important; left:auto !important; right:auto !important;
  transform:none !important; width:100% !important; max-width:min(720px,92vw) !important;
  padding:14px 16px !important; border-radius:12px !important;
  background:linear-gradient(180deg,rgba(20,20,22,.62),rgba(12,12,14,.50)) !important;
  border:1px solid rgba(255,50,20,.28) !important;
  box-shadow:0 14px 30px rgba(0,0,0,.44), 0 0 0 1px rgba(0,0,0,.25) inset;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  pointer-events:auto;
}
.serverBlock.hero .server{
  position:relative; z-index:1; display:flex !important; flex-direction:column !important;
  align-items:center !important; justify-content:center !important; gap:8px !important;
  width:100% !important; margin:0 auto !important; padding:0 !important;
}
.serverBlock.hero .server-name{
  position:relative; font-size:16px !important; letter-spacing:1px; margin:2px 0 4px !important;
}
.serverBlock.hero .server-name::after{
  content:""; position:absolute; left:50%; bottom:-4px; transform:translateX(-50%);
  width:36px; height:2px; background:#ff3214; border-radius:2px;
}
.serverBlock.hero .server-progressbar{
  height:10px !important; width:96% !important; max-width:560px !important;
  margin:6px auto 4px !important; background:#2a2b2d !important; border:1px solid #303135 !important;
  border-radius:999px !important; overflow:hidden !important;
}
.serverBlock.hero .server-progressbar > span{
  display:block !important; height:100% !important; min-width:10px;
  background:linear-gradient(90deg,#ff3214,#ff7b14) !important;
  border-radius:999px !important; box-shadow:0 0 10px rgba(255,50,20,.6) !important;
  transition:width .35s ease !important;
}
.serverBlock.hero .server-online{
  font-size:14px !important; padding:6px 10px !important;
  background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.08) !important;
  border-radius:10px !important;
}
@media (max-width:992px){
  .serverBlock.hero{ max-width:92vw !important; }
}
@media (max-width:768px){
  .server-hero{ margin:16px auto 10px !important; }
  .serverBlock.hero{ padding:12px 12px !important; }
}

/* ==========================================================================
   ALINEACIÓN SIDEBARS
   ========================================================================== */
.right-sidebar { overflow: hidden; }
.right-sidebar .download,
.right-sidebar .serverBlock,
.right-sidebar .soc-block,
.right-sidebar .download-img { margin-left: -25px !important; }

.left-sidebar.sidebar{ padding-left:0 !important; padding-right:0 !important; }
.left-sidebar .sidebarBlock,
.left-sidebar .panel.panel-sidebar,
.left-sidebar .serverinfo-card{ width:100% !important; margin-left:0 !important; margin-right:0 !important; }
.left-sidebar .table{ width:100% !important; }

/* ==========================================================================
   TOP MENU — RazorMU v2
   ========================================================================== */
.topMenu{
  position: sticky; top: 0; z-index: 200; width: 100%;
  background: linear-gradient(180deg, rgba(20,20,22,.80), rgba(20,20,22,.65));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,50,20,.25);
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
}
.topMenu-wrapper{
  max-width: 1200px; margin: 0 auto; padding: 8px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.topMenu-brand{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
.topMenu-brand img{ height:28px; width:auto; display:block; }
.topMenu-brand .brand-text{ color:#ffda8a; font-weight:800; letter-spacing:.6px; text-transform:uppercase; font-size:14px; }

.menu{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.menu > li{ position:relative; }
.menu > li > a{
  display:block; padding:12px 16px; color:#e4e6eb; text-decoration:none;
  text-transform:uppercase; font-weight:700; letter-spacing:.4px; position:relative; transition:color .15s ease;
}
.menu > li > a::after{
  content:""; position:absolute; left:16px; right:16px; bottom:6px; height:2px;
  background:#ff3214; transform:scaleX(0); transform-origin:left center; transition:transform .22s ease; opacity:.9;
}
.menu > li > a:hover{ color:#fff; }
.menu > li > a:hover::after{ transform:scaleX(1); }
.menu > li > a.active, .menu > li > a[aria-current="page"]{ color:#fff; }
.menu > li > a.active::after, .menu > li > a[aria-current="page"]::after{ transform:scaleX(1); }

.nav-toggle{
  display:none; width:44px; height:40px; border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.04); border-radius:10px; align-items:center; justify-content:center; gap:4px; cursor:pointer;
}
.nav-toggle .bar{ display:block; width:22px; height:2px; background:#e4e6eb; border-radius:2px; margin:3px auto; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){ transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }
.sr-only{ position:absolute !important; width:1px;height:1px; padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0; }

@media (max-width: 992px){
  .nav-toggle{ display: inline-flex; }
  .menu{
    position: absolute; left: 0; right: 0; top: 100%;
    background: rgba(12,12,14,.96); border-bottom: 1px solid rgba(255,50,20,.22);
    display: none; flex-direction: column; padding: 8px 10px; gap: 4px;
  }
  .menu.is-open{ display: flex; }
  .menu > li > a{ padding: 12px 14px; border-radius: 8px; }
  .menu > li > a::after{ left: 14px; right: 14px; bottom: 6px; }
}

/* ==========================================================================
   SLIDER MODERNO (fade) – cuadrado, menos oscuro
   ========================================================================== */
.slider{
  position: relative; width: 100%; max-width: 100%; height: 327px;
  border-radius: 0; overflow: hidden; background: #101112; box-shadow: none; margin: 0 auto 12px;
}
.slider .slides{ position: relative; width: 100%; height: 100%; }
.slider .slide{
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; visibility: hidden; transition: opacity .45s ease;
}
.slider .slide.active{ opacity: 1; visibility: visible; }
/* capa más ligera */
.slider .slide::before{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45));
  pointer-events:none;
}
.slider .slide .slide-info{
  position: absolute; left: 0; right: 0; bottom: 22px; padding: 0 18px; z-index: 2; text-align: center;
}
.slider .slide .slide-text-big{ color: #ffda8a; font-weight: 800; font-size: 32px; line-height: 1.1; margin-bottom: 6px; }
.slider .slide .slide-text p{ color: #fff; font-size: 16px; font-weight: 600; margin: 0; }

.slider .arrows{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.35); cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.slider .arrows:hover{ filter: brightness(1.1); transform: translateY(-50%) scale(1.04); }
.slider .prev{
  left: 10px; background-image: url(../images/arrow-left.png); background-repeat:no-repeat; background-position:center; background-size: 11px 32px;
}
.slider .next{
  right: 10px; background-image: url(../images/arrow-right.png); background-repeat:no-repeat; background-position:center; background-size: 11px 32px;
}
.slider .navigation{
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; z-index: 3; display: flex; gap: 10px;
}
.slider .navigation .dot{
  width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgba(255,255,255,.4);
  box-shadow: 0 0 0 2px rgba(0,0,0,.25) inset; cursor: pointer; transition: transform .15s ease, background .15s ease;
}
.slider .navigation .dot:hover{ transform: scale(1.06); }
.slider .navigation .dot.active{
  background: #ff3214; box-shadow: 0 0 0 2px rgba(255,50,20,.35) inset, 0 0 6px rgba(255,50,20,.45);
}
@media (max-width: 992px){
  .slider{ height: 280px; }
  .slider .slide .slide-text-big{ font-size: 26px; }
  .slider .slide .slide-text p{ font-size: 14px; }
}
@media (max-width: 600px){
  .slider{ height: 220px; }
  .slider .slide .slide-text-big{ font-size: 22px; }
}

/* ==========================================================================
   CARRIL CENTRAL + NOTICIAS (colores de lectura)
   ========================================================================== */
.content-center-main,
.content{
  background: #1a1b1d !important;
  color: #e4e6eb !important;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}

/* Panel de noticias */
.panel-news{
  background:#1b1b1b !important;
  border:1px solid rgba(255,50,20,.25) !important;
  border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.45);
  margin-bottom:20px; overflow:hidden;
}
.panel-news .panel-heading{
  background:linear-gradient(180deg, rgba(255,50,20,.18), rgba(255,50,20,0));
  color:#fff !important; border-bottom:1px solid rgba(255,50,20,.25);
}
.panel-news .panel-body{
  background:#1a1b1d !important; color:#e4e6eb !important;
  padding:14px; line-height:1.6; font-size:15px;
}
.panel-news .panel-heading h3{
  color:#ffda8a !important; font-weight:800; font-size:18px; letter-spacing:.5px;
}
.panel-news .panel-body a{
  color:#ff7b14 !important; text-decoration:none; font-weight:600;
}
.panel-news .panel-body a:hover{ color:#ffd9a1 !important; text-decoration:underline; }
.panel-news .panel-footer{
  background:#151515 !important; color:#aab0b6 !important; font-size:13px;
  border-top:1px solid rgba(255,255,255,.08); padding:8px 12px;
}
/* =========================================================
   RANKINGS — Ajustes finos (v2)
   - Sin desbordes horizontales
   - Cards contenidas
   - Ocultar clases de season alta
   ========================================================= */

/* Contenedor de filtros/clases (se adapta al ancho real del panel: ~600px) */
.rankings-class-filter{
  list-style: none;
  width: 100%;                 /* ⬅️ nada de 680px; ocupa el ancho del panel */
  max-width: 100%;
  box-sizing: border-box;
  margin: 12px auto 18px;
  padding: 10px 12px;

  background: rgba(32, 15, 6, 0.35);
  border: 1px solid rgba(122, 97, 66, 0.35);
  border-radius: 12px;
  box-shadow: inset 0 6px 18px rgba(0,0,0,.25);

  display: grid;
  /* Se arma solo con columnas de al menos 120px sin sobrepasar el ancho */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px 14px;
  align-items: start;
  justify-items: center;
  overflow: hidden;            /* ⬅️ seguridad extra contra desbordes visuales */
}

/* Cada ítem (card) */
.rankings-class-filter > li{
  width: 100%;
  min-width: 0;                /* ⬅️ permite que el grid encoja sin romper */
}

.rankings-class-filter .rankings-class-filter-selection{
  display: block;
  text-align: center;
  text-decoration: none;
  color: #e8ded7;
  font-size: 12.5px;
  width: 100%;
  max-width: 120px;            /* ⬅️ card nunca excede su celda */
  margin-inline: auto;
  padding: 8px 8px 6px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(122, 97, 66, 0.45);
  border-radius: 12px;
  overflow: hidden;            /* ⬅️ corta cualquier parte que se “escape” */
  box-shadow: 0 6px 14px rgba(0,0,0,.3);
}

/* Imagen estrictamente contenida dentro de la card */
.rankings-class-filter .rankings-class-filter-image{
  display: block;
  width: 100%;                 /* ⬅️ ocupa el ancho de la card */
  max-width: 100%;
  height: 92px;                /* ⬅️ alto fijo */
  object-fit: cover;           /* ⬅️ recorta sin deformar */
  border-radius: 10px;
  border: 1px solid rgba(122, 97, 66, 0.55);
  box-shadow: 0 8px 16px rgba(0,0,0,.35);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
  margin: 0 auto 6px;
}

/* Hover sutil */
.rankings-class-filter .rankings-class-filter-selection:hover .rankings-class-filter-image{
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 10px 20px rgba(0,0,0,.45);
}

/* Gris por defecto (como venía desde PHP) */
.rankings-class-filter .rankings-class-filter-grayscale .rankings-class-filter-image{
  filter: grayscale(50%) saturate(90%);
  opacity: .9;
}
.rankings-class-filter .rankings-class-filter-grayscale:hover .rankings-class-filter-image{
  filter: grayscale(0%) saturate(100%);
  opacity: 1;
}

/* ===== Ocultar clases de versiones altas (sin tocar PHP) =====
   En tu orden actual: 
   1 All, 2 Wizards, 3 Knights, 4 Elves, 5 Gladiators, 
   6 Lords, 7 Summoners, 8 Fighters, 9 Lancers, 10 Rune Wizards, 11 Slayers
   Ocultamos 9–11.
*/
.rankings-class-filter > li:nth-child(9),
.rankings-class-filter > li:nth-child(10),
.rankings-class-filter > li:nth-child(11){ display:none !important; }

/* (Opcional) Si cambiara el orden en el futuro, descomenta y usa por alt/title
.rankings-class-filter li:has(img[alt*="Lancer" i]),
.rankings-class-filter li:has(img[alt*="Rune Wizard" i]),
.rankings-class-filter li:has(img[alt*="Slayer" i]){ display:none !important; }
*/

/* ===== Responsivo ===== */
@media (max-width: 1100px){
  .rankings-class-filter{
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  }
  .rankings-class-filter .rankings-class-filter-selection{ max-width: 110px; }
  .rankings-class-filter .rankings-class-filter-image{ height: 86px; }
}
@media (max-width: 560px){
  /* Si el espacio es muy chico, dejamos scroll horizontal suave */
  .rankings-class-filter{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 110px;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: #7a6142 rgba(0,0,0,.3);
  }
  .rankings-class-filter::-webkit-scrollbar{ height: 6px; }
  .rankings-class-filter::-webkit-scrollbar-track{ background: rgba(0,0,0,.15); }
  .rankings-class-filter::-webkit-scrollbar-thumb{ background: #7a6142; border-radius: 999px; }
}
/* Botones principales de descarga */
/* Contenedor principal */
.main-download-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 25px;
  margin: 20px 0 40px;
}

/* Caja de descarga */
.download-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 140px;
  border-radius: 14px;
  text-decoration: none;
  color: #fff !important;
  font-family: "Candara", sans-serif;
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  overflow: hidden;
  position: relative;
}

/* Icono */
.download-box__icon img {
  width: 50px;
  height: auto;
  margin-bottom: 10px;
  filter: brightness(0) invert(1);
}

/* Texto */
.download-box__text {
  text-align: center;
  line-height: 1.3;
}
.download-box__text span {
  display: block;
  font-size: 13px;
  opacity: .85;
}
.download-box__text strong {
  font-size: 18px;
  font-weight: 800;
}

/* Hover efecto */
.download-box:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
  filter: brightness(1.08);
}

/* Colores distintivos */
.download-box.mediafire {
  background: linear-gradient(135deg, #178fff, #0c6cc2);
}
.download-box.mega {
  background: linear-gradient(135deg, #ff1d25, #b60008);
}
.download-box.drive {
  background: linear-gradient(135deg, #0f9d58, #066c3d);
}
/* =========================
   DESCARGAS — TARJETAS MODERNAS
   (Se integra con tu HTML actual)
   ========================= */

/* Panel genérico de descargas (mismo lenguaje visual que los CTA */
.panel.panel-downloads-modern .panel-body {
  background: #131416;
  border: 1px solid #2a2b2d;
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,.35);
  padding: 18px 16px 22px;
}

/* Título del panel */
.panel.panel-downloads-modern .panel-title,
.panel.panel-deps .panel-title {
  color: #fff;
  font-weight: 800;
  letter-spacing: .3px;
  margin: 2px 4px 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.panel.panel-downloads-modern .panel-title::after,
.panel.panel-deps .panel-title::after {
  content: "";
  height: 2px;
  width: 72px;
  background: linear-gradient(90deg, #ff9b4e, #ff3214);
  display: inline-block;
  border-radius: 999px;
}

/* Grilla responsive (auto-fit) */
.downloads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

/* Versión compacta para “Dependencias & Drivers” */
.downloads-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Tarjeta */
.download-card {
  background: radial-gradient(120% 120% at 0% 0%, rgba(255,50,20,.08), rgba(255,50,20,0) 60%),
              #0f1012;
  border: 1px solid #232428;
  border-radius: 12px;
  padding: 14px 14px 16px;
  color: #e4e6eb;
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
}
.download-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
  border-color: rgba(255,50,20,.28);
}

/* Encabezado de la tarjeta */
.download-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

/* Título */
.download-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
}

/* Badge de tamaño */
.download-card__badge {
  background: linear-gradient(180deg, rgba(255,218,138,.18), rgba(255,173,71,.12));
  color: #ffdca3;
  border: 1px solid rgba(255,173,71,.4);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* Descripción */
.download-card__desc {
  margin: 6px 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #cfd3da;
  opacity: .9;
}

/* Acciones */
.download-card__actions {
  display: flex;
  gap: 10px;
}
.download-card__actions.btns-inline {
  flex-wrap: wrap;
}

/* Botón principal dentro de descargas (refina tu .btn-primary existente) */
.panel-downloads .btn.btn-primary.btn-xs,
.panel-downloads-modern .btn.btn-primary.btn-xs,
.panel-deps .btn.btn-primary.btn-xs {
  background: linear-gradient(135deg, #ff7a3d, #ff3214);
  border: 0;
  color: #fff;
  padding: 7px 12px;
  border-radius: 10px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: .2px;
  box-shadow: 0 8px 18px rgba(255,50,20,.28);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.panel-downloads .btn.btn-primary.btn-xs:hover,
.panel-downloads-modern .btn.btn-primary.btn-xs:hover,
.panel-deps .btn.btn-primary.btn-xs:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 12px 26px rgba(255,50,20,.36);
}

/* Panel de dependencias (mismo estilo que modern) */
.panel.panel-deps .panel-body {
  background: #131416;
  border: 1px solid #2a2b2d;
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,.35);
  padding: 18px 16px 22px;
}

/* Ajustes tipográficos y espaciados */
.panel-downloads-modern .download-card p:last-child,
.panel-deps .download-card p:last-child {
  margin-bottom: 0;
}

/* Estado “focus-visible” para accesibilidad */
.download-card a:focus-visible,
.panel-downloads .btn:focus-visible {
  outline: 2px dashed #ff7a3d;
  outline-offset: 3px;
}

/* --- Si quieres un pequeño “glow” en hover dentro de la tarjeta --- */
.download-card::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -30%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle at center, rgba(255,50,20,.18), transparent 60%);
  transform: rotate(25deg);
  pointer-events: none;
  transition: opacity .2s ease;
  opacity: 0;
}
.download-card:hover::after { opacity: 1; }

/* ===== Ajustes visuales para mantener coherencia con los CTA grandes ===== */
.panel.panel-downloads.panel-main-buttons .panel-body {
  background: #131416;
  border: 1px solid #2a2b2d;
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,.35);
}

/* Margen entre secciones de descargas */
.panel-downloads-modern,
.panel-deps,
.panel-main-buttons {
  margin-bottom: 18px;
}

/* Responsive fino */
@media (max-width: 480px) {
  .download-card { padding: 12px; }
  .download-card__title { font-size: 14px; }
  .download-card__badge { padding: 3px 8px; font-size: 11px; }
}
/* ============ DONATION CARDS v2 ============ */

/* Grid responsivo para las tarjetas */
.don-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px){ .don-grid { grid-template-columns: 1fr; } }
@media (min-width: 840px){ .don-grid { grid-template-columns: 1fr; } }
@media (min-width: 980px){ .don-grid { grid-template-columns: 1fr; } }

/* Tarjeta base (oscura, con borde sutil y glow) */
.don-card {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #101113;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 12px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.don-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
}

/* === DONATION CARDS CLEAN === */
.don-card {
  border-radius: 14px;
  background: #101113;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.don-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(0,0,0,.45);
}

.don-card__bar {
  height: 72px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 12px;
}
.don-card__logo {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: #fff;
  display: grid; place-items: center;
  overflow: hidden;
}
.don-card__logo img { width: 70%; }

.don--paypal  .don-card__bar { background: linear-gradient(90deg,#0064e0,#1ea7ff); }
.don--bestado .don-card__bar { background: linear-gradient(90deg,#ff7a00,#ffb000); }

.don-card__body { padding: 14px 18px 18px; }
.don-card__title { font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.don-card__desc { color: #c7c9cf; font-size: 13px; line-height: 1.5; }

.don-card__actions { margin-top: 12px; }

.btn-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 12px; font-size: 13px; font-weight: 700;
  border: 0; border-radius: 10px;
  cursor: pointer; text-decoration: none;
  transition: filter .15s ease, transform .15s ease;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
.btn-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

.btn-cta--paypal { background:#1ea7ff; color:#06121f; }
.btn-cta--wa     { background:#25D366; color:#041b0b; }

.don-section {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: #0c0d0e;
  padding: 14px;
  margin-bottom: 18px;
}


/* Píldora pequeña (opcional) para notas/instante/fee */
.pill {
  display:inline-block; padding:3px 8px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.2px;
  background:rgba(255,255,255,.08); color:#dfe3ea; margin-left:auto;
}

/* Secciones (cajas grandes) */
.don-section {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: #0c0d0e;
  padding: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  margin-bottom: 18px;
}
.don-section .panel-title { margin-bottom: 8px; }

/* Bloque “por qué donar” */
.don-why {
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: 12px;
  padding: 14px;
  background: rgba(255,255,255,.02);
}
.don-why p { margin: 8px 0; color: #d2d4da; font-size: 13px; }

/* === RazorMu — Server Info extras === */
.info-hero { background: linear-gradient(180deg, rgba(255,172,94,.06), rgba(255,172,94,0)); border-radius: 14px; }
.info-title { margin: 0 0 6px; font-size: 24px; color: #fff; }
.info-title span { color: #ffda8a; font-weight: 700; }
.info-sub { color: #cfd2d8; line-height: 1.6; }
.info-sub.small { font-size: 13px; color: #bfc3ca; }
.muted.small { font-size: 12px; color: #9aa0a6; margin-top: 6px; }

.info-ctas { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.btn-cta { background: #23252b; color: #fff; border-radius: 10px; padding: 10px 14px; display: inline-flex; align-items: center; font-weight: 700; text-decoration: none; box-shadow: 0 10px 20px rgba(0,0,0,.25); transition: filter .15s ease, transform .15s ease; }
.btn-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-cta--accent { background: linear-gradient(90deg,#ffad47,#ff7a00); color: #1b0f06; }

.info-section { border-radius: 14px; }
.info-section .panel-title { font-weight: 800; }

.quick-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.quick-grid li { background: #121316; border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 10px; color: #e8eaed; display: flex; flex-direction: column; gap: 6px; }
.quick-grid .qk-label { font-size: 12px; color: #9aa0a6; text-transform: uppercase; letter-spacing: .4px; }
.quick-grid b { font-size: 16px; color: #fff; }
.quick-grid .qk-wide { grid-column: span 2; }

.features { margin: 6px 0 0; padding-left: 18px; color: #dfe3ea; }
.features li { margin: 6px 0; }

.info-table td { background: #0f1012; color: #e8eaed; }

.section-h2 { color: #fff; font-size: 18px; margin: 0 0 10px; }
.video-wrap { border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); }

/* Chips */
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip { background: #15171a; border: 1px solid rgba(255,255,255,.08); color: #e8eaed; border-radius: 999px; padding: 6px 10px; font-size: 13px; }
.chip b { color: #ffda8a; }

/* Badges */
.badge { font-size: 11px; padding: 2px 6px; border-radius: 6px; margin-left: 6px; }
.badge.hot { background: rgba(255,50,20,.18); border: 1px solid rgba(255,50,20,.4); color: #ffd9d3; }
.badge.rec { background: rgba(76,175,80,.18); border: 1px solid rgba(76,175,80,.45); color: #d9ffd9; }

/* Accordions */
.acc { margin: 10px 0; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; overflow: hidden; background: #0f1012; }
.acc-head { cursor: pointer; padding: 12px 14px; background: linear-gradient(180deg, rgba(255,172,94,.08), rgba(255,172,94,0)); color: #e8eaed; font-weight: 700; }
.acc[open] .acc-head { filter: brightness(1.05); }
.acc-body { padding: 12px 14px; background: #0f1012; }
.vip-sub { color: #ffda8a; font-size: 13px; margin: 10px 0 6px; }

/* Responsive */
@media (max-width: 1024px) { .quick-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { .quick-grid { grid-template-columns: 1fr; } }


/* ===== RazorMu — Server Info v2 visual ===== */

/* HERO */
.info-hero { background: linear-gradient(180deg, rgba(255,172,94,.08), rgba(255,172,94,0)); border-radius: 14px; }
.info-title { margin: 0 0 6px; font-size: 24px; color: #fff; }
.info-title span { color: #ffda8a; font-weight: 700; }
.info-sub { color: #cfd2d8; line-height: 1.6; }
.info-ctas { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.btn-cta { background: #23252b; color: #fff; border-radius: 12px; padding: 10px 14px; display: inline-flex; align-items: center; font-weight: 800; text-decoration: none; box-shadow: 0 10px 20px rgba(0,0,0,.25); transition: filter .15s ease, transform .15s ease; }
.btn-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-cta--accent { background: linear-gradient(90deg,#ffb14a,#ff7a00); color: #1b0f06; }

/* Secciones */
.info-section { border-radius: 14px; }
.info-section .panel-title { font-weight: 800; letter-spacing: .2px; }

/* DATOS RÁPIDOS — tarjetas pro */
.quick-grid { display: grid; gap: 12px; margin-top: 10px; padding: 0; list-style: none; }
.quick-grid--pro { grid-template-columns: repeat(4,minmax(0,1fr)); }
.qk-card { position: relative; display: flex; align-items: center; gap: 12px; background: radial-gradient(120% 120% at 20% 0%, rgba(255,172,94,.10) 0, rgba(19,20,22,1) 45%); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 12px; color: #e8eaed; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.qk-card:before { content:""; position:absolute; inset:-1px; background: radial-gradient(600px 120px at var(--mx,20%) -10%, rgba(255,210,134,.18), rgba(255,210,134,0) 60%); opacity:.0; transition:opacity .15s ease; pointer-events:none; }
.qk-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.35); border-color: rgba(255,210,134,.35); }
.qk-card:hover:before { opacity:.9; }
.qk-card .qk-icon { font-size: 22px; width: 30px; text-align: center; filter: drop-shadow(0 2px 8px rgba(255,210,134,.25)); }
.qk-card .qk-meta { display:flex; flex-direction:column; gap:6px; }
.qk-label { font-size: 11px; color: #9aa0a6; text-transform: uppercase; letter-spacing: .5px; }
.qk-card b { font-size: 16px; color: #fff; }
.qk-wide { grid-column: span 2; }

/* Mouse glow follow */
.qk-card { --mx: 20%; }
.qk-card:hover { cursor: default; }
.qk-card:hover .qk-icon { transform: translateY(-1px); transition: transform .15s ease; }
.qk-card { perspective: 600px; }

/* Chips + badges (reuso) */
.chips-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.chip { background:#15171a; border:1px solid rgba(255,255,255,.08); color:#e8eaed; border-radius:999px; padding:6px 10px; font-size:13px; }
.chip b{ color:#ffda8a; }
.badge { font-size:11px; padding:2px 6px; border-radius:6px; margin-left:6px; }
.badge.hot { background: rgba(255,50,20,.18); border: 1px solid rgba(255,50,20,.4); color:#ffd9d3; }
.badge.rec { background: rgba(76,175,80,.18); border: 1px solid rgba(76,175,80,.45); color:#d9ffd9; }

/* Accordions */
.acc{ margin:10px 0; border:1px solid rgba(255,255,255,.08); border-radius:12px; overflow:hidden; background:#0f1012; }
.acc-head{ cursor:pointer; padding:12px 14px; background: linear-gradient(180deg, rgba(255,172,94,.10), rgba(255,172,94,0)); color:#e8eaed; font-weight:700; }
.acc[open] .acc-head{ filter:brightness(1.05); }
.acc-body{ padding:12px 14px; background:#0f1012; }
.vip-sub{ color:#ffda8a; font-size:13px; margin:10px 0 6px; }

/* Tablas compactas */
.info-table td { background:#0f1012; color:#e8eaed; }

/* Responsive */
@media (max-width: 1100px){ .quick-grid--pro{ grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 780px){ .quick-grid--pro{ grid-template-columns: repeat(2,minmax(0,1fr)); } .qk-wide{ grid-column: span 2; } }
@media (max-width: 520px){ .quick-grid--pro{ grid-template-columns: 1fr; } .qk-wide{ grid-column: 1; } }
/* ===== RazorMu — VIP Pricing Cards v3 ===== */
.vip-section .panel-title{font-weight:800;letter-spacing:.2px}

/* Grid */
.vip-grid{
  display:grid;gap:18px;margin-top:10px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media(max-width:1024px){.vip-grid{grid-template-columns:1fr}}
@media(min-width:1025px) and (max-width:1320px){.vip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Card base */
.vip-card{
  position:relative;overflow:hidden;border-radius:16px;
  background:#111216;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 30px rgba(0,0,0,.35);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.vip-card:hover{transform:translateY(-3px);box-shadow:0 20px 42px rgba(0,0,0,.45);border-color:rgba(255,210,134,.32)}
.vip-glow{position:absolute;inset:-40% -20%;background:radial-gradient(600px 200px at 20% -10%, rgba(255,210,134,.12), rgba(255,210,134,0) 60%);pointer-events:none}
.vip-head{padding:18px 18px 8px;background:linear-gradient(180deg,rgba(255,172,94,.08),rgba(255,172,94,0))}
.vip-name{margin:0;font-weight:900;color:#fff;font-size:22px;display:flex;align-items:center;gap:8px}
.vip-tag{font-size:12px;font-weight:800;color:#1a0f07;background:#ffda8a;border:0;padding:4px 8px;border-radius:999px}
.vip-desc{margin:8px 0 0;color:#cfd2d8}

/* Bullets */
.vip-bullets{list-style:none;margin:0;padding:12px 18px;display:grid;grid-template-columns:1fr;gap:8px}
.vip-bullets li{position:relative;padding-left:18px;color:#e8eaed}
.vip-bullets li:before{content:"✓";position:absolute;left:0;top:0;color:#ffda8a}

/* Detalles */
.vip-more{margin:0 18px 12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden}
.vip-more>summary{cursor:pointer;padding:10px 12px;background:#0f1012;color:#e8eaed;font-weight:700}
.vip-more[open]>summary{filter:brightness(1.06)}
.vip-more-body{padding:10px 12px;background:#0f1012}
.vip-more-body .chip{background:#15171a;border:1px solid rgba(255,255,255,.08);}

/* CTA */
.vip-cta{padding:14px 18px;background:linear-gradient(180deg,rgba(255,172,94,.08),rgba(255,172,94,0))}
.vip-cta .btn-cta{width:100%;justify-content:center;border-radius:12px}
.btn-cta--wide{width:100%}
.btn-cta--ghost{background:#1b1e24;color:#fff;border:1px solid rgba(255,255,255,.12)}

/* RIBBON + DESTACADO PRO */
.vip-card--pro{
  background:linear-gradient(180deg,rgba(255,183,77,.12),rgba(255,183,77,.02)), #0f1012;
  border:1px solid rgba(255,183,77,.45);
  box-shadow:0 24px 60px rgba(255,183,77,.18), inset 0 0 0 1px rgba(255,183,77,.25);
  transform:translateY(-2px);
}
.vip-card--pro .vip-tag{background:linear-gradient(90deg,#ffb14a,#ff7a00);color:#1b0f06}
.vip-card--pro .vip-head{background:linear-gradient(180deg,rgba(255,183,77,.16),rgba(255,183,77,0))}
.vip-card--pro .vip-glow{background:radial-gradient(650px 220px at 30% -10%, rgba(255,183,77,.22), rgba(255,183,77,0) 60%)}
.vip-card--pro .vip-cta .btn-cta--accent{box-shadow:0 14px 32px rgba(255,183,77,.35)}
.vip-ribbon{
  position:absolute;top:12px;right:-52px;transform:rotate(35deg);
  background:linear-gradient(90deg,#ffb14a,#ff7a00);color:#1b0f06;
  font-weight:900;letter-spacing:.6px;font-size:12px;padding:8px 56px;box-shadow:0 10px 24px rgba(255,183,77,.35)
}

/* Reuso de estilos existentes */
.chips-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{background:#15171a;border:1px solid rgba(255,255,255,.08);color:#e8eaed;border-radius:999px;padding:6px 10px;font-size:13px}

/* ===== Pequeños refinamientos para esta página (ya los usas): ===== */
/* hero, quick grid, accordions, etc. están definidos en el bloque anterior que ya pegaste */



/* ===== CONTADOR DE VISITAS MEJORADO - DISEÑO HORIZONTAL ===== */
.visits-counter {
  background: linear-gradient(145deg, rgba(25,25,25,0.95), rgba(15,15,15,0.98));
  border: 2px solid rgba(255, 180, 50, 0.4);
  border-radius: 16px;
  padding: 20px 30px;
  margin: 25px auto 15px;
  max-width: 800px;
  text-align: center;
  box-shadow: 
    0 0 25px rgba(255,180,50,0.25), 
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 8px 32px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}

.visits-header {
  font-size: 16px;
  font-weight: 800;
  color: #ffb432;
  margin-bottom: 16px;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(255,180,50,0.6);
  text-transform: uppercase;
}

.visits-body { 
  display: flex; 
  flex-direction: column; 
  align-items: center;
  gap: 16px;
}

/* Stats superiores - layout horizontal */
.visits-stats {
  display: flex;
  gap: 60px;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.stat-label {
  font-size: 11px;
  color: #aab0b6;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}

.visits-total {
  font-size: 32px;
  font-weight: 900;
  background: linear-gradient(135deg, #ffb432, #ff7300);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

.stat-number {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 6px rgba(255,255,255,0.3);
}

/* Sección de países - layout más compacto */
.visits-countries {
  width: 100%;
}

.visits-countries h4 {
  margin: 0 0 12px;
  font-size: 13px;
  color: #e4e6eb;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Banderas en formato horizontal compacto */
.visits-flags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 8px;
  max-height: 120px;
  overflow: hidden;
}

/* Item individual de bandera - más pequeño */
.flag-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: transform 0.3s ease;
  padding: 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  min-width: 50px;
}

.flag-item:hover {
  transform: translateY(-2px) scale(1.05);
  background: rgba(255,180,50,0.08);
  border-color: rgba(255,180,50,0.3);
  box-shadow: 0 6px 16px rgba(255,180,50,0.25);
}

.flag-item img {
  width: 28px;
  height: 21px;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  object-fit: cover;
}

.flag-count {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,0.7);
  padding: 2px 5px;
  border-radius: 6px;
  min-width: 18px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.1);
}

/* Tooltip mejorado */
.flag-item::after {
  content: attr(data-country) " - " attr(data-count) " visitas";
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.9);
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  border: 1px solid rgba(255,180,50,0.3);
  z-index: 10;
}

.flag-item:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Info adicional - más compacta */
.visits-since {
  margin-top: 4px;
  opacity: 0.7;
}

.visits-since small {
  font-size: 10px;
  color: #9aa0a6;
  font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
  .visits-counter {
    padding: 18px 20px;
    margin: 20px 10px;
    max-width: 95%;
  }
  
  .visits-stats {
    gap: 40px;
  }
  
  .visits-total {
    font-size: 28px;
  }
  
  .stat-number {
    font-size: 18px;
  }
  
  .visits-flags {
    gap: 6px;
    max-height: 100px;
  }
  
  .flag-item {
    padding: 5px;
    min-width: 45px;
  }
  
  .flag-item img {
    width: 24px;
    height: 18px;
  }
  
  .flag-count {
    font-size: 9px;
    padding: 1px 4px;
  }
}

@media (max-width: 480px) {
  .visits-header {
    font-size: 14px;
  }
  
  .visits-stats {
    flex-direction: row;
    gap: 30px;
  }
  
  .visits-total {
    font-size: 24px;
  }
  
  .stat-number {
    font-size: 16px;
  }
  
  .visits-flags {
    gap: 5px;
    max-height: 80px;
  }
  
  .flag-item::after {
    font-size: 10px;
    bottom: -28px;
  }
}

/* Diseño alternativo: banderas en una sola fila con scroll horizontal */
@media (max-width: 600px) {
  .visits-flags {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 8px 4px;
    gap: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,180,50,0.5) transparent;
  }
  
  .visits-flags::-webkit-scrollbar {
    height: 4px;
  }
  
  .visits-flags::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .visits-flags::-webkit-scrollbar-thumb {
    background: rgba(255,180,50,0.5);
    border-radius: 2px;
  }
  
  .flag-item {
    flex-shrink: 0;
    min-width: 50px;
  }
}

/* Agregar al final del CSS del contador de visitas */

/* Placeholder para países desconocidos */
.flag-unknown {
  width: 28px;
  height: 21px;
  background: linear-gradient(135deg, #444, #666);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  border: 1px solid #555;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* ===== CUENTA REGRESIVA RAZORMU ===== */
.countdown-banner.overlay-mode {
    position: absolute !important;
    top: 400px; /* Ajusta según tu header */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 500px;
    z-index: 1000;
    background: rgba(26, 26, 46, 0.95);
    border-radius: 5px;
    border: 1px solid #00d4ff;
    box-shadow: 0 8px 32px rgba(0, 212, 255, 0.3);
    backdrop-filter: blur(15px);
    min-height: auto;
    padding: 20px;
}
.countdown-banner {
  position: relative;
  width: 100%;
  max-width: min(1200px, 95vw);
  margin: 0 auto 20px;
  background: linear-gradient(135deg, 
    rgba(255, 50, 20, 0.15) 0%,
    rgba(255, 140, 0, 0.08) 50%,
    rgba(20, 20, 22, 0.95) 100%
  );
  border: 2px solid rgba(255, 50, 20, 0.3);
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 
    0 0 30px rgba(255, 50, 20, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 32px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.countdown-banner::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(255, 50, 20, 0.1),
    transparent
  );
  animation: rotateBorder 6s linear infinite;
  pointer-events: none;
}

@keyframes rotateBorder {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.countdown-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.countdown-title {
  font-size: 18px;
  font-weight: 900;
  color: #ffda8a;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0 0 8px;
  text-shadow: 0 0 10px rgba(255, 218, 138, 0.6);
}

.countdown-subtitle {
  font-size: 14px;
  color: #cfd2d8;
  margin: 0 0 20px;
  opacity: 0.9;
}

.countdown-timer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 50, 20, 0.3);
  border-radius: 12px;
  padding: 12px 8px;
  min-width: 70px;
  position: relative;
  overflow: hidden;
}

.countdown-unit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #ff3214, #ff7b14);
  opacity: 0.6;
}

.countdown-number {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  margin-bottom: 4px;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
  font-family: "Courier New", monospace;
}

.countdown-label {
  font-size: 11px;
  color: #aab0b6;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}

.countdown-separator {
  font-size: 24px;
  color: #ff7b14;
  font-weight: bold;
  animation: blink 1s ease-in-out infinite alternate;
}

@keyframes blink {
  from { opacity: 1; }
  to { opacity: 0.3; }
}

/* Estados especiales */
.countdown-banner.warning {
  border-color: rgba(255, 165, 0, 0.5);
  background: linear-gradient(135deg, 
    rgba(255, 165, 0, 0.15) 0%,
    rgba(255, 140, 0, 0.08) 50%,
    rgba(20, 20, 22, 0.95) 100%
  );
}

.countdown-banner.critical {
  border-color: rgba(255, 0, 0, 0.6);
  background: linear-gradient(135deg, 
    rgba(255, 0, 0, 0.2) 0%,
    rgba(255, 50, 20, 0.1) 50%,
    rgba(20, 20, 22, 0.95) 100%
  );
  animation: pulse 2s ease-in-out infinite alternate;
}

@keyframes pulse {
  from { box-shadow: 0 0 30px rgba(255, 0, 0, 0.3); }
  to { box-shadow: 0 0 50px rgba(255, 0, 0, 0.6); }
}

.countdown-banner.finished {
  border-color: rgba(0, 255, 0, 0.5);
  background: linear-gradient(135deg, 
    rgba(0, 255, 0, 0.15) 0%,
    rgba(0, 200, 0, 0.08) 50%,
    rgba(20, 20, 22, 0.95) 100%
  );
}

.countdown-banner.finished .countdown-title {
  color: #90EE90;
  animation: celebration 1s ease-in-out infinite alternate;
}

@keyframes celebration {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

/* Responsive */
@media (max-width: 768px) {
  .countdown-banner {
    padding: 16px 20px;
    margin: 0 10px 20px;
  }
  
  .countdown-title {
    font-size: 16px;
  }
  
  .countdown-timer {
    gap: 12px;
  }
  
  .countdown-unit {
    min-width: 60px;
    padding: 10px 6px;
  }
  
  .countdown-number {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .countdown-timer {
    gap: 8px;
  }
  
  .countdown-unit {
    min-width: 50px;
    padding: 8px 4px;
  }
  
  .countdown-number {
    font-size: 20px;
  }
  
  .countdown-separator {
    display: none;
  }
}
/* Quitar recuadro exterior del countdown */
.countdown-banner {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.countdown-banner::before {
  display: none !important;
}

/* ====== Sidebar Banners — RazorMu ====== */
.sb-banner{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  padding: 16px;
  margin: 16px 0;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.06);
  background: radial-gradient(120% 120% at 10% 0%,
      rgba(255,255,255,0.06) 0%,
      rgba(0,0,0,0.55) 40%,
      rgba(0,0,0,0.85) 100%);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  isolation: isolate;
}
.sb-banner:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 16px 40px rgba(0,0,0,0.55), 0 0 30px rgba(255,140,0,0.12);
}
.sb-inner{ position: relative; z-index: 2; }
.sb-kicker{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9ad7ff;
  margin-bottom: 8px;
  opacity: .9;
}
.sb-title{
  margin: 0 0 10px 0;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 3px 12px rgba(0,0,0,0.45);
}
.sb-title span{
  color: #ffd37a;
  text-shadow: 0 0 18px rgba(255,211,122,.45);
}
.sb-points{
  list-style: none;
  margin: 0 0 14px 0;
  padding: 0;
}
.sb-points li{
  position: relative;
  color: #d8dde6;
  font-size: 13px;
  padding-left: 18px;
  margin: 6px 0;
  opacity: .95;
}
.sb-points li::before{
  content: "✦";
  position: absolute;
  left: 0;
  top: 0;
  color: #ffb86b;
  font-size: 12px;
}

/* Botón/CTA */
.sb-cta{
  display: inline-block;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #121319;
  background: linear-gradient(90deg,#ffd37a,#ff9f4a);
  box-shadow: 0 6px 18px rgba(255,159,74,.35);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.sb-banner:hover .sb-cta{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255,159,74,.45);
  filter: saturate(1.15);
}

/* Shine / Glow */
.sb-shine{
  position: absolute;
  inset: -60%;
  background: conic-gradient(from 0deg, transparent, rgba(255,210,120,.12), transparent);
  animation: sb-rotate 7s linear infinite;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes sb-rotate{
  to{ transform: rotate(360deg); }
}

/* Badge (VIP recomendado) */
.sb-badge{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #1b1e28;
  background: linear-gradient(90deg,#9dffb1,#42ff7a);
  border-radius: 999px;
  padding: 6px 10px;
  box-shadow: 0 8px 18px rgba(66,255,122,.35);
}

/* Esquemas de color/fondo por banner */
.sb-features{
  background:
    radial-gradient(120% 120% at 85% 10%, rgba(54,160,255,.12) 0%, transparent 40%),
    radial-gradient(120% 120% at 0% 100%, rgba(255,119,56,.10) 0%, transparent 50%),
    linear-gradient(180deg, rgba(16,18,26,.85), rgba(10,12,16,.95));
  border-color: rgba(100,200,255,.15);
}
.sb-rankings{
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(255,229,115,.12) 0%, transparent 45%),
    radial-gradient(110% 110% at 0% 100%, rgba(255,77,77,.10) 0%, transparent 55%),
    linear-gradient(180deg, rgba(16,16,20,.85), rgba(12,10,16,.95));
  border-color: rgba(255,200,120,.15);
}
.sb-vip{
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(165,120,255,.12) 0%, transparent 45%),
    radial-gradient(110% 110% at 0% 100%, rgba(255,120,180,.10) 0%, transparent 55%),
    linear-gradient(180deg, rgba(20,16,26,.85), rgba(14,10,18,.95));
  border-color: rgba(200,120,255,.18);
}
.sb-vip .sb-title span{
  color: #cda8ff;
  text-shadow: 0 0 18px rgba(205,168,255,.45);
}

/* Responsive fino */
@media (max-width: 1366px){
  .sb-title{ font-size: 20px; }
}
@media (max-width: 480px){
  .sb-title{ font-size: 18px; }
  .sb-points li{ font-size: 12px; }
}
/* Asegura que el banner NUNCA se oculte por clases de estado */
.countdown-banner,
.countdown-banner.warning,
.countdown-banner.critical,
.countdown-banner.started {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* (Opcional) Estilo cuando el evento ya inició */
.countdown-banner.started {
  background: rgba(40, 167, 69, 0.15);
  border-top: 2px solid #28a745;
  border-bottom: 2px solid #28a745;
}
.countdown-banner.started .countdown-timer {
  opacity: 0.6;
}