@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Cinzel+Decorative:wght@700;900&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

/* =======================================================================
   ViciosMU · "EDAD DE ORO" · 99B Clásico
   Oro labrado sobre piedra · efectos cinemáticos para WebEngine
   Cargar SIEMPRE en último lugar. No toca la lógica de WebEngine.
   ======================================================================= */
:root{
  --stone0:#0e0a05; --stone1:#160f07; --stone2:#211608; --stone3:#2c1e0c;
  --gold:#c9a44c; --gold-hi:#f2dd9a; --gold-lo:#7e5f24; --bronze:#9c7b3a;
  --parch:#ece0c4; --mut:#a08b66; --crimson:#a52e22; --crimson-hi:#d96a4a;
  --arc:#6fb0ff; --green:#7ad17a;
  --edge:rgba(201,162,75,.32); --edge2:rgba(201,162,75,.14);
  --disp:'Cinzel',Georgia,serif; --decor:'Cinzel Decorative',serif; --serif:'EB Garamond',Georgia,serif;
}

/* ----------------------------------------------------------- BASE ----- */
html{ min-width:1300px; }
body{
  color:var(--parch); font-family:var(--serif); font-size:16px;
  background:
    radial-gradient(120% 70% at 50% -6%, rgba(201,162,75,.10), transparent 46%),
    radial-gradient(90% 60% at 50% 20%, rgba(120,40,20,.10), transparent 60%),
    repeating-linear-gradient(125deg, rgba(255,255,255,.012) 0 2px, transparent 2px 7px),
    linear-gradient(180deg,#120c06 0%,#0b0703 100%) !important;
  background-attachment:fixed !important;
}
a{ color:var(--gold-hi); text-decoration:none; }
a:hover{ color:#fff0cf; }
::selection{ background:rgba(201,162,75,.4); color:#1a1206; }
::placeholder{ color:#7d6c4c !important; opacity:1; }

input[type=text],input[type=password],input[type=number],.form-control{
  background:#0c0803 !important; border:1px solid var(--gold-lo) !important; color:var(--parch) !important;
  border-radius:2px !important; box-shadow:inset 0 1px 5px rgba(0,0,0,.6) !important; font-family:var(--serif) !important; }
.form-control:focus{ border-color:var(--gold) !important; box-shadow:inset 0 1px 5px rgba(0,0,0,.6),0 0 10px rgba(201,162,75,.3) !important; }

/* keyframes de efectos */
@keyframes vmShimmer{ 0%{ background-position:-160% 0 } 100%{ background-position:260% 0 } }
@keyframes vmGlow{ 0%,100%{ filter:drop-shadow(0 0 14px rgba(201,162,75,.35)) } 50%{ filter:drop-shadow(0 0 30px rgba(217,106,74,.55)) } }
@keyframes vmBob{ 0%,100%{ transform:translateX(-50%) translateY(0) } 50%{ transform:translateX(-50%) translateY(7px) } }
@keyframes vmFlicker{ 0%,100%{ opacity:.9 } 45%{ opacity:.7 } 70%{ opacity:1 } }

/* línea/ornamento dorado reutilizable */
.vm-orn{ display:flex; align-items:center; justify-content:center; gap:14px; margin:16px 0; }
.vm-orn i{ height:1px; width:90px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.vm-orn b{ width:9px; height:9px; background:var(--gold); transform:rotate(45deg); box-shadow:0 0 8px rgba(201,162,75,.6); }

/* ============================================================ NAV ===== */
.vm-navwrap{ position:sticky; top:0; z-index:60;
  background:linear-gradient(180deg, rgba(14,9,4,.92), rgba(14,9,4,.55));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--edge2); transition:all .3s ease; }
.vm-navwrap::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.5; }
.vm-navwrap.scrolled{ background:rgba(12,8,3,.97); box-shadow:0 6px 26px rgba(0,0,0,.55); }
.vm-navwrap.scrolled .vm-top{ padding-top:12px; padding-bottom:12px; }
.vm-top{ max-width:1300px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:18px 28px; gap:22px; }
.vm-brand{ display:flex; align-items:center; gap:11px; font-family:var(--decor); font-weight:700; letter-spacing:.1em; font-size:22px; color:var(--gold-hi); }
.vm-brand .gem{ width:13px; height:13px; background:var(--gold); transform:rotate(45deg); box-shadow:0 0 12px var(--gold); }
.vm-cta{ font-family:var(--disp); font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:13px;
  padding:11px 22px; border-radius:2px; color:#1a1206 !important; white-space:nowrap;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,#a07f30); border:1px solid #6e521f;
  box-shadow:0 3px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.4); }
.vm-cta:hover{ color:#1a1206 !important; box-shadow:0 3px 18px rgba(217,106,74,.5), inset 0 1px 0 rgba(255,255,255,.5); }
.vm-burger{ display:none; background:none; border:1px solid var(--gold-lo); border-radius:3px; width:44px; height:40px; color:var(--gold); font-size:18px; cursor:pointer; align-items:center; justify-content:center; }
#navbar{ background:transparent !important; border:0 !important; width:auto !important; border-radius:0 !important; box-shadow:none !important; margin:0 !important; flex:1; }
#navbar ul{ display:flex; justify-content:center; gap:4px; }
#navbar ul li{ font-size:0; }
#navbar ul li a{ color:var(--parch) !important; font-family:var(--disp); font-weight:600; font-size:13px; letter-spacing:.14em; text-transform:uppercase; padding:10px 16px !important; border-radius:2px; position:relative; transition:all .2s ease; }
#navbar ul li a:hover,#navbar ul li a:focus,#navbar ul li a:active{ background:transparent !important; color:var(--gold-hi) !important; text-shadow:0 0 12px rgba(242,221,154,.6); }
#navbar ul li a::after{ content:""; position:absolute; left:14px; right:14px; bottom:5px; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); transform:scaleX(0); transition:transform .25s ease; }
#navbar ul li a:hover::after{ transform:scaleX(1); }

/* ============================================================ HERO ==== */
#header{ display:none !important; } .header-info-container{ display:none !important; } #ruinmu-navwrap{ display:none !important; }
.vm-hero{ position:relative; min-height:92vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:50px 20px 70px; overflow:hidden; background:none !important; }
.vm-hero-bg{ position:absolute; inset:-6% 0 0 0; z-index:0; background:url(../img/background.jpg) center/cover no-repeat; transform:scale(1.08); will-change:transform; filter:saturate(.9) brightness(.8); }
.vm-hero-veil{ position:absolute; inset:0; z-index:1;
  background:
   radial-gradient(120% 95% at 50% 26%, rgba(40,20,6,.35), rgba(8,5,2,.95) 80%),
   radial-gradient(60% 50% at 50% 8%, rgba(201,162,75,.16), transparent 60%),
   linear-gradient(180deg, rgba(8,5,2,.55), rgba(8,5,2,.99)); }
#vm-embers{ position:absolute; inset:0; z-index:2; width:100%; height:100%; pointer-events:none; }
.vm-heroinner{ position:relative; z-index:3; }
.vm-crest{ width:560px; max-width:88vw; height:auto; animation:vmGlow 4.5s ease-in-out infinite; }
.vm-hero .vm-plaque{ display:inline-block; margin-top:6px; padding:10px 30px; font-family:var(--disp); font-weight:700; letter-spacing:.4em; font-size:15px; color:var(--gold-hi); text-transform:uppercase;
  border:1px solid var(--gold-lo); background:linear-gradient(180deg,rgba(44,30,12,.7),rgba(22,15,7,.7));
  position:relative; box-shadow:inset 0 0 18px rgba(0,0,0,.6); }
.vm-hero .vm-sub{ color:var(--mut); letter-spacing:.18em; font-size:14px; text-transform:uppercase; margin-top:18px; font-family:var(--disp); }
.vm-btns{ margin-top:30px; display:flex; gap:16px; justify-content:center; }
.vm-b{ font-family:var(--disp); font-weight:600; padding:15px 36px; border-radius:2px; font-size:14px; letter-spacing:.14em; text-transform:uppercase; transition:all .2s ease; position:relative; overflow:hidden; }
.vm-b-pri{ color:#1a1206 !important; background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,#a07f30); border:1px solid #6e521f; box-shadow:0 8px 26px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.45); }
.vm-b-pri::before{ content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%); background-size:250% 100%; animation:vmShimmer 4s linear infinite; }
.vm-b-pri:hover{ color:#1a1206 !important; box-shadow:0 8px 32px rgba(217,106,74,.55), inset 0 1px 0 rgba(255,255,255,.55); transform:translateY(-1px); }
.vm-b-gho{ color:var(--gold-hi) !important; border:1px solid var(--gold-lo); background:linear-gradient(180deg,rgba(44,30,12,.5),rgba(22,15,7,.5)); }
.vm-b-gho:hover{ border-color:var(--gold); color:#fff0cf !important; box-shadow:0 0 18px rgba(201,162,75,.3); }
.vm-cue{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:3; color:var(--mut); font-family:var(--disp); letter-spacing:.3em; font-size:11px; text-transform:uppercase; animation:vmBob 2s ease-in-out infinite; }

/* ===================================================== STATS MEDALLAS = */
.vm-stats{ display:flex; max-width:1240px; margin:-36px auto 0; position:relative; z-index:5; gap:14px; padding:0 20px; }
.vm-stat{ flex:1; text-align:center; padding:22px 8px; border-radius:4px;
  background:linear-gradient(180deg,var(--stone3),var(--stone1));
  border:1px solid var(--gold-lo); box-shadow:0 10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(242,221,154,.12); position:relative; }
.vm-stat::after{ content:""; position:absolute; left:14%; right:14%; top:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.vm-stat .n{ font-family:var(--disp); font-size:30px; color:var(--gold-hi); line-height:1; font-weight:700; text-shadow:0 1px 4px #000; }
.vm-stat .n.on{ color:#ffe1a0; }
.vm-stat .l{ font-size:11px; letter-spacing:.24em; color:var(--mut); text-transform:uppercase; margin-top:9px; font-family:var(--disp); }

/* ===================================================== SECCIONES ====== */
.vm-section{ max-width:1300px; margin:0 auto; padding:78px 30px; }
.vm-sec-head{ text-align:center; margin-bottom:46px; }
.vm-sec-head .k{ font-family:var(--disp); font-size:12px; letter-spacing:.5em; text-transform:uppercase; color:var(--gold); }
.vm-sec-head h2{ font-family:var(--decor); font-weight:700; font-size:44px; color:var(--gold-hi); margin:12px 0 0; letter-spacing:.02em; text-shadow:0 2px 14px rgba(0,0,0,.6); }
.vm-sec-head h2::after{ content:""; display:block; width:130px; height:2px; margin:18px auto 0; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.vm-sec-head p{ color:var(--mut); margin-top:14px; font-size:16px; max-width:640px; margin-left:auto; margin-right:auto; font-style:italic; }

/* marco labrado reutilizable (doble borde + esquinas) */
.vm-frame{ position:relative; border:1px solid var(--gold-lo); background:linear-gradient(180deg,var(--stone2),var(--stone1)); }
.vm-frame::before{ content:""; position:absolute; inset:5px; border:1px solid var(--edge2); pointer-events:none; }

/* features */
.vm-features{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.vm-feat{ position:relative; background:linear-gradient(180deg,var(--stone3),var(--stone1)); border:1px solid var(--gold-lo); border-radius:4px; padding:34px 24px; text-align:center; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; box-shadow:0 8px 26px rgba(0,0,0,.4); }
.vm-feat::before{ content:""; position:absolute; inset:5px; border:1px solid var(--edge2); pointer-events:none; }
.vm-feat:hover{ transform:translateY(-6px); border-color:var(--gold); box-shadow:0 18px 44px rgba(0,0,0,.55), 0 0 22px rgba(201,162,75,.18); }
.vm-feat .ic{ width:64px; height:64px; margin:0 auto 18px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gold-hi); font-size:25px; background:radial-gradient(circle at 40% 30%, rgba(201,162,75,.22), rgba(20,13,6,.6)); border:1px solid var(--gold-lo); box-shadow:inset 0 0 16px rgba(0,0,0,.6); }
.vm-feat h3{ font-family:var(--disp); font-size:18px; color:var(--gold-hi); letter-spacing:.05em; text-transform:uppercase; margin-bottom:10px; }
.vm-feat p{ color:var(--mut); font-size:15px; line-height:1.65; }

/* clases con marco de oro */
.vm-classes{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.vm-class{ position:relative; border-radius:4px; overflow:hidden; border:2px solid var(--gold-lo); height:330px; background:#0c0803; transition:border-color .3s ease, box-shadow .3s ease; }
.vm-class img{ width:100%; height:100%; object-fit:cover; object-position:center top; filter:sepia(.25) saturate(.95) brightness(.74); transition:all .45s ease; }
.vm-class:hover{ border-color:var(--gold); box-shadow:0 18px 46px rgba(0,0,0,.6), 0 0 26px rgba(111,176,255,.25); }
.vm-class:hover img{ filter:sepia(0) saturate(1.05) brightness(1.02); transform:scale(1.07); }
.vm-class .cap{ position:absolute; left:0; right:0; bottom:0; padding:18px 16px; background:linear-gradient(180deg,transparent,rgba(8,5,2,.97)); }
.vm-class .cap b{ font-family:var(--disp); color:var(--gold-hi); letter-spacing:.06em; text-transform:uppercase; font-size:16px; display:block; }
.vm-class .cap span{ color:var(--mut); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }

/* castle siege épico */
.vm-castle{ position:relative; padding:104px 30px; text-align:center; overflow:hidden; border-top:1px solid var(--edge); border-bottom:1px solid var(--edge); }
.vm-castle-bg{ position:absolute; inset:0; z-index:0; background:url(../img/castle_siege.jpg) center/cover no-repeat; opacity:.4; transform:scale(1.05); }
.vm-castle-veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(8,5,2,.82), rgba(8,5,2,.94)); }
.vm-castle-in{ position:relative; z-index:2; max-width:780px; margin:0 auto; }
.vm-castle h2{ font-family:var(--decor); font-size:50px; color:var(--gold-hi); letter-spacing:.03em; text-shadow:0 6px 30px rgba(0,0,0,.85); }
.vm-castle p{ color:var(--parch); margin:18px 0 30px; font-size:17px; line-height:1.7; font-style:italic; }

/* comunidad */
.vm-community{ position:relative; max-width:1240px; margin:24px auto 72px; border-radius:6px; overflow:hidden; border:1px solid var(--gold-lo); padding:58px 40px; text-align:center; background:linear-gradient(135deg,var(--stone3),var(--stone1)); }
.vm-community::before{ content:""; position:absolute; inset:6px; border:1px solid var(--edge2); pointer-events:none; }
.vm-community h2{ font-family:var(--decor); font-size:36px; color:var(--gold-hi); letter-spacing:.03em; }
.vm-community p{ color:var(--mut); margin:14px 0 28px; font-style:italic; }
.vm-discord{ background:#5865F2 !important; color:#fff !important; border:1px solid #3d49c0 !important; box-shadow:0 10px 30px rgba(88,101,242,.4) !important; }
.vm-discord::before{ display:none !important; }
.vm-discord:hover{ background:#6b78ff !important; color:#fff !important; }

.vm-section-we{ max-width:1300px; margin:0 auto; padding:24px 30px 36px; }

/* ============================================== WEBENGINE COMPONENTES = */
#container{ padding-top:14px !important; }
.module-contents{ background:linear-gradient(180deg,var(--stone2),var(--stone1)) !important; border:1px solid var(--gold-lo) !important; border-radius:4px !important; box-shadow:0 12px 40px rgba(0,0,0,.5) !important; color:var(--parch); position:relative; }
.module-contents::before{ content:""; position:absolute; inset:6px; border:1px solid var(--edge2); pointer-events:none; }
.page-title{ color:var(--gold-hi) !important; font-family:var(--decor) !important; font-weight:700 !important; letter-spacing:.03em; text-shadow:0 2px 14px rgba(0,0,0,.6); }
.page-title::after{ content:""; display:block; width:100px; height:2px; margin:14px auto 0; background:linear-gradient(90deg,transparent,var(--gold),transparent); }

.panel,.panel-general,.panel-downloads,.panel-addstats,.panel-sidebar,.panel-news{ background:linear-gradient(180deg,var(--stone2),var(--stone1)) !important; border:1px solid var(--gold-lo) !important; border-radius:4px !important; color:var(--parch) !important; box-shadow:0 8px 28px rgba(0,0,0,.45) !important; }
.panel-heading,.panel-sidebar > .panel-heading,.panel-news .panel-heading{ background:linear-gradient(180deg,#2e2110,#1c1308) !important; border:0 !important; border-bottom:1px solid var(--gold-lo) !important; border-radius:4px 4px 0 0 !important; }
.panel-title,.panel-sidebar > .panel-heading > .panel-title,.panel-news .panel-title{ color:var(--gold-hi) !important; font-family:var(--disp) !important; font-weight:600 !important; letter-spacing:.08em; text-transform:uppercase; text-shadow:0 1px 3px #000; }
.panel-body{ color:var(--parch); } .panel-body .panel-title{ color:var(--gold) !important; }
.panel-news .panel-body b,.panel-news .panel-body strong{ color:var(--gold-hi); }
.panel-news .panel-footer,.panel-footer{ background:#0c0803 !important; border-top:1px solid var(--gold-lo) !important; color:var(--mut) !important; }
.panel-usercp{ background:linear-gradient(180deg,var(--stone3),#0e0a05) !important; }
.panel-usercp ul li{ border-bottom:1px solid var(--edge2); } .panel-usercp ul li a{ color:var(--parch) !important; } .panel-usercp ul li a:hover{ color:var(--gold-hi) !important; }

.btn-yellow,.btn-primary,.btn-castlewidget{ background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,#a07f30) !important; border:1px solid #6e521f !important; color:#1a1206 !important; font-family:var(--disp) !important; font-weight:600 !important; letter-spacing:.08em; text-transform:uppercase; border-radius:2px !important; box-shadow:0 3px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.4) !important; }
.btn-yellow:hover,.btn-primary:hover,.btn-castlewidget:hover{ background:linear-gradient(180deg,#fff0c4,var(--gold-hi)) !important; color:#1a1206 !important; box-shadow:0 3px 18px rgba(217,106,74,.5) !important; transform:translateY(-1px); }
.btn-danger{ background:linear-gradient(180deg,var(--crimson-hi),var(--crimson)) !important; border:1px solid #6e1f18 !important; color:#fff !important; }

.table{ color:var(--parch) !important; }
.table > thead > tr > th{ color:var(--gold-hi) !important; border-bottom:2px solid var(--gold-lo) !important; font-family:var(--disp); letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
.table > tbody > tr > td,.table > thead > tr > th,.table > tbody > tr > th{ border-top:1px solid var(--edge2) !important; }
.table-hover > tbody > tr:hover{ background:rgba(201,162,75,.07) !important; }
.panel-sidebar .table td[style*="font-weight:bold"]{ color:var(--gold-hi) !important; }
.panel-sidebar .table td[style*="00aa00"]{ color:var(--green) !important; }

.rankings-table{ width:92%; background:transparent !important; box-shadow:none !important; border:1px solid var(--gold-lo); border-radius:4px; overflow:hidden; }
.rankings-table tr td{ border-bottom:1px solid var(--edge2) !important; color:var(--parch) !important; font-size:17px; }
.rankings-table tr:first-child td{ color:var(--gold-hi) !important; border-bottom:2px solid var(--gold-lo) !important; font-family:var(--disp); text-transform:uppercase; letter-spacing:.06em; background:rgba(201,162,75,.06); }
.rankings-table tr:nth-child(2n+3) td{ background:rgba(201,162,75,.03); }
.rankings-table-place{ color:var(--mut) !important; font-family:var(--disp); }
.rankings-table tr:nth-child(2) .rankings-table-place{ color:#ffd96b !important; text-shadow:0 0 12px rgba(255,217,107,.5); }
.rankings-table tr:nth-child(3) .rankings-table-place{ color:#d8d8d8 !important; }
.rankings-table tr:nth-child(4) .rankings-table-place{ color:#d0904e !important; }
.rankings_menu span{ color:var(--mut) !important; font-family:var(--disp); }
.rankings_menu a{ background:linear-gradient(180deg,var(--stone3),#0e0a05) !important; border:1px solid var(--gold-lo) !important; color:var(--parch) !important; border-radius:2px !important; font-family:var(--disp); }
.rankings_menu a:hover{ border-color:var(--gold) !important; color:var(--gold-hi) !important; box-shadow:0 0 14px rgba(201,162,75,.3); }
.rankings_menu a.active{ background:linear-gradient(180deg,var(--gold-hi),var(--gold)) !important; color:#1a1206 !important; border-color:#6e521f !important; }
.rankings-update-time{ color:var(--mut) !important; }
.rankings-class-image,.rounded_corners_image{ border:1px solid var(--gold-lo); box-shadow:0 0 6px rgba(0,0,0,.6) !important; }

.general-table-ui,.myaccount-table{ background:var(--stone1) !important; border:1px solid var(--gold-lo) !important; color:var(--parch) !important; }
.general-table-ui tr td,.myaccount-table tr td{ border-bottom:1px solid var(--edge2) !important; color:var(--parch); }
.general-table-ui tr:first-child td{ color:var(--gold-hi) !important; }
.myaccount-table tr td:first-child{ color:var(--gold-hi) !important; }
.general-table-ui tr:nth-child(2n+2) td{ background:rgba(201,162,75,.03) !important; }
.download-description,.module-requirements{ color:var(--mut) !important; }
.tos_list li{ color:var(--gold-hi) !important; } .tos_list li p{ color:var(--parch) !important; }

.sidebar-banner img{ border:1px solid var(--gold-lo) !important; border-radius:3px !important; box-shadow:0 6px 18px rgba(0,0,0,.5); }
.sidebar-banner img:hover{ box-shadow:0 6px 22px rgba(201,162,75,.3); }
.webengine-online-bar{ background:#0c0803 !important; border:1px solid var(--gold-lo) !important; }
.webengine-online-bar .webengine-online-bar-progress{ background:linear-gradient(90deg,#7e5f24,var(--gold),var(--gold-hi)) !important; box-shadow:0 0 12px rgba(201,162,75,.5); }

.castle-siege-banner{ border:1px solid var(--gold-lo); } .castle-siege-banner-title{ color:var(--gold-hi) !important; }
.castle-siege-banner-countdown span{ color:var(--gold-hi) !important; } .castle-siege-banner-guildlogo{ border:1px solid var(--gold-lo) !important; }
.csinfo_ginfo table tr td:first-child{ color:var(--gold-hi) !important; } .csinfo_glist li:hover{ background:rgba(201,162,75,.08) !important; } .castle-owner-widget .alt{ color:var(--gold-hi) !important; }

.footer{ background:linear-gradient(180deg,#0a0603,#070401) !important; border-top:2px solid var(--gold-lo) !important; color:var(--mut) !important; box-shadow:inset 0 1px 0 rgba(201,162,75,.2); }
.footer p{ color:var(--mut); } .footer a{ color:var(--gold-hi); }
.webengine-powered{ color:var(--mut) !important; } .webengine-powered:hover{ color:var(--gold-hi) !important; }

/* reveal */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s } .reveal.d3{ transition-delay:.24s } .reveal.d4{ transition-delay:.32s }

/* scrollbar */
::-webkit-scrollbar{ width:12px; height:12px; } ::-webkit-scrollbar-track{ background:#070401; }
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--gold-lo),#5a441b); border-radius:6px; border:2px solid #070401; } ::-webkit-scrollbar-thumb:hover{ background:var(--gold); }

/* ============================================== RESPONSIVE ============ */
@media (max-width:1100px){ html{ min-width:0 !important; } .vm-features{ grid-template-columns:repeat(2,1fr); } .vm-classes{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){
  html,body{ min-width:0 !important; }
  .vm-top{ flex-wrap:wrap; padding:14px 16px; } .vm-burger{ display:inline-flex; order:2; } .vm-brand{ order:1; } .vm-cta{ display:none; }
  #navbar{ order:3; flex:1 0 100%; max-height:0; overflow:hidden; transition:max-height .35s ease; } body.vm-menu-open #navbar{ max-height:480px; }
  #navbar ul{ flex-direction:column; gap:0; } #navbar ul li{ font-size:13px; } #navbar ul li a{ display:block; padding:14px 6px !important; border-bottom:1px solid var(--edge2); }
  .vm-stats{ flex-wrap:wrap; margin-top:18px; } .vm-stat{ flex:1 0 44%; }
  .vm-features{ grid-template-columns:1fr; } .vm-classes{ grid-template-columns:repeat(2,1fr); } .vm-class{ height:240px; }
  .vm-crest{ width:90vw; } .vm-hero{ min-height:80vh; } .vm-sec-head h2{ font-size:30px; } .vm-castle h2{ font-size:34px; } .vm-section{ padding:54px 16px; }
  #content [class*="col-xs-"]{ width:100% !important; }
}

/* =======================================================================
   ViciosMU template propio · extras de arquitectura nueva
   ======================================================================= */

/* ---- LOGIN DESPLEGABLE EN HEADER ---- */
.vm-auth{ position:relative; }
.vm-auth-toggle{ cursor:pointer; }
.vm-auth-panel{ position:absolute; right:0; top:calc(100% + 14px); width:290px;
  background:linear-gradient(180deg,var(--stone2),var(--stone1)); border:1px solid var(--gold-lo);
  border-radius:4px; box-shadow:0 20px 54px rgba(0,0,0,.65); padding:20px; z-index:90;
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .2s ease, transform .2s ease, visibility .2s; }
.vm-auth-panel::before{ content:""; position:absolute; inset:5px; border:1px solid var(--edge2); pointer-events:none; }
.vm-auth.open .vm-auth-panel{ opacity:1; visibility:visible; transform:none; }
.vm-auth-title{ font-family:var(--disp); color:var(--gold-hi); letter-spacing:.12em; text-transform:uppercase; font-size:13px; margin-bottom:14px; text-align:center; }
.vm-auth-panel .form-group{ margin-bottom:10px; }
.vm-auth-panel .btn-yellow{ width:100%; padding:11px; }
.vm-auth-panel ul{ list-style:none; padding:0; margin:0; }
.vm-auth-panel ul li{ border-bottom:1px solid var(--edge2); }
.vm-auth-panel ul li a{ display:block; padding:10px 4px; color:var(--parch); font-family:var(--disp); font-size:13px; letter-spacing:.04em; }
.vm-auth-panel ul li a:hover{ color:var(--gold-hi); }
.vm-auth-panel ul li img{ display:none; }
.vm-auth-foot{ margin-top:12px; display:flex; justify-content:space-between; font-size:12px; }
.vm-auth-foot a{ color:var(--mut); } .vm-auth-foot a:hover{ color:var(--gold-hi); }

/* ---- PÁGINAS INTERNAS (una columna centrada) ---- */
.vm-pagehead{ text-align:center; padding:54px 20px 6px; }
.vm-pagehead .crumb{ font-family:var(--disp); letter-spacing:.42em; font-size:12px; text-transform:uppercase; color:var(--gold); }
.vm-pagehead::after{ content:""; display:block; width:120px; height:2px; margin:16px auto 0; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.vm-page{ max-width:1040px; margin:0 auto; padding:30px 24px 80px; }
.vm-page .module-contents{ padding:30px 32px 42px; }

/* ---- FOOTER EN COLUMNAS ---- */
.vm-foot{ position:relative; border-top:2px solid var(--gold-lo); background:linear-gradient(180deg,#0a0603,#060300);
  padding:50px 30px 28px; box-shadow:inset 0 1px 0 rgba(201,162,75,.22); margin-top:10px; }
.vm-foot-grid{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr 1.1fr; gap:34px; }
.vm-foot-brand{ display:flex; align-items:center; gap:11px; font-family:var(--decor); color:var(--gold-hi); font-size:22px; margin-bottom:14px; }
.vm-foot-brand .gem{ width:12px; height:12px; background:var(--gold); transform:rotate(45deg); box-shadow:0 0 10px var(--gold); }
.vm-foot h4{ font-family:var(--disp); color:var(--gold-hi); letter-spacing:.12em; text-transform:uppercase; font-size:13px; margin:0 0 16px; }
.vm-foot p{ color:var(--mut); font-size:14px; line-height:1.8; }
.vm-foot ul{ list-style:none; padding:0; margin:0; }
.vm-foot ul li{ padding:5px 0; }
.vm-foot a{ color:var(--mut); } .vm-foot a:hover{ color:var(--gold-hi); }
.vm-foot-info span{ color:var(--gold-hi); font-weight:600; }
.vm-foot-bottom{ max-width:1200px; margin:32px auto 0; padding-top:18px; border-top:1px solid var(--edge2); text-align:center; color:var(--mut); font-size:13px; font-style:italic; }

/* top resets home (tabla en marco) */
.vm-rankwrap{ max-width:860px; margin:0 auto; border-radius:4px; }
.vm-rankwrap .table{ margin:0; }
.vm-rankwrap .table td,.vm-rankwrap .table th{ padding:11px 14px; }

@media (max-width:760px){ .vm-foot-grid{ grid-template-columns:1fr; gap:24px; } .vm-auth-panel{ width:250px; } }

/* =======================================================================
   POTENCIADO murosario-style: rates, eventos, BAZAR
   ======================================================================= */

/* ---- RATES RIBBON (hero) ---- */
.vm-rates{ display:inline-flex; margin-top:20px; border:1px solid var(--gold-lo); border-radius:3px; overflow:hidden;
  background:linear-gradient(180deg,rgba(44,30,12,.72),rgba(22,15,7,.72)); box-shadow:inset 0 0 18px rgba(0,0,0,.5); }
.vm-rate{ padding:11px 26px; border-right:1px solid var(--gold-lo); text-align:center; }
.vm-rate:last-child{ border-right:0; }
.vm-rate b{ display:block; font-family:var(--disp); color:var(--gold-hi); font-size:21px; font-weight:700; line-height:1; }
.vm-rate span{ display:block; margin-top:5px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--mut); font-family:var(--disp); }

/* ---- EVENTOS ---- */
.vm-events{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.vm-event{ position:relative; background:linear-gradient(180deg,var(--stone3),var(--stone1)); border:1px solid var(--gold-lo);
  border-radius:4px; padding:26px 18px; text-align:center; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.vm-event::before{ content:""; position:absolute; inset:5px; border:1px solid var(--edge2); pointer-events:none; }
.vm-event:hover{ transform:translateY(-5px); border-color:var(--gold); box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 20px rgba(201,164,76,.16); }
.vm-event .ic{ width:54px; height:54px; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--gold-hi); font-size:22px; background:radial-gradient(circle at 40% 30%, rgba(201,164,76,.22), rgba(20,13,6,.6)); border:1px solid var(--gold-lo); }
.vm-event h4{ font-family:var(--disp); font-size:16px; color:var(--gold-hi); letter-spacing:.05em; text-transform:uppercase; margin:0 0 6px; }
.vm-event .sched{ color:var(--mut); font-size:12px; font-style:italic; }

/* ---- BAZAR (slots de ítems estilo inventario MU) ---- */
.vm-bazar{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; max-width:1140px; margin:0 auto; }
.vm-item{ position:relative; background:linear-gradient(180deg,var(--stone3),var(--stone1)); border:1px solid var(--gold-lo);
  border-radius:4px; padding:18px 14px; text-align:center; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.vm-item:hover{ transform:translateY(-5px); border-color:var(--gold); box-shadow:0 16px 42px rgba(0,0,0,.55), 0 0 26px rgba(111,176,255,.28); }
.vm-item .slot{ width:78px; height:78px; margin:0 auto 14px; border-radius:4px; display:flex; align-items:center; justify-content:center;
  font-size:32px; color:var(--arc); border:1px solid var(--gold-lo);
  background:radial-gradient(circle at 42% 32%, rgba(111,176,255,.20), rgba(10,7,3,.85)); box-shadow:inset 0 0 18px rgba(0,0,0,.65), 0 0 14px rgba(111,176,255,.12); }
.vm-item .iname{ font-family:var(--disp); color:var(--gold-hi); font-size:13px; letter-spacing:.03em; line-height:1.3; }
.vm-item .iname.exc{ color:#8fc4ff; text-shadow:0 0 10px rgba(111,176,255,.5); }
.vm-item .iprice{ color:var(--parch); font-size:13px; margin-top:8px; }
.vm-item .iprice b{ color:var(--gold-hi); font-weight:700; }
.vm-item .iseller{ color:var(--mut); font-size:11px; margin-top:3px; font-style:italic; }
.vm-bazar-note{ text-align:center; color:var(--mut); font-size:13px; font-style:italic; margin-top:26px; }

@media (max-width:1100px){ .vm-events{ grid-template-columns:repeat(2,1fr); } .vm-bazar{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .vm-rates{ flex-wrap:wrap; } .vm-rate{ flex:1 0 33%; } .vm-events{ grid-template-columns:1fr; } .vm-bazar{ grid-template-columns:repeat(2,1fr); } }