/*=========================================================
    HAGAMOS DISEÑO
    COMPONENTES
=========================================================*/

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

.btn-primary,
.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px 34px;

    border-radius:16px;

    font-weight:600;

    transition:.35s;

}

.btn-primary{

    background:var(--gradient-primary);

    color:white;

    box-shadow:0 15px 40px rgba(37,99,235,.30);

}

.btn-primary:hover{

    transform:translateY(-6px);

    box-shadow:0 25px 60px rgba(37,99,235,.45);

}

.btn-secondary{

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

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

    backdrop-filter:blur(12px);

}

.btn-secondary:hover{

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

}

/*==============================
BADGE
==============================*/

.badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:50px;

    background:rgba(37,99,235,.10);

    border:1px solid rgba(37,99,235,.25);

    color:#8EC5FF;

    font-size:.95rem;

}

/*==============================
CARDS
==============================*/

.card{

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

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

    border-radius:24px;

    backdrop-filter:blur(18px);

}

/*==============================
SECTION TITLE
==============================*/

.section-title{

    font-size:3rem;

    text-align:center;

    margin-bottom:25px;

}

.section-subtitle{

    max-width:750px;

    margin:auto;

    text-align:center;

    color:var(--text-gray);

    margin-bottom:70px;

}