/* ==========================================================
   BIBLIOTECA BIK
   BOTONES
   Versión 1.0
   ========================================================== */


/* ===============================
   BOTÓN BASE
   =============================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-height:var(--alto-boton);

    padding:var(--padding-boton);

    border:none;

    border-radius:var(--radio-md);

    cursor:pointer;

    text-decoration:none;

    font-family:var(--fuente-principal);

    font-size:var(--texto-md);

    font-weight:600;

    transition:all var(--transicion-normal);

}


/* ===============================
   BOTÓN PRINCIPAL
   =============================== */

.btn-primary{

    background:var(--color-principal);

    color:white;

}

.btn-primary:hover{

    background:var(--color-secundario);

    transform:translateY(-2px);

    box-shadow:var(--sombra-media);

}


/* ===============================
   BOTÓN SECUNDARIO
   =============================== */

.btn-secondary{

    background:var(--color-secundario);

    color:white;

}

.btn-secondary:hover{

    background:var(--color-principal);

    transform:translateY(-2px);

    box-shadow:var(--sombra-media);

}


/* ===============================
   BOTÓN CONTORNO
   =============================== */

.btn-outline{

    background:transparent;

    color:var(--color-principal);

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

}

.btn-outline:hover{

    background:var(--color-principal);

    color:white;

}


/* ===============================
   BOTÓN CLARO
   =============================== */

.btn-light{

    background:white;

    color:var(--texto-principal);

    border:1px solid var(--borde-claro);

}

.btn-light:hover{

    box-shadow:var(--sombra-suave);

}


/* ===============================
   BOTÓN DESCARGAR
   =============================== */

.btn-download{

    background:var(--color-vital);

    color:white;

}

.btn-download:hover{

    transform:translateY(-2px);

    box-shadow:var(--sombra-media);

}


/* ===============================
   BOTÓN VÍDEO
   =============================== */

.btn-video{

    background:#e53935;

    color:white;

}

.btn-video:hover{

    background:#c62828;

}


/* ===============================
   BOTÓN PEQUEÑO
   =============================== */

.btn-sm{

    padding:8px 18px;

    font-size:var(--texto-sm);

}


/* ===============================
   BOTÓN GRANDE
   =============================== */

.btn-lg{

    padding:18px 40px;

    font-size:var(--texto-lg);

}


/* ===============================
   BOTÓN ANCHO COMPLETO
   =============================== */

.btn-block{

    width:100%;

}


/* ===============================
   BOTÓN DESHABILITADO
   =============================== */

.btn:disabled{

    opacity:.5;

    cursor:not-allowed;

}


/* ===============================
   EFECTO CLICK
   =============================== */

.btn:active{

    transform:scale(.98);

}


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

@media(max-width:768px){

    .btn{

        width:100%;

    }

}