/* =====================================
NIVELES
===================================== */

#niveles{

    position:relative;

    overflow:hidden;
}

.levels-grid{

    display:grid;

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

    gap:40px;

    margin-top:80px;
}

.level-card{

    position:relative;

    padding:50px;

    border-radius:35px;

    backdrop-filter:blur(20px);

    transition:.6s cubic-bezier(
        0.22,
        1,
        0.36,
        1
    );

    overflow:hidden;
}

.level-card:hover{

    transform:
    translateY(-12px);
}

.level-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        135deg,
        transparent,
        rgba(255,255,255,.04),
        transparent
    );

    opacity:0;

    transition:.8s;
}

.level-card:hover::before{

    opacity:1;
}

/* =====================================
GRATUITO
===================================== */

.free{

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

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

/* =====================================
PREMIUM
===================================== */

.premium{

    background:
    linear-gradient(
        180deg,
        rgba(212,175,55,.12),
        rgba(255,255,255,.02)
    );

    border:
    1px solid rgba(
        212,
        175,
        55,
        .25
    );

    box-shadow:
    0 0 60px
    rgba(
        212,
        175,
        55,
        .12
    );
}

.premium:hover{

    box-shadow:
    0 0 90px
    rgba(
        212,
        175,
        55,
        .22
    );
}

/* =====================================
BADGES
===================================== */

.level-badge{

    display:inline-block;

    padding:
    10px 18px;

    border-radius:999px;

    font-size:.75rem;

    letter-spacing:2px;

    margin-bottom:25px;

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

.premium-badge{

    background:
    linear-gradient(
        90deg,
        #d4af37,
        #f5d88b
    );

    color:#000;

    font-weight:700;

    border:none;
}

/* =====================================
TITULOS
===================================== */

.level-card h3{

    font-size:2rem;

    margin-bottom:15px;

    font-family:
    'Cormorant Garamond',
    serif;
}

.level-subtitle{

    color:#bdbdbd;

    margin-bottom:35px;

    line-height:1.8;
}

/* =====================================
LISTA
===================================== */

.level-card ul{

    list-style:none;

    padding:0;

    margin:0 0 40px;
}

.level-card li{

    padding:
    14px 0;

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

    color:#e8e8e8;
}

.level-card li:last-child{

    border:none;
}

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

.level-card .btn-primary,
.level-card .btn-secondary{

    width:100%;

    text-align:center;

    justify-content:center;
}

/* =====================================
TEXTO FINAL
===================================== */

.levels-footer{

    max-width:900px;

    margin:
    70px auto 0;

    text-align:center;

    font-size:1.2rem;

    line-height:2;
}

.levels-footer strong{

    color:#f5d88b;
}

/* =====================================
PREMIUM GLOW
===================================== */

.premium::after{

    content:"";

    position:absolute;

    top:-50%;

    left:-50%;

    width:200%;

    height:200%;

    background:
    radial-gradient(
        circle,
        rgba(
            212,
            175,
            55,
            .15
        ),
        transparent 60%
    );

    animation:
    premiumGlow 8s linear infinite;

    pointer-events:none;
}

@keyframes premiumGlow{

    0%{
        transform:rotate(0deg);
    }

    100%{
        transform:rotate(360deg);
    }
}

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

@media(max-width:900px){

    .levels-grid{

        grid-template-columns:1fr;
    }

    .level-card{

        padding:35px;
    }

    .level-card h3{

        font-size:1.7rem;
    }
}

.premium-value{

    margin:20px 0 30px;

    padding:15px;

    border-radius:15px;

    background:
    rgba(212,175,55,.08);

    border:
    1px solid rgba(
        212,
        175,
        55,
        .15
    );

    color:#f5d88b;

    font-size:.9rem;

    text-align:center;
}