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

body{
    font-family:'Poppins',sans-serif;
    background:#09090f;
    color:#fff;
    min-height:100vh;
    overflow-x:hidden;
}

.background{
    position:fixed;
    inset:0;
    background:
        radial-gradient(circle at top right,#00d08422,transparent 35%),
        radial-gradient(circle at bottom left,#00b4d822,transparent 35%),
        #09090f;
    z-index:-1;
}

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

.container{
    width:min(1080px,92%);
    margin:0 auto;
    padding:30px 0 60px;
}

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

.topbar{

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

    margin-bottom:35px;

}

.top-btn{

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

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

    color:#fff;

    padding:12px 20px;

    border-radius:12px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

    backdrop-filter:blur(10px);

}

.top-btn:hover{

    background:#00d084;

    color:#000;

}
.top-btn-dashboard{

    display:flex;
    align-items:center;
    gap:8px;

    background:linear-gradient(135deg,#00ff95,#00d084);

    color:#04130b;

    border:none;

    font-weight:800;

    box-shadow:
        0 0 25px rgba(0,255,149,.45),
        0 10px 30px rgba(0,255,149,.30);

    animation:pulseDashboard 2s infinite;

}

.top-btn-dashboard:hover{

    transform:translateY(-2px) scale(1.04);

}

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

.hero{

    text-align:center;

    margin-bottom:45px;

}

.logo{

    font-size:28px;

    font-weight:800;

    letter-spacing:2px;

    margin-bottom:18px;

}

.logo span{

    color:#00d084;

}

.hero h1{

    font-size:30px;

    font-weight:800;

    line-height:1.25;

    max-width:760px;

    margin:0 auto 18px;

}

.hero p{

    max-width:620px;

    margin:auto;

    color:#a1a1aa;

    font-size:17px;

    line-height:1.7;

}

/*==============================
        BENEFICIOS
==============================*/

.beneficios{

    max-width:700px;

    margin:0 auto 50px;

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

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

    border-radius:22px;

    padding:32px;

}

.beneficios h2{

    font-size:28px;

    margin-bottom:22px;

}

.beneficios ul{

    list-style:none;

}

.beneficios li{

    padding:12px 0;

    color:#d4d4d8;

    font-size:17px;

}

/*==============================
            PLANES
==============================*/

.planes{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:26px;

}

.plan{

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

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

    border-radius:22px;

    padding:28px 24px;

    text-align:center;

    position:relative;

    transition:.25s;

}

.plan:hover{

    transform:translateY(-8px);

    border-color:#00d084;

}

.destacado{

    border:2px solid #00d084;

    box-shadow:0 0 25px rgba(0,208,132,.18);

}

.badge{

    position:absolute;

    top:-16px;

    left:50%;

    transform:translateX(-50%);

    background:#00d084;

    color:#000;

    padding:9px 18px;

    border-radius:30px;

    font-size:13px;

    font-weight:700;

}

.plan h3{

    font-size:22px;

    margin-bottom:12px;

}

.precio{

    font-size:58px;

    font-weight:800;

    margin:18px 0;

    line-height:1;

}

.precio span{

    font-size:28px;

    vertical-align:top;

}

.btn-plan{

    width:100%;

    padding:15px;

    border:none;

    border-radius:14px;

    background:#10d08a;

    color:#000;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.btn-plan:hover{

    transform:scale(1.03);

}

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

@media(max-width:950px){

    .planes{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .container{

        width:92%;

        padding:20px 0 40px;

    }

    .topbar{

        margin-bottom:25px;

    }

    .top-btn{

        padding:10px 15px;

        font-size:14px;

    }

    .logo{

        font-size:24px;

    }

    .hero h1{

        font-size:26px;

    }

    .hero p{

        font-size:15px;

    }

    .beneficios{

        padding:24px;

    }

    .beneficios h2{

        font-size:24px;

    }

    .plan{

        padding:24px 20px;

    }

    .precio{

        font-size:48px;

    }

}
/*==============================
    ANIMACIÓN BOTÓN DASHBOARD
==============================*/

@keyframes pulseDashboard{

    0%{

        box-shadow:
            0 0 18px rgba(0,230,138,.35),
            0 10px 30px rgba(0,230,138,.35);

    }

    50%{

        box-shadow:
            0 0 40px rgba(0,230,138,.70),
            0 18px 45px rgba(0,230,138,.55);

    }

    100%{

        box-shadow:
            0 0 18px rgba(0,230,138,.35),
            0 10px 30px rgba(0,230,138,.35);

    }

}