/* =========================================================
   KRAFEX — ENTRETENIMIENTO
   EVENTOS · OFERTAS · CUPONES · CLUB · JUEGOS
   SISTEMA VISUAL OFICIAL
   ========================================================= */

:root {
    --ent-bg: #08090b;
    --ent-panel: #0d1014;
    --ent-panel-2: #11151a;
    --ent-border: rgba(255,255,255,.08);

    --neon-green: #39ff88;
    --neon-green-soft: rgba(57,255,136,.18);

    --neon-red: #ff3b5c;
    --neon-red-soft: rgba(255,59,92,.18);

    --neon-gold: #ffd76a;
    --neon-gold-soft: rgba(255,215,106,.18);

    --neon-blue: #39cfff;
    --neon-purple: #b66cff;

    --official-black: #0A0A0B;
    --official-gray: #2A2A2E;
    --official-ivory: #F5F1E8;
    --official-gold: #D6C3A3;
    --official-green: #0F3D2E;
    --official-pink: #CFA6A1;
}

/* =========================================================
   BASE
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(57,255,136,.035),
            transparent 35%
        ),
        var(--ent-bg);
    color: var(--official-ivory);
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
}

/* =========================================================
   CONTENEDOR GENERAL
   ========================================================= */

body.pagina-entretenimiento {
    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(57,255,136,.08),
            transparent 38%
        ),
        var(--ent-bg);
}

/* =========================================================
   SIDEBAR
   ========================================================= */

/* =====================================================
   KRAFEX — SIDEBAR ENTRETENIMIENTO
   SUBMENÚS FUNCIONALES
   ===================================================== */

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 60px;
    height: 100vh;
    z-index: 1000;

    overflow-y: auto;
    overflow-x: visible;

    transition: width 0.3s ease;
}

/* SIDEBAR ABIERTO */

.sidebar.open {
    width: 150px;
}

/* =====================================================
   ELEMENTOS PRINCIPALES
   ===================================================== */

.sidebar > a,
.sidebar > li {
    position: relative;
    list-style: none;
}

.sidebar a {
    text-decoration: none;
}

.sidebar .material-symbols-rounded {
    flex-shrink: 0;
}

/* =====================================================
   SUBMENÚ
   ===================================================== */

.sidebar .submenu {
    display: none;

    position: relative;

    width: 100%;
    margin: 0;
    padding: 0;

    list-style: none;

    overflow: hidden;
}

/* SUBMENÚ ABIERTO */

.sidebar .has-submenu.active > .submenu {
    display: block;
}

/* =====================================================
   ELEMENTOS DEL SUBMENÚ
   ===================================================== */

.sidebar .submenu li {
    display: block;
    width: 100%;
    list-style: none;
}

.sidebar .submenu li a {
    display: flex;

    align-items: center;
    gap: 10px;

    width: 100%;
    min-height: 42px;

    padding: 8px 10px;

    box-sizing: border-box;
}

/* =====================================================
   ICONOS DEL SUBMENÚ
   ===================================================== */

.sidebar .submenu li .material-symbols-rounded {
    font-size: 20px;
}

/* =====================================================
   TEXTO DEL SUBMENÚ
   ===================================================== */

.sidebar .submenu li span {
    white-space: nowrap;
}

/* =====================================================
   SIDEBAR CERRADO
   ===================================================== */

.sidebar:not(.open) .submenu {
    position: fixed;

    left: 60px;

    width: 190px;

    margin-top: -42px;

    padding: 6px;

    border-radius: 0 10px 10px 0;

    z-index: 2000;
}

/* =====================================================
   CUANDO SE ABRE EL SUBMENÚ CON SIDEBAR CERRADO
   ===================================================== */

.sidebar:not(.open) .has-submenu.active > .submenu {
    display: block;
}

/* =====================================================
   TEXTO OCULTO CUANDO SIDEBAR ESTÁ CERRADO
   ===================================================== */

.sidebar:not(.open) .submenu span {
    display: inline-block;
}

/* =====================================================
   SIDEBAR ABIERTO
   ===================================================== */

.sidebar.open .submenu {
    position: relative;

    left: 0;

    width: 100%;

    margin-top: 0;

    padding: 0;
}

/* =====================================================
   HOVER
   ===================================================== */

.sidebar .submenu li a:hover {
    transition: 0.2s ease;
}

/* =====================================================
   SEPARACIÓN ENTRE ELEMENTOS
   ===================================================== */

.sidebar .submenu li + li {
    margin-top: 2px;
}

/* =====================================================
   EVITAR QUE EL CONTENT TAPE EL SUBMENÚ
   ===================================================== */

.content {
    position: relative;
    z-index: 1;
}

.sidebar {
    z-index: 9999;
}/* =========================================================
   TOOLTIP
   ========================================================= */

.tooltip {
    position: absolute;

    left: 68px;

    top: 50%;

    transform:
        translateY(-50%)
        translateX(-5px);

    padding: 7px 11px;

    border-radius: 6px;

    background: #101318;

    border: 1px solid rgba(57,255,136,.35);

    color: var(--neon-green);

    font-size: 12px;

    white-space: nowrap;

    opacity: 0;
    pointer-events: none;

    box-shadow:
        0 0 12px rgba(57,255,136,.12);

    transition:
        opacity .2s ease,
        transform .2s ease;
}

.sidebar:not(:hover):not(.active)
.has-submenu:hover
.tooltip {
    opacity: 1;

    transform:
        translateY(-50%)
        translateX(0);
}

/* =========================================================
   CONTENT
   ========================================================= */

.content {
    min-height: 100vh;

    margin-left: 60px;

    padding: 30px;

    transition:
        margin-left .3s ease;
}

/* =========================================================
   EVENTOS / OFERTAS / CUPONES / CLUB / JUEGOS
   ========================================================= */

.entertainment-page {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;
}

.entertainment-header {
    margin-bottom: 28px;
}

.entertainment-title {
    margin: 0;

    font-size: clamp(30px, 4vw, 52px);
    font-weight: 700;

    letter-spacing: -1px;

    color: var(--official-ivory);

    text-shadow:
        0 0 8px rgba(57,255,136,.15);
}

.entertainment-description {
    margin-top: 8px;

    color: #969ba2;

    font-size: 15px;
}

/* =========================================================
   CONTENEDOR DE TARJETAS
   ========================================================= */

.entertainment-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));

    gap: 22px;
}

/* =========================================================
   TARJETA BASE
   ========================================================= */

.entertainment-card {
    position: relative;

    overflow: hidden;

    min-height: 280px;

    padding: 24px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #11151a,
            #0b0e12
        );

    border: 1px solid var(--ent-border);

    box-shadow:
        0 12px 35px rgba(0,0,0,.3);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.entertainment-card:hover {
    transform: translateY(-4px);

    border-color:
        rgba(57,255,136,.3);

    box-shadow:
        0 15px 40px rgba(0,0,0,.45),
        0 0 18px rgba(57,255,136,.06);
}

/* =========================================================
   ESTADO ACTIVO
   VERDE NEÓN
   ========================================================= */

.entertainment-card.active-event {
    border-color:
        rgba(57,255,136,.65);

    box-shadow:
        0 0 10px rgba(57,255,136,.15),
        0 0 25px rgba(57,255,136,.08),
        inset 0 0 25px rgba(57,255,136,.025);
}

.entertainment-card.active-event::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background: var(--neon-green);

    box-shadow:
        0 0 8px var(--neon-green),
        0 0 18px var(--neon-green);
}

/* =========================================================
   ESTADO PRÓXIMAMENTE
   ROJO / MAGENTA NEÓN
   ========================================================= */

.entertainment-card.coming-soon {
    border-color:
        rgba(255,59,92,.55);

    box-shadow:
        0 0 10px rgba(255,59,92,.12),
        0 0 25px rgba(255,59,92,.06);
}

.entertainment-card.coming-soon::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background: var(--neon-red);

    box-shadow:
        0 0 8px var(--neon-red),
        0 0 18px var(--neon-red);
}

/* =========================================================
   ESTADO FINALIZADO
   DORADO DISCRETO
   ========================================================= */

.entertainment-card.finished {
    opacity: .72;

    border-color:
        rgba(214,195,163,.3);
}

.entertainment-card.finished::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background: var(--official-gold);

    box-shadow:
        0 0 8px rgba(214,195,163,.35);
}

/* =========================================================
   ESTADO
   ========================================================= */

.event-status {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 6px 10px;

    margin-bottom: 18px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .7px;

    text-transform: uppercase;
}

.event-status.active {
    color: var(--neon-green);

    background: var(--neon-green-soft);

    border: 1px solid
        rgba(57,255,136,.35);

    box-shadow:
        0 0 10px rgba(57,255,136,.08);
}

.event-status.upcoming {
    color: var(--neon-red);

    background: var(--neon-red-soft);

    border: 1px solid
        rgba(255,59,92,.35);

    box-shadow:
        0 0 10px rgba(255,59,92,.08);
}

.event-status.finished {
    color: var(--neon-gold);

    background: var(--neon-gold-soft);

    border: 1px solid
        rgba(255,215,106,.25);
}

/* =========================================================
   PUNTO DE ESTADO
   ========================================================= */

.event-status::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: currentColor;

    box-shadow:
        0 0 7px currentColor;
}

/* =========================================================
   TÍTULO TARJETA
   ========================================================= */

.entertainment-card h2,
.entertainment-card h3 {
    margin: 0 0 10px;

    color: var(--official-ivory);

    font-size: 23px;
}

.entertainment-card p {
    margin: 0;

    color: #9da2a8;

    line-height: 1.6;

    font-size: 14px;
}

/* =========================================================
   FECHAS
   ========================================================= */

.event-date {
    display: flex;
    flex-direction: column;

    gap: 5px;

    margin-top: 22px;

    padding: 14px;

    border-radius: 12px;

    background:
        rgba(255,255,255,.025);

    border: 1px solid
        rgba(255,255,255,.06);
}

.event-date-label {
    color: #777d84;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: .7px;
}

.event-date-value {
    color: var(--official-ivory);

    font-size: 14px;

    font-weight: 600;
}

/* =========================================================
   CONTADOR
   ========================================================= */

.event-countdown {
    display: flex;

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

    gap: 8px;

    margin-top: 18px;

    padding: 13px;

    border-radius: 10px;

    background:
        rgba(57,255,136,.035);

    border: 1px solid
        rgba(57,255,136,.12);

    color: var(--neon-green);

    font-weight: 700;

    font-variant-numeric: tabular-nums;

    text-shadow:
        0 0 7px rgba(57,255,136,.5);
}

.coming-soon .event-countdown {
    color: var(--neon-red);

    background:
        rgba(255,59,92,.035);

    border-color:
        rgba(255,59,92,.12);

    text-shadow:
        0 0 7px rgba(255,59,92,.5);
}

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

.entertainment-button {
    display: inline-flex;

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

    gap: 8px;

    width: 100%;

    margin-top: 20px;

    padding: 12px 18px;

    border: 1px solid
        rgba(57,255,136,.4);

    border-radius: 10px;

    background:
        rgba(57,255,136,.06);

    color: var(--neon-green);

    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    transition:
        background .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.entertainment-button:hover {
    transform: translateY(-1px);

    background:
        rgba(57,255,136,.12);

    box-shadow:
        0 0 12px rgba(57,255,136,.18);
}

.coming-soon .entertainment-button {
    border-color:
        rgba(255,59,92,.35);

    color: var(--neon-red);

    background:
        rgba(255,59,92,.05);
}

.coming-soon .entertainment-button:hover {
    background:
        rgba(255,59,92,.1);

    box-shadow:
        0 0 12px rgba(255,59,92,.15);
}

/* =========================================================
   CLUB — NEÓN PREMIUM
   ========================================================= */

.club-page .entertainment-card {
    border-color:
        rgba(182,108,255,.3);
}

.club-page .entertainment-card:hover {
    border-color:
        rgba(182,108,255,.7);

    box-shadow:
        0 0 22px rgba(182,108,255,.12);
}

/* =========================================================
   JUEGOS — NEÓN AZUL
   ========================================================= */

.play-page .entertainment-card {
    border-color:
        rgba(57,207,255,.3);
}

.play-page .entertainment-card:hover {
    border-color:
        rgba(57,207,255,.7);

    box-shadow:
        0 0 22px rgba(57,207,255,.12);
}

/* =========================================================
   OFERTAS — PALETA OFICIAL
   ========================================================= */

.offers-page .entertainment-card {
    border-color:
        rgba(214,195,163,.28);
}

.offers-page .entertainment-card:hover {
    border-color:
        rgba(214,195,163,.6);

    box-shadow:
        0 0 18px rgba(214,195,163,.08);
}

/* =========================================================
   CUPONES — PALETA OFICIAL
   ========================================================= */

.coupons-page .entertainment-card {
    border-color:
        rgba(207,166,161,.3);
}

.coupons-page .entertainment-card:hover {
    border-color:
        rgba(207,166,161,.65);

    box-shadow:
        0 0 18px rgba(207,166,161,.09);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .content {
        padding: 22px;
    }

    .entertainment-grid {
        grid-template-columns:
            repeat(auto-fit, minmax(240px, 1fr));
    }

}

@media (max-width: 600px) {

    .sidebar {
        width: 52px;
    }

    .sidebar i.material-symbols-rounded {
        min-width: 52px;
    }

    .content {
        margin-left: 52px;
        padding: 18px;
    }

    .entertainment-grid {
        grid-template-columns: 1fr;
    }

    .entertainment-title {
        font-size: 32px;
    }

}

/* =========================================================
   REDUCCIÓN DE MOVIMIENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }

}
/* =========================================================
   KRAFEX — NEÓN DE LUJO
   TOPBAR + SIDEBAR + DIVISORES + ICONOS
   EVENTOS · CLUB · JUEGOS
   ========================================================= */

:root {
    --neon-main: #39ff88;
    --neon-main-soft: rgba(57, 255, 136, 0.18);
    --neon-main-border: rgba(57, 255, 136, 0.45);

    --neon-red: #ff3b5c;
    --neon-red-soft: rgba(255, 59, 92, 0.18);

    --luxury-black: #08090b;
    --luxury-panel: #0c0f12;
    --luxury-panel-2: #101419;
}

/* =========================================================
   CUERPO
   ========================================================= */

body {
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(57,255,136,.055),
            transparent 35%
        ),
        #08090b;
}

/* =========================================================
   TOPBAR
   ========================================================= */

.topbar {
    position: fixed;

    top: 0;
    left: 60px;
    right: 0;

    height: 70px;

    z-index: 900;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            180deg,
            #090b0e 0%,
            #0c0f12 100%
        );

    border-bottom: 1px solid
        var(--neon-main-border);

    box-shadow:
        0 1px 0 rgba(57,255,136,.12),
        0 0 12px rgba(57,255,136,.08),
        0 8px 25px rgba(0,0,0,.35);

    transition:
        left .3s ease,
        box-shadow .3s ease;
}

/* línea neon superior */

.topbar::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background: var(--neon-main);

    box-shadow:
        0 0 6px var(--neon-main),
        0 0 14px rgba(57,255,136,.8);
}

/* =========================================================
   DIVISORES DEL TOPBAR
   ========================================================= */

.topbar > * {
    position: relative;
}

.topbar > * + *::before {
    content: "";

    position: absolute;

    left: -1px;
    top: 18px;

    width: 1px;
    height: 34px;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--neon-main-border),
            transparent
        );

    box-shadow:
        0 0 6px rgba(57,255,136,.18);
}

/* =========================================================
   LOGO TOPBAR
   ========================================================= */

.topbar-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 70px;

    padding: 8px 18px;

    border-right: 1px solid
        rgba(57,255,136,.25);
}

.topbar-logo img {
    max-height: 45px;
    width: auto;

    filter:
        drop-shadow(
            0 0 5px rgba(57,255,136,.35)
        );

    transition:
        filter .25s ease,
        transform .25s ease;
}

.topbar-logo:hover img {
    transform: scale(1.04);

    filter:
        drop-shadow(
            0 0 7px var(--neon-main)
        )
        drop-shadow(
            0 0 16px rgba(57,255,136,.55)
        );
}

/* =========================================================
   TÍTULO TOPBAR
   ========================================================= */

.topbar-title {
    color: #f5f1e8;

    font-weight: 700;

    letter-spacing: .8px;

    text-shadow:
        0 0 8px rgba(57,255,136,.18);
}

/* =========================================================
   ACCIONES TOPBAR
   ========================================================= */

.topbar-actions {
    display: flex;
    align-items: center;

    height: 100%;

    margin-left: auto;
}

.topbar-action,
.topbar-actions a,
.topbar-actions button {
    position: relative;

    height: 100%;
    min-width: 58px;

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

    background: transparent;

    border: 0;

    color: #f5f1e8;

    cursor: pointer;

    text-decoration: none;

    transition:
        color .25s ease,
        background .25s ease,
        text-shadow .25s ease;
}

.topbar-action:hover,
.topbar-actions a:hover,
.topbar-actions button:hover {
    color: var(--neon-main);

    background:
        rgba(57,255,136,.045);

    text-shadow:
        0 0 6px var(--neon-main),
        0 0 14px rgba(57,255,136,.55);
}

/* =========================================================
   ICONOS TOPBAR
   ========================================================= */

.topbar .material-symbols-rounded,
.topbar-action .material-symbols-rounded {
    font-size: 23px;

    color: inherit;

    transition:
        color .25s ease,
        text-shadow .25s ease,
        transform .25s ease;
}

.topbar-action:hover .material-symbols-rounded {
    transform: scale(1.08);

    text-shadow:
        0 0 5px var(--neon-main),
        0 0 13px var(--neon-main);
}

/* =========================================================
   CONTADOR BOLSA
   ========================================================= */

.cart-counter,
.topbar .cart-counter {
    position: absolute;

    top: 13px;
    right: 9px;

    min-width: 17px;
    height: 17px;

    padding: 0 4px;

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

    border-radius: 50%;

    background: var(--neon-main);

    color: #061009;

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

    box-shadow:
        0 0 5px var(--neon-main),
        0 0 12px rgba(57,255,136,.7);
}

/* =========================================================
   SIDEBAR — ESTRUCTURA
   ========================================================= */

.sidebar {
    background:
        linear-gradient(
            180deg,
            #080a0c,
            #0b0e11
        );

    border-right: 1px solid
        var(--neon-main-border);

    box-shadow:
        1px 0 0 rgba(57,255,136,.1),
        0 0 14px rgba(57,255,136,.08),
        5px 0 25px rgba(0,0,0,.45);
}

/* línea neon lateral */

.sidebar::after {
    content: "";

    position: absolute;

    top: 0;
    right: -1px;

    width: 1px;
    height: 100%;

    background:
        linear-gradient(
            180deg,
            var(--neon-main),
            rgba(57,255,136,.12),
            var(--neon-main)
        );

    opacity: .7;

    box-shadow:
        0 0 7px rgba(57,255,136,.45);
}

/* =========================================================
   DIVISORES SIDEBAR
   ========================================================= */

.sidebar > a,
.sidebar > li {
    border-bottom: 1px solid
        rgba(57,255,136,.09);
}

.sidebar .submenu li {
    border-bottom: 1px solid
        rgba(57,255,136,.055);
}

/* =========================================================
   EXPANDER
   ========================================================= */

.expander {
    border-bottom: 1px solid
        rgba(57,255,136,.25);

    box-shadow:
        0 1px 8px rgba(57,255,136,.06);
}

#btn {
    color: var(--neon-main);

    text-shadow:
        0 0 5px var(--neon-main),
        0 0 12px rgba(57,255,136,.8);
}

/* =========================================================
   ICONOS SIDEBAR
   ========================================================= */

.sidebar .material-symbols-rounded {
    color: #e9e4d9;

    transition:
        color .25s ease,
        text-shadow .25s ease,
        transform .25s ease;
}

.sidebar a:hover .material-symbols-rounded,
.sidebar li.active > a .material-symbols-rounded {
    color: var(--neon-main);

    text-shadow:
        0 0 5px var(--neon-main),
        0 0 12px rgba(57,255,136,.8),
        0 0 20px rgba(57,255,136,.35);
}

/* =========================================================
   ITEM ACTIVO
   ========================================================= */

.sidebar a.active,
.sidebar li.active > a {
    color: var(--neon-main);

    background:
        linear-gradient(
            90deg,
            rgba(57,255,136,.1),
            rgba(57,255,136,.025),
            transparent
        );

    box-shadow:
        inset 3px 0 0 var(--neon-main),
        0 0 12px rgba(57,255,136,.05);
}

.sidebar a.active .material-symbols-rounded,
.sidebar li.active > a .material-symbols-rounded {
    color: var(--neon-main);

    text-shadow:
        0 0 6px var(--neon-main),
        0 0 16px rgba(57,255,136,.8);
}

/* =========================================================
   SUBMENÚ
   ========================================================= */

.submenu {
    background:
        linear-gradient(
            90deg,
            rgba(57,255,136,.025),
            rgba(0,0,0,.15)
        );

    border-left: 1px solid
        rgba(57,255,136,.18);
}

.submenu a:hover {
    color: var(--neon-main);

    background:
        rgba(57,255,136,.055);

    box-shadow:
        inset 2px 0 0 var(--neon-main);
}

.submenu a:hover .material-symbols-rounded {
    color: var(--neon-main);

    text-shadow:
        0 0 5px var(--neon-main),
        0 0 12px rgba(57,255,136,.65);
}

/* =========================================================
   TOOLTIP
   ========================================================= */

.tooltip {
    background: #0b0e11;

    border: 1px solid
        var(--neon-main-border);

    color: var(--neon-main);

    box-shadow:
        0 0 8px rgba(57,255,136,.2),
        0 8px 20px rgba(0,0,0,.35);

    text-shadow:
        0 0 5px rgba(57,255,136,.5);
}

/* =========================================================
   LÍNEAS DIVISORAS DE CONTENIDO
   ========================================================= */

.entertainment-divider {
    width: 100%;
    height: 1px;

    margin: 25px 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(57,255,136,.55),
            transparent
        );

    box-shadow:
        0 0 7px rgba(57,255,136,.22);
}

/* =========================================================
   ENCABEZADOS DE SECCIÓN
   ========================================================= */

.entertainment-title {
    color: #f5f1e8;

    text-shadow:
        0 0 6px rgba(57,255,136,.18),
        0 0 18px rgba(57,255,136,.08);
}

.entertainment-title::after {
    content: "";

    display: block;

    width: 70px;
    height: 2px;

    margin-top: 12px;

    background: var(--neon-main);

    box-shadow:
        0 0 6px var(--neon-main),
        0 0 15px rgba(57,255,136,.7);
}

/* =========================================================
   TARJETAS ACTIVAS
   ========================================================= */

.entertainment-card.active-event {
    border: 1px solid
        rgba(57,255,136,.65);

    box-shadow:
        0 0 8px rgba(57,255,136,.18),
        0 0 22px rgba(57,255,136,.08),
        inset 0 0 18px rgba(57,255,136,.025);
}

/* =========================================================
   TARJETAS PRÓXIMAMENTE
   ========================================================= */

.entertainment-card.coming-soon {
    border: 1px solid
        rgba(255,59,92,.6);

    box-shadow:
        0 0 8px rgba(255,59,92,.15),
        0 0 22px rgba(255,59,92,.06);
}

/* =========================================================
   RESPONSIVE TOPBAR
   ========================================================= */

@media (max-width: 700px) {

    .topbar {
        left: 52px;
        height: 62px;
    }

    .topbar-logo {
        height: 62px;
        padding: 6px 10px;
    }

    .topbar-action,
    .topbar-actions a,
    .topbar-actions button {
        min-width: 48px;
    }

    .topbar-title {
        font-size: 14px;
    }

}

/* =========================================================
   ANIMACIÓN NEÓN SUTIL
   ========================================================= */

@keyframes krafexNeonPulse {

    0%,
    100% {
        opacity: .75;
    }

    50% {
        opacity: 1;
    }

}

.sidebar::after,
.topbar::before {
    animation:
        krafexNeonPulse 3s ease-in-out infinite;
}
/* =====================================================
   KRAFEX CLUB
   CONTENEDORES POR MEMBRESÍA
   ===================================================== */

/* Evita que el sidebar crezca verticalmente */
.sidebar {
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: visible;
    box-sizing: border-box;
}

/* El contenido del Club no queda debajo del sidebar */
.club-page {
    min-height: 100vh;
    box-sizing: border-box;
}


/* =====================================================
   CONTENEDOR GENERAL DE MEMBRESÍAS
   ===================================================== */

.club-memberships {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(280px, 1fr)
    );

    gap: 24px;

    width: 100%;
    max-width: 1400px;

    margin: 30px auto;
    padding: 20px;

    box-sizing: border-box;
}


/* =====================================================
   CONTENEDOR BASE
   ===================================================== */

.membership-card {
    position: relative;

    padding: 28px;

    min-height: 260px;

    border-radius: 18px;

    background: #0A0A0B;

    border: 1px solid var(--membership-color);

    box-shadow:
        0 0 8px var(--membership-color),
        0 0 20px color-mix(
            in srgb,
            var(--membership-color) 45%,
            transparent
        );

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

    overflow: hidden;
}


/* EFECTO AL PASAR EL MOUSE */

.membership-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 0 12px var(--membership-color),
        0 0 30px color-mix(
            in srgb,
            var(--membership-color) 60%,
            transparent
        );
}


/* =====================================================
   ICONO
   ===================================================== */

.membership-card .material-symbols-rounded {
    color: var(--membership-color);

    font-size: 38px;

    text-shadow:
        0 0 8px var(--membership-color),
        0 0 18px var(--membership-color);
}


/* =====================================================
   NOMBRE
   ===================================================== */

.membership-card h2 {
    color: var(--membership-color);

    margin: 12px 0 8px;

    text-shadow:
        0 0 8px var(--membership-color);
}


/* =====================================================
   DESCRIPCIÓN
   ===================================================== */

.membership-card p {
    color: #F5F1E8;

    line-height: 1.6;
}


/* =====================================================
   OFERTAS EXCLUSIVAS
   ===================================================== */

.membership-offers {
    margin-top: 20px;

    padding-top: 18px;

    border-top:
        1px solid
        var(--membership-color);
}


/* =====================================================
   OFERTA INDIVIDUAL
   ===================================================== */

.membership-offer {
    padding: 14px;

    margin-top: 12px;

    border-radius: 12px;

    background: rgba(255,255,255,0.025);

    border:
        1px solid
        color-mix(
            in srgb,
            var(--membership-color) 45%,
            transparent
        );
}


/* =====================================================
   PRECIO
   ===================================================== */

.membership-price {
    color: var(--membership-color);

    font-weight: 700;

    text-shadow:
        0 0 7px var(--membership-color);
}


/* =====================================================
   PUNTOS
   ===================================================== */

.membership-points {
    color: #F5F1E8;

    font-weight: 600;
}


/* =====================================================
   1 — AUREA NOBLE
   DORADO
   ===================================================== */

.membership-aurea {
    --membership-color: #D6C3A3;
}


/* =====================================================
   2 — KRAFTOR CONTINUO
   AZUL
   ===================================================== */

.membership-kraftor {
    --membership-color: #00AEEF;
}


/* =====================================================
   3 — KRAFEX DE CORAZÓN
   ROJO
   ===================================================== */

.membership-corazon {
    --membership-color: #FF1744;
}


/* =====================================================
   4 — REGNION DEL ALMA
   VIOLETA
   ===================================================== */

.membership-alma {
    --membership-color: #B026FF;
}


/* =====================================================
   5 — REGNION MAESTRO
   VERDE NEÓN
   ===================================================== */

.membership-maestro {
    --membership-color: #39FF14;
}


/* =====================================================
   6 — REGNION DE POR VIDA
   BLANCO / ORO
   ===================================================== */

.membership-vida {
    --membership-color: #F5F1E8;

    box-shadow:
        0 0 8px #F5F1E8,
        0 0 22px #D6C3A3;
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 700px) {

    .club-memberships {
        grid-template-columns: 1fr;

        padding: 12px;
    }

    .membership-card {
        min-height: auto;

        padding: 22px;
    }

}