/* =========================================================
   KRAFEX CLUB — FULL NEON PREMIUM
   ADAPTADO AL HTML REAL DE CLUB.HTML
   ========================================================= */

:root{
    --bg:#030308;
    --bg2:#060712;
    --panel:#090b13;
    --panel2:#0d101b;

    --text:#f5f1e8;
    --muted:#9da3b5;

    --cyan:#00eaff;
    --purple:#b84cff;
    --pink:#ff3cac;
    --green:#39ff88;
    --yellow:#f7ff00;
    --red:#ff3158;

    --gold:#d6c3a3;

    --aurea:#ffd76a;
    --continuo:#39ff88;
    --corazon:#ff4fa3;
    --alma:#a855ff;
    --maestro:#38a8ff;
    --vida:#ff9d00;

    --sidebar:60px;
    --sidebar-open:250px;
    --top:70px;
}

/* =========================================================
   RESET
========================================================= */

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html{
    scroll-behavior:smooth;
    background:var(--bg);
}

body{
    min-height:100vh;

    background:
        radial-gradient(
            circle at 8% 5%,
            rgba(0,234,255,.13),
            transparent 27%
        ),
        radial-gradient(
            circle at 92% 10%,
            rgba(184,76,255,.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 90%,
            rgba(255,60,172,.07),
            transparent 35%
        ),
        var(--bg);

    color:var(--text);

    font-family:Arial,Helvetica,sans-serif;

    overflow-x:hidden;
}

a{
    color:inherit;
    text-decoration:none;
}

button{
    font:inherit;
}

li{
    list-style:none;
}

.material-symbols-rounded{
    line-height:1;
    user-select:none;
}

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

.topbar{
    position:fixed;
    z-index:5000;

    top:0;
    left:0;
    right:0;

    height:var(--top);

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

    padding:0 22px 0 82px;

    background:rgba(3,3,8,.95);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(0,234,255,.35);

    box-shadow:
        0 0 25px rgba(0,234,255,.08),
        0 8px 35px rgba(0,0,0,.55);
}

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

.topbar-logo{
    width:43px;
    height:43px;

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

.topbar-logo img{
    width:43px;
    height:43px;

    object-fit:cover;

    border-radius:50%;

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

    box-shadow:
        0 0 8px var(--cyan),
        0 0 20px rgba(0,234,255,.45),
        inset 0 0 12px rgba(0,234,255,.15);

    transition:.25s ease;
}

.topbar-logo img:hover{
    transform:scale(1.06) rotate(3deg);

    box-shadow:
        0 0 12px var(--cyan),
        0 0 30px var(--cyan),
        0 0 50px rgba(0,234,255,.3);
}

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

.topbar-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.topbar-item{
    position:relative;

    width:43px;
    height:43px;

    display:grid;
    place-items:center;

    border:1px solid rgba(214,195,163,.35);

    border-radius:12px;

    color:var(--gold);

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

    transition:.22s ease;
}

.topbar-item:hover{
    color:var(--cyan);

    border-color:var(--cyan);

    background:rgba(0,234,255,.07);

    box-shadow:
        0 0 10px rgba(0,234,255,.35),
        0 0 25px rgba(0,234,255,.12),
        inset 0 0 12px rgba(0,234,255,.05);

    transform:translateY(-2px);
}

.topbar-item .material-symbols-rounded{
    font-size:22px;
}

.cart-counter{
    position:absolute;

    right:-5px;
    top:-5px;

    min-width:18px;
    height:18px;

    padding:0 4px;

    display:grid;
    place-items:center;

    border-radius:99px;

    background:var(--pink);

    color:white;

    font-size:10px;
    font-weight:bold;

    box-shadow:
        0 0 7px var(--pink),
        0 0 15px rgba(255,60,172,.6);
}

/* =========================================================
   SIDEBAR
   CORRECCIÓN PRINCIPAL
========================================================= */

.sidebar{
    position:fixed !important;

    z-index:6000 !important;

    top:0 !important;
    left:0 !important;

    width:var(--sidebar) !important;
    height:100vh !important;

    min-height:100vh !important;
    max-height:100vh !important;

    padding:0 !important;
    margin:0 !important;

    display:block !important;

    background:
        linear-gradient(
            180deg,
            rgba(3,3,8,.99),
            rgba(5,6,13,.98)
        ) !important;

    border-right:1px solid rgba(0,234,255,.35);

    overflow-x:hidden !important;
    overflow-y:auto !important;

    transition:
        width .28s cubic-bezier(.2,.8,.2,1),
        box-shadow .28s ease !important;

    box-shadow:
        4px 0 25px rgba(0,234,255,.08);
}

/* =========================================================
   LÍNEA NEÓN SIDEBAR
========================================================= */

.sidebar::after{
    content:"";

    position:absolute;

    top:0;
    right:0;

    width:1px;
    height:100%;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--cyan),
            var(--purple),
            var(--pink),
            transparent
        );

    opacity:.7;

    pointer-events:none;
}

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

.sidebar:hover{
    width:var(--sidebar-open) !important;

    box-shadow:
        5px 0 30px rgba(0,234,255,.15),
        15px 0 60px rgba(184,76,255,.06);
}

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

.sidebar .expander{
    position:relative;

    width:100%;
    height:var(--top);

    display:flex;

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

    border-bottom:1px solid rgba(0,234,255,.18);

    background:
        linear-gradient(
            180deg,
            rgba(0,234,255,.04),
            transparent
        );
}

.sidebar .expander::after{
    content:"";

    position:absolute;

    left:14px;
    right:14px;
    bottom:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--cyan),
            transparent
        );

    box-shadow:
        0 0 8px var(--cyan);
}

.sidebar .expander #btn{
    font-size:27px;

    color:var(--cyan);

    cursor:pointer;

    text-shadow:
        0 0 8px var(--cyan),
        0 0 20px rgba(0,234,255,.65);

    transition:.25s ease;
}

.sidebar .expander #btn:hover{
    transform:rotate(90deg) scale(1.08);

    text-shadow:
        0 0 10px var(--cyan),
        0 0 30px var(--cyan);
}

/* =========================================================
   INICIO
========================================================= */

.sidebar > a{
    display:block;

    width:100%;

    overflow:hidden;
}

.sidebar .category{
    width:100%;
    height:50px;

    display:flex;
    align-items:center;

    padding:0 17px;

    color:var(--gold);

    font-size:10px;
    font-weight:bold;

    letter-spacing:2px;

    text-transform:uppercase;

    white-space:nowrap;

    border-bottom:1px solid rgba(214,195,163,.12);

    transition:.2s ease;
}

.sidebar > a:hover .category{
    color:var(--cyan);

    background:rgba(0,234,255,.05);

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

/* =========================================================
   GRUPOS DEL SIDEBAR
========================================================= */

.sidebar .has-submenu{
    position:relative !important;

    width:100% !important;

    display:block !important;

    margin:0 !important;
    padding:0 !important;

    list-style:none !important;

    border-bottom:1px solid rgba(255,255,255,.035);
}

/* =========================================================
   ENLACE PRINCIPAL
========================================================= */

.sidebar .has-submenu > a{
    position:relative;

    width:100%;
    height:52px;

    display:flex;

    align-items:center;

    gap:14px;

    padding:0 16px;

    color:var(--gold);

    white-space:nowrap;

    transition:.2s ease;
}

.sidebar .has-submenu > a::before{
    content:"";

    position:absolute;

    left:0;

    top:9px;
    bottom:9px;

    width:3px;

    background:var(--cyan);

    box-shadow:
        0 0 8px var(--cyan),
        0 0 15px var(--cyan);

    opacity:0;

    transition:.2s ease;
}

.sidebar .has-submenu > a:hover{
    color:var(--cyan);

    background:
        linear-gradient(
            90deg,
            rgba(0,234,255,.09),
            transparent
        );

    text-shadow:
        0 0 8px rgba(0,234,255,.65);
}

.sidebar .has-submenu > a:hover::before{
    opacity:1;
}

.sidebar .has-submenu > a > .material-symbols-rounded{
    flex:none;

    width:28px;
    min-width:28px;

    font-size:22px;

    color:inherit;

    text-shadow:
        0 0 8px currentColor;

    transition:.2s ease;
}

.sidebar .has-submenu > a:hover >
.material-symbols-rounded{
    transform:scale(1.08);
}

/* =========================================================
   DESCRIPTORES
========================================================= */

.sidebar .descriptor{
    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:translateX(-8px);

    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility .18s ease;

    font-size:12px;

    font-weight:600;

    letter-spacing:.4px;
}

.sidebar:hover .descriptor{
    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateX(0);
}

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

.sidebar .tooltip{
    position:absolute;

    left:68px;
    top:50%;

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

    padding:7px 10px;

    border:1px solid rgba(0,234,255,.4);

    border-radius:7px;

    background:#080a12;

    color:var(--cyan);

    font-size:11px;

    white-space:nowrap;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    box-shadow:
        0 0 15px rgba(0,234,255,.2);

    transition:.18s ease;
}

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

    visibility:visible;

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

/* =========================================================
   SUBMENÚ
   IMPORTANTE:
   NO SE ESTIRA
========================================================= */

.sidebar .submenu{
    position:relative !important;

    width:100% !important;

    height:auto !important;

    min-height:0 !important;

    max-height:none !important;

    margin:0 !important;
    padding:0 !important;

    display:none;

    overflow:hidden !important;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.75),
            rgba(0,234,255,.025)
        );

    border-left:1px solid rgba(0,234,255,.1);
}

/* =========================================================
   SUBMENÚ ABIERTO
   Compatible con varios estados de JS
========================================================= */

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

/* =========================================================
   ITEMS DEL SUBMENÚ
========================================================= */

.sidebar .submenu li{
    position:relative;

    width:100%;

    height:auto;

    min-height:44px;

    margin:0;
    padding:0;

    list-style:none;
}

.sidebar .submenu li a{
    position:relative;

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

    display:flex;

    align-items:center;

    gap:11px;

    padding:0 10px 0 28px;

    color:#aaaebc;

    font-size:12px;

    white-space:nowrap;

    border-top:1px solid rgba(255,255,255,.035);

    transition:.2s ease;
}

.sidebar .submenu li a::before{
    content:"";

    position:absolute;

    left:16px;

    width:4px;
    height:4px;

    border-radius:50%;

    background:#4f5668;

    transition:.2s ease;
}

.sidebar .submenu li a:hover{
    color:var(--green);

    padding-left:31px;

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

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

.sidebar .submenu li a:hover::before{
    background:var(--green);

    box-shadow:
        0 0 7px var(--green),
        0 0 13px var(--green);
}

.sidebar .submenu .material-symbols-rounded{
    flex:none;

    width:20px;
    min-width:20px;

    font-size:19px;

    color:inherit;
}

/* =========================================================
   CUANDO SIDEBAR ESTÁ CERRADO:
   SUBMENÚ NO SE DESBORDA
========================================================= */

.sidebar:not(:hover) .submenu{
    overflow:hidden !important;
}

.sidebar:not(:hover) .submenu li a span{
    opacity:0;
    visibility:hidden;
}

.sidebar:not(:hover) .submenu li a{
    justify-content:center;

    padding-left:0;
    padding-right:0;
}

.sidebar:not(:hover) .submenu li a::before{
    display:none;
}

.sidebar:not(:hover) .submenu .material-symbols-rounded{
    display:none;
}

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

.content{
    position:relative;

    width:100%;

    min-height:100vh;

    padding:
        calc(var(--top) + 25px)
        25px
        70px
        calc(var(--sidebar) + 25px);

    transition:
        padding-left .28s ease;
}

/* Cuando el sidebar se abre */
.sidebar:hover ~ .content{
    padding-left:
        calc(var(--sidebar-open) + 25px);
}

/* =========================================================
   HOME / BANNER SUPERIOR
========================================================= */

.home{
    width:100%;
}

.banner-container{
    width:100%;
    max-width:1200px;

    margin:0 auto 30px;
}

.banner{
    position:relative;

    width:100%;

    overflow:hidden;

    border-radius:22px;

    border:1px solid rgba(0,234,255,.3);

    background:#05060c;

    box-shadow:
        0 0 25px rgba(0,234,255,.12),
        0 20px 60px rgba(0,0,0,.5);
}

.banner::before{
    content:"";

    position:absolute;

    z-index:2;

    inset:0;

    border-radius:22px;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            rgba(0,234,255,.05),
            transparent 40%,
            rgba(184,76,255,.08)
        );
}

.banner::after{
    content:"";

    position:absolute;

    z-index:3;

    left:0;
    right:0;
    bottom:0;

    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--cyan),
            var(--purple),
            var(--pink),
            transparent
        );

    box-shadow:
        0 0 12px var(--cyan);
}

.banner img{
    display:block;

    width:100%;

    max-height:360px;

    object-fit:cover;

    transition:.5s ease;
}

.banner:hover img{
    transform:scale(1.015);
}

/* =========================================================
   CLUB PAGE
========================================================= */

.club-page{
    width:100%;
    max-width:1200px;

    margin:0 auto;
}

/* =========================================================
   CLUB HERO
   HTML REAL:
   .club-hero
   .club-hero-glow
   .club-hero-icon
   .club-hero-content
   .club-eyebrow
========================================================= */

.club-hero{
    position:relative;

    width:100%;

    min-height:260px;

    display:flex;

    align-items:center;

    gap:25px;

    margin-bottom:25px;

    padding:35px;

    overflow:hidden;

    border:1px solid rgba(184,76,255,.55);

    border-radius:24px;

    background:
        linear-gradient(
            135deg,
            rgba(184,76,255,.12),
            rgba(0,234,255,.05),
            rgba(255,60,172,.04)
        );

    box-shadow:
        0 0 30px rgba(184,76,255,.12),
        inset 0 0 35px rgba(0,234,255,.025);
}

.club-hero::before{
    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--purple),
            var(--pink),
            var(--cyan)
        );

    background-size:200% 100%;

    animation:clubRainbow 5s linear infinite;

    box-shadow:
        0 0 12px var(--cyan),
        0 0 25px var(--purple);
}

.club-hero::after{
    content:"";

    position:absolute;

    width:300px;
    height:300px;

    right:-100px;
    top:-120px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(184,76,255,.2),
            rgba(0,234,255,.04),
            transparent 70%
        );

    pointer-events:none;
}

@keyframes clubRainbow{
    0%{
        background-position:0% 50%;
    }

    100%{
        background-position:200% 50%;
    }
}

/* =========================================================
   HERO GLOW
========================================================= */

.club-hero-glow{
    position:absolute;

    width:250px;
    height:250px;

    left:-100px;
    top:-80px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,234,255,.18),
            transparent 70%
        );

    filter:blur(10px);

    pointer-events:none;
}

/* =========================================================
   HERO ICON
========================================================= */

.club-hero-icon{
    position:relative;

    z-index:2;

    width:95px;
    height:95px;

    flex:none;

    display:grid;
    place-items:center;

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

    border-radius:24px;

    background:
        linear-gradient(
            145deg,
            rgba(184,76,255,.12),
            rgba(0,234,255,.04)
        );

    box-shadow:
        0 0 12px var(--purple),
        0 0 35px rgba(184,76,255,.35),
        inset 0 0 25px rgba(184,76,255,.08);

    animation:
        heroIconPulse 2.5s ease-in-out infinite alternate;
}

.club-hero-icon .material-symbols-rounded{
    font-size:55px;

    color:var(--purple);

    text-shadow:
        0 0 10px var(--purple),
        0 0 25px var(--purple),
        0 0 50px rgba(184,76,255,.5);
}

@keyframes heroIconPulse{
    from{
        box-shadow:
            0 0 10px var(--purple),
            0 0 25px rgba(184,76,255,.3);
    }

    to{
        box-shadow:
            0 0 18px var(--purple),
            0 0 45px rgba(184,76,255,.45);
    }
}

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

.club-hero-content{
    position:relative;

    z-index:2;
}

.club-eyebrow{
    display:block;

    margin-bottom:4px;

    color:var(--cyan);

    font-size:10px;

    font-weight:bold;

    letter-spacing:4px;

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

.club-hero h1{
    margin:2px 0 8px;

    font-size:
        clamp(
            42px,
            7vw,
            72px
        );

    line-height:1;

    letter-spacing:5px;

    background:
        linear-gradient(
            90deg,
            #fff,
            var(--cyan),
            #fff,
            var(--purple),
            var(--pink)
        );

    background-size:250% auto;

    color:transparent;

    background-clip:text;
    -webkit-background-clip:text;

    animation:titleShine 6s linear infinite;
}

@keyframes titleShine{
    to{
        background-position:250% center;
    }
}

.club-hero p{
    max-width:750px;

    color:var(--muted);

    line-height:1.6;

    font-size:14px;
}

/* =========================================================
   BANNER CLUB
========================================================= */

.club-banner{
    position:relative;

    width:100%;

    margin-bottom:30px;

    overflow:hidden;

    border-radius:22px;

    border:1px solid rgba(0,234,255,.3);

    background:#05060c;

    box-shadow:
        0 0 25px rgba(0,234,255,.1),
        0 20px 50px rgba(0,0,0,.45);
}

.club-banner::after{
    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            rgba(0,234,255,.04),
            transparent 45%,
            rgba(184,76,255,.08)
        );

    box-shadow:
        inset 0 0 35px rgba(0,234,255,.04);
}

.club-banner img{
    display:block;

    width:100%;
    height:auto;

    max-height:400px;

    object-fit:cover;
}

/* =========================================================
   PUNTOS
   HTML REAL
========================================================= */

.club-points-panel{
    position:relative;

    width:100%;

    margin-bottom:35px;

    padding:25px;

    overflow:hidden;

    border:1px solid rgba(247,255,0,.5);

    border-radius:22px;

    background:
        linear-gradient(
            135deg,
            rgba(247,255,0,.045),
            rgba(0,234,255,.025)
        );

    box-shadow:
        0 0 30px rgba(247,255,0,.07),
        inset 0 0 30px rgba(247,255,0,.025);
}

.club-points-panel::before{
    content:"";

    position:absolute;

    left:0;
    top:0;
    right:0;

    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--yellow),
            var(--cyan),
            transparent
        );

    box-shadow:
        0 0 10px var(--yellow);
}

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

.club-points-main{
    display:flex;

    align-items:center;

    gap:18px;
}

.club-points-icon{
    width:65px;
    height:65px;

    flex:none;

    display:grid;
    place-items:center;

    border:1px solid rgba(247,255,0,.45);

    border-radius:18px;

    background:rgba(247,255,0,.04);

    box-shadow:
        0 0 15px rgba(247,255,0,.12),
        inset 0 0 15px rgba(247,255,0,.05);
}

.club-points-icon .material-symbols-rounded{
    font-size:36px;

    color:var(--yellow);

    text-shadow:
        0 0 10px var(--yellow),
        0 0 25px rgba(247,255,0,.6);
}

.club-points-data{
    min-width:0;
}

.club-points-label{
    display:block;

    margin-bottom:4px;

    color:var(--muted);

    font-size:10px;

    font-weight:bold;

    letter-spacing:2px;
}

.club-points-data strong{
    display:block;

    color:var(--yellow);

    font-size:38px;

    line-height:1;

    text-shadow:
        0 0 8px var(--yellow),
        0 0 22px rgba(247,255,0,.55);
}

.club-points-caption{
    display:block;

    margin-top:7px;

    color:var(--muted);

    font-size:11px;

    line-height:1.4;
}

/* =========================================================
   PROGRESO
========================================================= */

.club-progress{
    margin-top:22px;

    padding-top:20px;

    border-top:1px solid rgba(214,195,163,.15);
}

.club-progress-header{
    display:flex;

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

    gap:15px;

    margin-bottom:10px;
}

.club-progress-header strong{
    color:var(--text);

    font-size:14px;
}

#krafex-progress-percentage{
    color:var(--cyan);

    font-size:12px;

    font-weight:bold;

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

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

.club-progress-bar{
    position:relative;

    width:100%;
    height:11px;

    overflow:hidden;

    border-radius:99px;

    background:#151822;

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

    box-shadow:
        inset 0 0 10px rgba(0,0,0,.8);
}

.club-progress-fill{
    position:relative;

    width:0%;

    height:100%;

    border-radius:99px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--purple),
            var(--pink)
        );

    box-shadow:
        0 0 8px var(--cyan),
        0 0 18px var(--purple);

    transition:width .5s ease;
}

.club-progress-fill::after{
    content:"";

    position:absolute;

    right:0;
    top:0;

    width:45px;
    height:100%;

    background:white;

    opacity:.45;

    filter:blur(7px);
}

.club-progress-text{
    margin-top:8px;
}

.club-progress-text span{
    color:var(--muted);

    font-size:11px;
}

/* =========================================================
   ESTADO MEMBRESÍA
========================================================= */

.club-membership-state{
    margin-top:17px;

    min-height:25px;

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

    color:var(--cyan);
}

/* =========================================================
   TÍTULO DE MEMBRESÍAS
========================================================= */

.club-section-heading{
    position:relative;

    margin-bottom:25px;

    text-align:center;
}

.club-section-heading > span{
    display:block;

    margin-bottom:7px;

    color:var(--cyan);

    font-size:10px;

    font-weight:bold;

    letter-spacing:4px;

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

.club-section-heading h2{
    margin-bottom:8px;

    font-size:
        clamp(
            28px,
            5vw,
            42px
        );

    color:white;

    text-shadow:
        0 0 10px rgba(255,255,255,.25);
}

.club-section-heading p{
    color:var(--muted);

    font-size:13px;

    line-height:1.5;
}

/* =========================================================
   GRID
========================================================= */

.club-memberships{
    width:100%;

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:22px;

    margin-bottom:35px;
}

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

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

    position:relative;

    min-width:0;

    min-height:440px;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    padding:26px;

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

    border-radius:23px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.012)
        );

    box-shadow:
        0 15px 45px rgba(0,0,0,.45),
        inset 0 0 30px
        color-mix(
            in srgb,
            var(--membership-color) 4%,
            transparent
        );

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

.membership-card::before{
    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:4px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--membership-color),
            transparent
        );

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

.membership-card::after{
    content:"";

    position:absolute;

    width:220px;
    height:220px;

    right:-110px;
    top:-110px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            color-mix(
                in srgb,
                var(--membership-color) 18%,
                transparent
            ),
            transparent 70%
        );

    pointer-events:none;
}

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

    border-color:var(--membership-color);

    box-shadow:
        0 10px 50px
        color-mix(
            in srgb,
            var(--membership-color) 14%,
            transparent
        ),
        0 20px 60px rgba(0,0,0,.55),
        inset 0 0 35px
        color-mix(
            in srgb,
            var(--membership-color) 5%,
            transparent
        );
}

/* =========================================================
   COLORES
========================================================= */

.membership-aurea{
    --membership-color:var(--aurea);
}

.membership-kraftor{
    --membership-color:var(--continuo);
}

.membership-corazon{
    --membership-color:var(--corazon);
}

.membership-alma{
    --membership-color:var(--alma);
}

.membership-maestro{
    --membership-color:var(--maestro);
}

.membership-vida{
    --membership-color:var(--vida);
}

/* =========================================================
   GLOW INTERNO
========================================================= */

.membership-glow{
    position:absolute;

    width:180px;
    height:180px;

    right:-70px;
    top:-70px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            color-mix(
                in srgb,
                var(--membership-color) 15%,
                transparent
            ),
            transparent 70%
        );

    filter:blur(8px);

    pointer-events:none;
}

/* =========================================================
   ICONO MEMBRESÍA
========================================================= */

.membership-icon{
    position:relative;

    z-index:2;

    width:64px;
    height:64px;

    display:grid;

    place-items:center;

    margin-bottom:14px;

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

    border-radius:17px;

    background:
        color-mix(
            in srgb,
            var(--membership-color) 5%,
            transparent
        );

    box-shadow:
        0 0 12px
        color-mix(
            in srgb,
            var(--membership-color) 25%,
            transparent
        ),
        inset 0 0 15px
        color-mix(
            in srgb,
            var(--membership-color) 5%,
            transparent
        );
}

.membership-icon .material-symbols-rounded{
    font-size:36px;

    color:var(--membership-color);

    text-shadow:
        0 0 10px var(--membership-color),
        0 0 25px
        color-mix(
            in srgb,
            var(--membership-color) 60%,
            transparent
        );
}

/* =========================================================
   NIVEL
========================================================= */

.membership-level{
    position:relative;

    z-index:2;

    display:block;

    margin-bottom:6px;

    color:var(--membership-color);

    font-size:9px;

    font-weight:bold;

    letter-spacing:3px;

    text-shadow:
        0 0 7px
        color-mix(
            in srgb,
            var(--membership-color) 55%,
            transparent
        );
}

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

.membership-card h2{
    position:relative;

    z-index:2;

    margin-bottom:9px;

    color:var(--membership-color);

    font-size:25px;

    line-height:1.2;

    text-shadow:
        0 0 8px
        color-mix(
            in srgb,
            var(--membership-color) 50%,
            transparent
        );
}

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

.membership-description{
    position:relative;

    z-index:2;

    min-height:58px;

    color:var(--muted);

    font-size:13px;

    line-height:1.5;
}

/* =========================================================
   REQUISITO
========================================================= */

.membership-requirement{
    position:relative;

    z-index:2;

    margin-top:18px;

    padding:12px 14px;

    border-radius:13px;

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

    background:
        color-mix(
            in srgb,
            var(--membership-color) 4%,
            transparent
        );
}

.membership-requirement span{
    display:block;

    margin-bottom:4px;

    color:#777d91;

    font-size:8px;

    font-weight:bold;

    letter-spacing:2px;
}

.membership-requirement strong{
    color:var(--membership-color);

    font-size:13px;

    text-shadow:
        0 0 7px
        color-mix(
            in srgb,
            var(--membership-color) 45%,
            transparent
        );
}

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

.membership-offer{
    position:relative;

    z-index:2;

    margin-top:16px;

    padding:16px;

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

    border-radius:15px;

    background:
        color-mix(
            in srgb,
            var(--membership-color) 4%,
            transparent
        );
}

.offer-label{
    display:block;

    margin-bottom:6px;

    color:var(--membership-color);

    font-size:8px;

    font-weight:bold;

    letter-spacing:2px;
}

.membership-offer h3{
    margin-bottom:5px;

    color:var(--text);

    font-size:15px;
}

.membership-offer p{
    margin-bottom:13px;

    color:var(--muted);

    font-size:11px;

    line-height:1.45;
}

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

.offer-values{
    display:flex;

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

    gap:10px;

    margin-bottom:14px;
}

.membership-price{
    color:white;

    font-size:18px;

    font-weight:900;

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

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

    font-size:10px;

    font-weight:bold;

    text-shadow:
        0 0 7px
        color-mix(
            in srgb,
            var(--membership-color) 50%,
            transparent
        );
}

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

.membership-actions{
    display:flex;

    gap:8px;

    width:100%;
}

.club-redeem,
.club-buy{
    flex:1;

    min-height:41px;

    display:inline-flex;

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

    gap:7px;

    padding:9px 12px;

    border-radius:10px;

    font-size:10px;

    font-weight:bold;

    cursor:pointer;

    transition:.2s ease;
}

.club-redeem{
    color:var(--membership-color);

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

    background:
        color-mix(
            in srgb,
            var(--membership-color) 6%,
            transparent
        );

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

.club-redeem:hover:not(:disabled){
    transform:translateY(-2px);

    color:white;

    background:
        color-mix(
            in srgb,
            var(--membership-color) 15%,
            transparent
        );

    box-shadow:
        0 0 15px
        color-mix(
            in srgb,
            var(--membership-color) 40%,
            transparent
        ),
        inset 0 0 12px
        color-mix(
            in srgb,
            var(--membership-color) 8%,
            transparent
        );
}

.club-buy{
    color:var(--gold);

    border:1px solid rgba(214,195,163,.5);

    background:rgba(214,195,163,.035);
}

.club-buy:hover:not(:disabled){
    color:white;

    border-color:var(--gold);

    background:rgba(214,195,163,.1);

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

.club-redeem .material-symbols-rounded,
.club-buy .material-symbols-rounded{
    font-size:17px;
}

/* =========================================================
   LOCKED
========================================================= */

.membership-card.krafex-locked{
    opacity:.63;

    filter:saturate(.65);
}

.membership-card.krafex-locked:hover{
    transform:none;

    border-color:
        color-mix(
            in srgb,
            var(--membership-color) 30%,
            transparent
        );

    box-shadow:
        0 15px 45px rgba(0,0,0,.45);
}

/* =========================================================
   UNLOCKED
========================================================= */

.membership-card.krafex-unlocked{
    opacity:1;

    filter:none;

    border-color:
        color-mix(
            in srgb,
            var(--membership-color) 75%,
            transparent
        );

    box-shadow:
        0 0 22px
        color-mix(
            in srgb,
            var(--membership-color) 12%,
            transparent
        ),
        0 15px 45px rgba(0,0,0,.45);
}

.membership-card.krafex-unlocked::before{
    animation:
        unlockedPulse 2.5s ease-in-out infinite;
}

@keyframes unlockedPulse{
    0%,100%{
        opacity:.65;
    }

    50%{
        opacity:1;
    }
}

.club-redeem:disabled,
.club-buy:disabled{
    opacity:.45;

    cursor:not-allowed;
}

/* =========================================================
   REGLAS
========================================================= */

.club-rules{
    position:relative;

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:10px;

    padding:23px;

    overflow:hidden;

    border:1px solid rgba(0,234,255,.3);

    border-radius:20px;

    background:
        linear-gradient(
            135deg,
            rgba(0,234,255,.05),
            rgba(184,76,255,.04)
        );

    box-shadow:
        0 0 25px rgba(0,234,255,.06),
        inset 0 0 25px rgba(0,234,255,.02);
}

.club-rules::before{
    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:3px;

    background:
        linear-gradient(
            180deg,
            var(--cyan),
            var(--purple),
            var(--pink)
        );

    box-shadow:
        0 0 12px var(--cyan);
}

.club-rules >
.material-symbols-rounded{
    flex:none;

    font-size:38px;

    color:var(--cyan);

    text-shadow:
        0 0 10px var(--cyan),
        0 0 25px rgba(0,234,255,.55);
}

.club-rules-label{
    display:block;

    margin-bottom:4px;

    color:var(--cyan);

    font-size:9px;

    font-weight:bold;

    letter-spacing:3px;

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

.club-rules h2{
    margin-bottom:6px;

    color:white;

    font-size:17px;
}

.club-rules p{
    max-width:850px;

    color:var(--muted);

    font-size:12px;

    line-height:1.55;
}

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

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

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

::-webkit-scrollbar-thumb{
    border-radius:99px;

    background:
        linear-gradient(
            180deg,
            var(--cyan),
            var(--purple)
        );

    box-shadow:
        0 0 8px var(--cyan);
}

::-webkit-scrollbar-thumb:hover{
    background:
        linear-gradient(
            180deg,
            var(--pink),
            var(--cyan)
        );
}

/* =========================================================
   SELECCIÓN
========================================================= */

::selection{
    color:white;

    background:rgba(0,234,255,.25);
}

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

@media(max-width:900px){

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

    .membership-card{
        min-height:auto;
    }
}

/* =========================================================
   TABLET / MÓVIL
========================================================= */

@media(max-width:650px){

    :root{
        --sidebar:54px;
        --sidebar-open:230px;
        --top:62px;
    }

    .topbar{
        height:var(--top);

        padding:
            0
            10px
            0
            65px;
    }

    .topbar-logo img{
        width:37px;
        height:37px;
    }

    .topbar-item{
        width:37px;
        height:37px;
    }

    .content{
        padding:
            calc(var(--top) + 15px)
            10px
            45px
            calc(var(--sidebar) + 10px);
    }

    .sidebar:hover ~ .content{
        padding-left:
            calc(var(--sidebar) + 10px);
    }

    .sidebar:hover{
        width:var(--sidebar-open) !important;
    }

    .club-hero{
        min-height:auto;

        padding:23px;

        gap:15px;

        align-items:flex-start;
    }

    .club-hero-icon{
        width:65px;
        height:65px;

        border-radius:17px;
    }

    .club-hero-icon .material-symbols-rounded{
        font-size:37px;
    }

    .club-hero h1{
        font-size:43px;

        letter-spacing:3px;
    }

    .club-hero p{
        font-size:12px;
    }

    .club-banner{
        border-radius:16px;
    }

    .club-points-panel{
        padding:19px;
    }

    .club-points-icon{
        width:55px;
        height:55px;
    }

    .club-points-data strong{
        font-size:30px;
    }

    .club-points-caption{
        font-size:10px;
    }

    .membership-card{
        padding:20px;

        border-radius:19px;
    }

    .membership-card h2{
        font-size:23px;
    }

    .offer-values{
        align-items:flex-start;

        flex-direction:column;
    }

    .membership-actions{
        flex-direction:column;
    }

    .club-redeem,
    .club-buy{
        width:100%;
    }

    .club-rules{
        align-items:flex-start;

        padding:19px;
    }

    .club-rules >
    .material-symbols-rounded{
        font-size:31px;
    }

    .club-rules h2{
        font-size:15px;
    }

}

/* =========================================================
   MÓVIL PEQUEÑO
========================================================= */

@media(max-width:400px){

    .topbar-actions{
        gap:5px;
    }

    .topbar-item{
        width:35px;
        height:35px;
    }

    .club-hero{
        padding:17px;
    }

    .club-hero-icon{
        width:55px;
        height:55px;
    }

    .club-hero-icon .material-symbols-rounded{
        font-size:31px;
    }

    .club-hero h1{
        font-size:34px;
    }

    .club-hero p{
        font-size:11px;
    }

    .club-points-main{
        gap:10px;
    }

    .club-points-data strong{
        font-size:27px;
    }

    .membership-card{
        padding:17px;
    }
}