.card-ui{

    background:var(--card);
    color:var(--text);

    border-radius:24px;

    padding:22px;

    border:1px solid var(--border-color);
    box-shadow:var(--shadow-sm);

    margin-bottom:18px;

}

.card-ui:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-md);

}

.btn-primary{

    background:linear-gradient(90deg,var(--primary-color),var(--primary-light));

    border:none;

    border-radius:16px;

    padding:14px;
    color:var(--surface);
    font-weight:600;
    box-shadow:0 10px 25px rgba(45,108,223,.22);

}

.btn-primary:hover{

    transform:scale(1.02);

}

.btn-secondary{

    background:var(--card);

    border:2px solid var(--primary-color);

    color:var(--primary-color);

    border-radius:16px;

    padding:14px;

}

.input-ui{

    border:none;

    background:var(--card-secondary);

    border-radius:18px;

    padding:15px;

    width:100%;

    outline:none;

}

.badge-ui{

    display:inline-block;

    background:var(--primary-soft);

    color:var(--primary-color);

    padding:6px 12px;

    border-radius:50px;

    font-size:13px;

}

/*==============================
        ICONOS
==============================*/

.icon-box{

    width:62px;

    height:62px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,var(--primary-color),var(--primary-light));

    color:var(--surface);

    font-size:24px;

    box-shadow:0 15px 30px rgba(79,142,247,.18);

}

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

.section-title{

    font-size:28px;

    font-weight:700;

    color:var(--text-strong);

    margin-bottom:8px;

}

.section-subtitle{

    color:var(--text-secondary);

    font-size:15px;

}

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

.badge-blue{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:8px 16px;

    border-radius:50px;

    background:var(--primary-soft);

    color:var(--primary-color);

    font-weight:600;

}

/*==============================
        CONTADORES
==============================*/

.counter{

    font-size:34px;

    font-weight:700;

    color:var(--primary-color);

}