/*!
    
 =========================================================
 * WebEngine CMS
 * https://webenginecms.org/
 =========================================================
 
 * Author Lautaro Angelico (https://lautaroangelico.com/)
 * Copyright (c) 2013-2020 Lautaro Angelico, All Rights Reserved
 
 * Licensed under the MIT license
 * http://opensource.org/licenses/MIT
 
 =========================================================
 
*/
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    border-top: none !important;
}

a:focus, a:hover {
    color: inherit !important;
    text-decoration: none !important;
}

.form-control {
	background: #fafafa;
	border: 1px solid #e3e3e3;
	color: #666;
}
.form-control:focus {
	border: 1px solid #ccc;
}

/* http://stackoverflow.com/questions/19562903/remove-padding-from-columns-in-bootstrap-3 */
.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

/* http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3 */
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.thumbnail {
    background-color: #f1f1f1;
    border: 1px solid #e3e3e3;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: #ff0000;
}

.btn-primary {
    color: #ff0000;
    background-color: transparent;
	border-color: #ff0000;
	-moz-transition: all .1s ease-in;
    -o-transition: all .1s ease-in;
    -webkit-transition: all .1s ease-in;
    transition: all .1s ease-in;
	-moz-border-radius: 0px;
	border-radius: 0px;
}
.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
    color: #fff !important;
    background-color: #ff0000 !important;
	border-color: #ff0000 !important;
}








/* ==========================================================================
   Corrección de Posición para Bloques de la Derecha
   ========================================================================== */

/* 1. Limpiar fondos blancos molestos y corregir el texto para que combine con tu web */
#game, 
#top_10, 
#top_10g, 
#top_10k, 
#ajaxtop10 {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 5px !important;
}

/* Cambiar textos claros/difusos a un color que se lea sobre el fondo negro */
#game a, 
#top_10 td, 
#top_10g td, 
#top_10k td {
    color: #f0e6d2 !important; 
    text-shadow: 1px 1px 2px #000 !important;
}

/* 2. Forzar a los bloques caídos a moverse a la columna de la derecha */
/* Si tu diseño usa contenedores posicionables, esto los empuja a su lugar bajo los títulos oscuros */
@media (min-width: 992px) {
    /* Mover el bloque de clasificaciones generales a la derecha */
    td[valign="top"] #server_info,
    td[valign="top"] #top_10,
    td[valign="top"] #top_10g,
    td[valign="top"] #top_10k {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        display: block !important;
        width: 100% !important;
    }
}



/* Eliminar el bloque de User Control Panel del centro */
.panel:has(.panel-title), 
.panel-default:has(h3) {
    display: none !important;
}

/* En caso de que tu servidor no soporte la regla anterior, usa esta alternativa */
h3.panel-title {
    display: none !important;
}







/* ==========================================================================
   Eliminación Total de Bloques Blancos del Centro (Bootstrap / WebEngine)
   ========================================================================== */

/* Forzar la desaparición del contenedor con fondo blanco del User Control Panel */
.panel.panel-default,
div[class*="panel"] {
    display: none !important;
}

/* Ocultar títulos de encabezados de tercer nivel duplicados (Top Level+, Top Guilds+) */
h3 {
    display: none !important;
}

/* Eliminar las tablas con fondo claro que caen en el centro de las noticias */
.pages_center_center table,
.contenido table {
    display: none !important;
}

/* Ocultar enlaces sueltos de navegación del bloque roto (ej. el texto "More") */
.pages_center_center .more,
.pages_center_center a[href*="logout"] {
    display: none !important;
}









/* ==========================================================================
   INTERFAZ DE REDES SOCIALES FLOTANTES - ESTILO MU ONLINE
   ========================================================================== */

/* Contenedor principal con animación de movimiento continuo (Sube y baja) */
.mu-redes-container {
    position: fixed;
    right: 25px;
    top: 45%;
    transform: translateY(-50%);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 18px;
    animation: muFloating 3s ease-in-out infinite; /* Movimiento fluido */
}

/* Diseño de botón estilo Ítem / Ventana RPG */
.mu-btn-social {
    position: relative;
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, #151c14 0%, #080c06 100%) !important;
    border: 2px solid #3c5a2b !important; /* Borde verde oscuro medieval */
    border-radius: 8px !important; /* Estilo cuadrado redondeado clásico de MMORPG */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.85), inset 0px 0px 8px rgba(76, 175, 80, 0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    padding: 12px;
    cursor: pointer;
    text-decoration: none !important;
}

/* Iconos internos limpios */
.mu-btn-social img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.8));
}

/* Textos flotantes pequeños estilo indicador de juego (Tooltips) */
.mu-social-text {
    position: absolute;
    right: 70px;
    background: rgba(5, 10, 5, 0.95);
    border: 1px solid #4caf50;
    color: #cbdcb9 !important;
    font-family: 'Cinzel', 'PT Sans', sans-serif;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(15px);
    transition: all 0.3s ease;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
    pointer-events: none;
    text-shadow: 1px 1px 2px #000;
}

/* ==========================================================================
   Efectos Hover (Al pasar el mouse por encima)
   ========================================================================== */

.mu-btn-social:hover {
    transform: scale(1.1);
    border-color: #81c784 !important; /* Brillo verde más claro al tocarlo */
}

/* Mostrar el cartel indicador al hacer Hover */
.mu-btn-social:hover .mu-social-text {
    opacity: 1;
    transform: translateX(0);
}

/* Destellos neón específicos según la red social */
.mu-btn-social.whatsapp:hover {
    box-shadow: 0px 0px 20px rgba(37, 211, 102, 0.7), inset 0px 0px 10px rgba(37, 211, 102, 0.3);
}
.mu-btn-social.discord:hover {
    box-shadow: 0px 0px 20px rgba(88, 101, 242, 0.7), inset 0px 0px 10px rgba(88, 101, 242, 0.3);
}
.mu-btn-social.facebook:hover {
    box-shadow: 0px 0px 20px rgba(24, 119, 242, 0.7), inset 0px 0px 10px rgba(24, 119, 242, 0.3);
}

/* ==========================================================================
   ANIMACIONES (Efecto Levitación de Ítem)
   ========================================================================== */
@keyframes muFloating {
    0% {
        transform: translateY(-53%);
    }
    50% {
        transform: translateY(-47%);
    }
    100% {
        transform: translateY(-53%);
    }
}








/* ==========================================================================
   INTERFAZ DE REDES SOCIALES FLOTANTES - MARCAS OFICIALES RPG
   ========================================================================== */

.mu-redes-container {
    position: fixed;
    right: 25px;
    top: 45%;
    transform: translateY(-50%);
    z-index: 999999 !important;
    display: flex;
    flex-direction: column;
    gap: 18px;
    animation: muFloating 3s ease-in-out infinite;
}

.mu-btn-social {
    position: relative;
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, #151c14 0%, #080c06 100%) !important;
    border: 2px solid #3c5a2b !important; /* Borde verde oscuro medieval */
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.85), inset 0px 0px 8px rgba(76, 175, 80, 0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Forzar la renderización de la tipografía de marcas Font Awesome */
.mu-icon-rpg {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 26px !important;
    color: #ffffff !important; /* Color blanco inicial estilo ítem */
    display: inline-block !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    transition: color 0.3s ease, filter 0.3s ease !important;
}

.mu-social-text {
    position: absolute;
    right: 70px;
    background: rgba(5, 10, 5, 0.95);
    border: 1px solid #4caf50;
    color: #cbdcb9 !important;
    font-family: 'Cinzel', 'PT Sans', sans-serif;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(15px);
    transition: all 0.3s ease;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
    pointer-events: none;
    text-shadow: 1px 1px 2px #000;
}

/* ==========================================================================
   Efectos de Iluminación Hover (Cambio de color oficial al tocar)
   ========================================================================== */

.mu-btn-social:hover {
    transform: scale(1.1);
    border-color: #81c784 !important;
}

.mu-btn-social:hover .mu-social-text {
    opacity: 1;
    transform: translateX(0);
}

.mu-btn-social.whatsapp:hover {
    box-shadow: 0px 0px 20px rgba(37, 211, 102, 0.7), inset 0px 0px 10px rgba(37, 211, 102, 0.3);
}
.mu-btn-social.whatsapp:hover .mu-icon-rpg {
    color: #25D366 !important; /* Verde oficial WhatsApp */
    filter: drop-shadow(0px 0px 5px #25D366) !important;
}

.mu-btn-social.discord:hover {
    box-shadow: 0px 0px 20px rgba(88, 101, 242, 0.7), inset 0px 0px 10px rgba(88, 101, 242, 0.3);
}
.mu-btn-social.discord:hover .mu-icon-rpg {
    color: #5865F2 !important; /* Azul oficial Discord */
    filter: drop-shadow(0px 0px 5px #5865F2) !important;
}

.mu-btn-social.facebook:hover {
    box-shadow: 0px 0px 20px rgba(24, 119, 242, 0.7), inset 0px 0px 10px rgba(24, 119, 242, 0.3);
}
.mu-btn-social.facebook:hover .mu-icon-rpg {
    color: #1877F2 !important; /* Azul oficial Facebook */
    filter: drop-shadow(0px 0px 5px #1877F2) !important;
}

@keyframes muFloating {
    0% { transform: translateY(-53%); }
    50% { transform: translateY(-47%); }
    100% { transform: translateY(-53%); }
}











/* ==========================================================================
   POP-UP SISTEMA VIP - ESTILO INTERFAZ MU ONLINE
   ========================================================================== */

/* Fondo oscuro translúcido detrás del cartel */
.mu-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999999 !important;
}

/* Caja contenedora del cartel estilo Ventana de Ítem */
.mu-modal-content {
    background: linear-gradient(135deg, #10160f 0%, #050805 100%) !important;
    border: 3px solid #3c5a2b !important; /* Borde verde oscuro */
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0px 0px 30px rgba(76, 175, 80, 0.4);
    position: relative;
    font-family: 'Cinzel', 'PT Sans', sans-serif;
    color: #e0e0e0 !important;
    overflow: hidden;
    animation: fadeInVip 0.4s ease-out;
}

/* Botón de cierre (X) */
.mu-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: transparent;
    border: none;
    color: #81c784;
    font-size: 32px;
    cursor: pointer;
    transition: color 0.2s ease;
    z-index: 10;
}
.mu-modal-close:hover {
    color: #ff5252;
}

/* Cuerpo interno del cartel */
.mu-modal-body {
    padding: 25px 25px 15px 25px;
    max-height: 75vh;
    overflow-y: auto; /* Permite scroll si la pantalla es chica */
}

/* Títulos y textos */
.mu-vip-title {
    color: #ffca28 !important; /* Dorado */
    font-size: 22px;
    text-align: center;
    margin: 0 0 5px 0;
    text-shadow: 1px 1px 3px #000;
}
.mu-vip-subtitle {
    color: #4caf50 !important; /* Verde */
    font-size: 12px;
    text-align: center;
    letter-spacing: 2px;
    margin: 0 0 15px 0;
}
.mu-vip-badge {
    background: #1b2e18;
    border: 1px solid #4caf50;
    color: #ffffff;
    text-align: center;
    padding: 6px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 10px;
}
.mu-vip-desc {
    font-size: 12px;
    text-align: center;
    color: #b0b0b0;
    line-height: 1.4;
}

.mu-vip-section-title {
    color: #ffca28 !important;
    font-size: 14px;
    border-bottom: 1px solid #3c5a2b;
    padding-bottom: 5px;
    margin: 20px 0 10px 0;
}

/* Listado de Beneficios */
.mu-vip-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mu-vip-list li {
    font-size: 13px;
    padding: 5px 0;
    border-bottom: 1px dashed rgba(76, 175, 80, 0.1);
    text-shadow: 1px 1px 1px #000;
}

/* Precios */
.mu-vip-prices p {
    margin: 8px 0;
    font-size: 13px;
}
.mu-vip-prices strong {
    color: #ffffff;
}
.payment-method {
    color: #a5d6a7;
    display: block;
    font-size: 11px;
    margin-top: 20px;
}
.mu-vip-footer-text {
    font-size: 12px;
    text-align: center;
    color: #ffca28;
    margin-top: 15px;
}

/* Botón Adquirir en la base */
.mu-modal-footer {
    padding: 15px;
    background: rgba(0, 0, 0, 0.4);
    text-align: center;
    border-top: 1px solid #3c5a2b;
}
.mu-btn-adquirir {
    display: inline-block;
    background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%) !important;
    border: 1px solid #81c784 !important;
    color: #ffffff !important;
    font-weight: bold;
    font-size: 16px;
    padding: 10px 40px;
    text-decoration: none !important;
    border-radius: 6px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    letter-spacing: 1px;
}
.mu-btn-adquirir:hover {
    transform: scale(1.05);
    box-shadow: 0px 0px 15px #4caf50;
    filter: brightness(1.1);
}

/* Animación de entrada suave */
@keyframes fadeInVip {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}








/* ==========================================================================
   PLUGIN TIKTOK LIVE FLOTANTE - ESTILO INTERFAZ RPG
   ========================================================================== */

/* Contenedor Flotante Abajo a la Derecha */
.tk-live-container {
    position: fixed;
    bottom: 20px;
    right: 25px;
    width: 260px;
    background: linear-gradient(135deg, #0d0d0d 0%, #050505 100%) !important;
    border: 2px solid #fe2c55 !important; /* Borde rojo oficial TikTok */
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0px 0px 20px rgba(254, 44, 85, 0.3), inset 0px 0px 10px rgba(37, 244, 238, 0.1);
    z-index: 999998 !important;
    font-family: 'Cinzel', 'PT Sans', sans-serif;
    animation: tkGlowPulse 4s ease-in-out infinite, tkPopIn 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Botón para Cerrar (X) */
.tk-live-close {
    position: absolute;
    top: 5px;
    right: 10px;
    background: transparent;
    border: none;
    color: #a0a0a0;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease;
}
.tk-live-close:hover {
    color: #fe2c55;
}

/* Indicador LIVE Transmitiendo */
.tk-status-box {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.tk-status-text {
    font-size: 11px;
    font-weight: bold;
    color: #fe2c55 !important;
    letter-spacing: 1.5px;
    text-shadow: 0 0 5px rgba(254, 44, 85, 0.5);
}

/* Punto Rojo Parpadeante */
.tk-pulse-dot {
    width: 8px;
    height: 8px;
    background-color: #fe2c55;
    border-radius: 50%;
    display: inline-block;
    animation: tkDotBlink 1.2s infinite;
    box-shadow: 0 0 8px #fe2c55;
}

/* Textos Informativos */
.tk-server-name {
    color: #ffffff !important;
    font-size: 16px;
    margin: 0 0 4px 0;
    text-shadow: 1px 1px 2px #000;
}
.tk-live-desc {
    color: #b0b0b0 !important;
    font-size: 11px;
    line-height: 1.4;
    margin: 0 0 12px 0;
}

/* Botón Unirse Estilo Interfaz */
.tk-btn-join {
    display: block;
    text-align: center;
    background: linear-gradient(135deg, #fe2c55 0%, #b01c3a 100%) !important;
    border: 1px solid #25f4ee !important; /* Microborde celeste glitch */
    color: #ffffff !important;
    font-size: 12px;
    font-weight: bold;
    padding: 8px 0;
    text-decoration: none !important;
    border-radius: 5px;
    letter-spacing: 1px;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}
.tk-btn-join:hover {
    transform: scale(1.03);
    box-shadow: 0px 0px 15px rgba(37, 244, 238, 0.6);
    filter: brightness(1.1);
}

/* ==========================================================================
   ANIMACIONES (Efectos de Movimiento y Respiración Neón)
   ========================================================================== */

/* 1. Efecto Respiración Neón del Marco Flotante */
@keyframes tkGlowPulse {
    0% {
        transform: translateY(0);
        border-color: #fe2c55 !important;
        box-shadow: 0px 0px 20px rgba(254, 44, 85, 0.3);
    }
    50% {
        transform: translateY(-6px); /* Pequeño movimiento sutil hacia arriba */
        border-color: #25f4ee !important; /* Cambia sutilmente al celeste de TikTok */
        box-shadow: 0px 5px 25px rgba(37, 244, 238, 0.4);
    }
    100% {
        transform: translateY(0);
        border-color: #fe2c55 !important;
        box-shadow: 0px 0px 20px rgba(254, 44, 85, 0.3);
    }
}

/* 2. Parpadeo del Punto de Transmisión */
@keyframes tkDotBlink {
    0% { opacity: 0.3; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0.3; transform: scale(0.9); }
}

/* 3. Animación de Entrada al Cargar la Web */
@keyframes tkPopIn {
    from { opacity: 0; transform: translateY(40px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}





/* ==========================================================================
   PLUGIN VIP MINI-FLOTANTE CORREGIDO CON BOTÓN FIJO (IZQUIERDA)
   ========================================================================== */

/* Contenedor Flotante Fijo Abajo a la Izquierda */
.vip-live-container {
    position: fixed;
    bottom: 20px;
    left: 25px;
    width: 310px;       
    height: 460px; /* Altura fija para controlar la visualización del botón */
    background: linear-gradient(135deg, #0d0d0d 0%, #050505 100%) !important;
    border: 2px solid #ffca28 !important; /* Borde Dorado */
    border-radius: 10px;
    padding: 15px 12px 12px 18px; 
    box-shadow: 0px 0px 25px rgba(255, 202, 40, 0.25), inset 0px 0px 10px rgba(76, 175, 80, 0.1);
    z-index: 999998 !important;
    font-family: 'Cinzel', 'PT Sans', sans-serif;
    display: flex;
    flex-direction: column;
    animation: vipGlowPulse 4s ease-in-out infinite, vipPopIn 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Envoltura interna flex */
.vip-live-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Contenido interno con scroll medieval prolijo */
.vip-scroll-body {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 12px;
    padding-right: 10px;
}

/* Personalización de la barra de scroll */
.vip-scroll-body::-webkit-scrollbar {
    width: 4px;
}
.vip-scroll-body::-webkit-scrollbar-thumb {
    background: #3c5a2b;
    border-radius: 4px;
}

/* Botón para Cerrar (X) */
.vip-live-close {
    position: absolute;
    top: 5px;
    right: 12px;
    background: transparent;
    border: none;
    color: #a0a0a0;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease;
    z-index: 10;
}
.vip-live-close:hover {
    color: #ff5252;
}

/* Encabezados y Estado */
.vip-status-box {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.vip-status-text {
    font-size: 10px; 
    font-weight: bold;
    color: #ffca28 !important;
    letter-spacing: 1px;
    text-shadow: 0 0 5px rgba(255, 202, 40, 0.4);
}
.vip-pulse-dot {
    width: 7px;
    height: 7px;
    background-color: #4caf50; 
    border-radius: 50%;
    display: inline-block;
    animation: vipDotBlink 1.2s infinite;
    box-shadow: 0 0 6px #4caf50;
}

.vip-server-name {
    color: #ffffff !important;
    font-size: 14px; 
    margin: 0 0 4px 0;
    text-shadow: 1px 1px 2px #000;
}
.vip-badge-text {
    font-size: 11px; 
    color: #4caf50;
    font-weight: bold;
    margin-bottom: 6px;
}
.vip-live-desc {
    color: #b0b0b0 !important;
    font-family: 'PT Sans', sans-serif;
    font-size: 11px; 
    line-height: 1.4;
    margin: 0 0 8px 0;
}

/* Separadores de sección internos */
.vip-section-title {
    color: #ffca28 !important;
    font-size: 11px; 
    font-weight: bold;
    border-bottom: 1px solid #3c5a2b;
    padding-bottom: 3px;
    margin: 12px 0 6px 0;
}

/* Listado de Características */
.vip-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.vip-features-list li {
    font-family: 'PT Sans', sans-serif;
    font-size: 11px; 
    color: #e0e0e0 !important;
    padding: 3px 0;
    text-shadow: 1px 1px 1px #000;
    white-space: normal !important; 
    line-height: 1.3;
}

/* Precios */
.vip-prices-box p {
    font-family: 'PT Sans', sans-serif;
    font-size: 11px; 
    margin: 6px 0;
    color: #ffffff !important;
}
.vip-prices-box small {
    color: #a5d6a7;
    font-size: 10px;
}
.vip-prices-box strong {
    color: #ffca28 !important;
}
.vip-footer-notice {
    font-family: 'PT Sans', sans-serif;
    font-size: 11px; 
    color: #ffffff !important;
    margin-top: 10px;
    text-align: center;
    line-height: 1.3;
}

/* Contenedor del Botón Base */
.vip-footer-button {
    padding-top: 5px;
    border-top: 1px solid rgba(76, 175, 80, 0.2);
}

/* Botón Adquirir Estilo TikTok Fijo */
.vip-btn-join {
    display: block;
    text-align: center;
    background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%) !important;
    border: 1px solid #ffca28 !important;
    color: #ffffff !important;
    font-size: 12px;
    font-weight: bold;
    padding: 9px 0;
    text-decoration: none !important;
    border-radius: 5px;
    letter-spacing: 1px;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}
.vip-btn-join:hover {
    transform: scale(1.02);
    box-shadow: 0px 0px 15px rgba(255, 202, 40, 0.5);
    filter: brightness(1.1);
}

/* ==========================================================================
   ANIMACIONES
   ========================================================================== */
@keyframes vipGlowPulse {
    0% {
        transform: translateY(0);
        border-color: #ffca28 !important;
        box-shadow: 0px 0px 20px rgba(255, 202, 40, 0.2);
    }
    50% {
        transform: translateY(-6px);
        border-color: #4caf50 !important;
        box-shadow: 0px 5px 25px rgba(76, 175, 80, 0.4);
    }
    100% {
        transform: translateY(0);
        border-color: #ffca28 !important;
        box-shadow: 0px 0px 20px rgba(255, 202, 40, 0.2);
    }
}
@keyframes vipDotBlink {
    0% { opacity: 0.3; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0.3; transform: scale(0.9); }
}
@keyframes vipPopIn {
    from { opacity: 0; transform: translateY(40px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}