/* ==========================================================
   BRISAMAR CLUB DESIGN SYSTEM v1.0
========================================================== */

/* ==========================================================
   VARIABLES
========================================================== */

:root{

    --club-green:#1E7D3A;
    --club-green-dark:#0B3D2E;

    --club-gold:#FFD54A;

    --club-cream:#FFFBEF;

    --club-card:#FFFFFF;

    --club-premium:#EAF2FF;
    --club-premium-border:#9CC2FF;
    --club-premium-text:#2563EB;

    --club-vip:#FFF4D8;
    --club-vip-border:#FFD54A;
    --club-vip-text:#A86B00;

    --club-new:#E8F8EC;
    --club-new-border:#8FD8A7;
    --club-new-text:#1E7D3A;

    --club-shadow:
        0 8px 24px rgba(0,0,0,.08);

    --club-radius:24px;

}

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

body{

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

}

/* ==========================================================
   HOME
========================================================== */

.club-home{

    display:flex;

    flex-direction:column;

    gap:32px;

    padding:20px;

}

.club-home-content{

    display:flex;

    flex-direction:column;

    gap:28px;

}

/* ==========================================================
   HERO LAYOUT
========================================================== */

.club-hero-layout{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:24px;

}

.club-hero-left{

    flex:1;

}

.club-hero-right{

    width:180px;

}

/* ==========================================================
   HOME ACTIONS
========================================================== */

.club-home-actions{

    display:flex;

    justify-content:center;

    margin-top:-28px;

    margin-bottom:8px;

}

/* ==========================================================
   HEADER
========================================================== */

.club-header{

    text-align:left;

    margin-bottom:26px;

}

.club-brand{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

.club-brand-title{

    font-size:28px;

    font-weight:700;

    color:#2F2F2F;

    letter-spacing:.4px;

    margin-left:16px;

}

.club-brand-name{

    margin-top:2px;

    font-size:52px;
    font-family:'Dancing Script', cursive;

    font-weight:700;

    color:#2E8B57;

    line-height:1;

}
.club-heart{

    display:inline-block;

    font-size:1.35em;

    font-weight:300;

    color:#2E8B57;

    margin-left:1px;

    transform:translateY(-5px);

    line-height:1;

}


/* ==========================================================
   GREETING
========================================================== */

.club-header-greeting{

    margin-top:30px;

    text-align:left;

    color:#2F2F2F;

    font-size:20px;

    line-height:1.35;

}

.club-header-greeting span{

    display:block;

    margin-top:6px;

    font-size:34px;

    font-weight:800;

    color:#222;

}


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

.club-hero{

    background:transparent;

    border-radius:0;

    padding:0;

    text-align:left;

    box-shadow:none;

}
.club-hero-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 28px;

    border-radius:999px;

    font-size:20px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

}

.club-hero-premium{

    background:#EEF4FF;

    color:#2563EB;

    border:2px solid #B9D4FF;

}

.club-hero-vip{

    background:#FFF8E7;

    color:#A86B00;

    border:2px solid #FFD54A;

}

.club-hero-nuevo{

    background:#F2FFF5;

    color:#1E7D3A;

    border:2px solid #8FD8A7;

}

.club-hero-message{

    margin-top:12px;

    font-size:26px;

    font-weight:800;

    color:#173F35;

}

.club-hero-subtitle{

    margin-top:8px;

    margin-left:0;

    margin-right:0;

    max-width:none;

    font-size:17px;

    line-height:1.55;

    color:#7B2CBF;

}

/* ==========================================================
   BENEFITS
========================================================== */

.club-level-card{

    background:#FBF6EA;
    border-radius:32px;

    padding:28px 24px;

    text-align:center;

box-shadow:none;
}

.club-level-icon{

    font-size:76px;

    line-height:1;

    margin-bottom:10px;

}

.club-level-name{

    margin-top:8px;

    margin-bottom:18px;

    text-align:center;

    font-size:18px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#7B2CBF;

}

.club-level-image{

    width:150px;

    height:auto;

    display:block;

    margin:0 auto;

    transform:translateY(-20px);

}


.club-benefits-title{

    font-size:18px;

    color:#4B5563;

}

.club-benefits-count{

    margin-top:6px;

    font-size:16px;

    font-weight:800;

    color:#7B2CBF;

    letter-spacing:.5px;

}

.club-benefits-subtitle{

    margin-top:4px;

    font-size:16px;

    color:#666;

}

.club-benefits-button{

    margin-top:28px;

    width:78%;

    display:block;

    margin-left:auto;

    margin-right:auto;

    border:none;

    border-radius:14px;

    padding:12px 18px;

    background:#7B2CBF;

    color:#FFD54A; 

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.club-benefits-button:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 22px rgba(123,44,191,.25);
}

/* ==========================================================
   STATS
========================================================== */

.club-stats{

    display:flex;

    justify-content:center;

    gap:10px;

}

.club-stat-card{

    width:72px;

    height:58px;

    background:#111;

    border-radius:12px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

}

.club-stat-number{

    font-size:20px;

    font-weight:700;

    color:#FFD54A;

}

.club-stat-label{

    margin-top:4px;

    font-size:11px;

    font-weight:700;

    color:#FFFFFF;

    letter-spacing:.3px;

    text-align:center;

    white-space:nowrap;

}

/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes clubPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.02);

    }

    100%{

        transform:scale(1);

    }

}

.club-pulse{

    animation:
        clubPulse
        2.6s
        ease-in-out
        infinite;

}

/* ==========================================================
   CLUB OVERLAY
========================================================== */

.club-overlay{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.65);

    backdrop-filter:blur(6px);

    z-index:999999;

    padding:20px;

}

/* ==========================================================
   CLUB MODAL
========================================================== */

.club-modal{

    width:min(92vw, 580px);

    max-height:88vh;

    overflow-y:auto;

    border-radius:28px;

    padding:24px;

    box-sizing:border-box;

    box-shadow:
        0 24px 60px rgba(0,0,0,.22);

}