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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 35px;

    border-radius:50px;

    text-decoration:none;

    font-size:1rem;

    font-weight:700;

    cursor:pointer;

    transition:.35s ease;

    border:none;

}


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

.btn-primary{

    background:#d62828;

    color:#ffffff;

    box-shadow:0 12px 30px rgba(214,40,40,.25);

}

.btn-primary:hover{

    background:#b71c1c;

    transform:translateY(-4px);

    box-shadow:0 20px 40px rgba(214,40,40,.35);

}


/*=============================================
BOTÓN OSCURO
=============================================*/

.btn-dark{

    background:#111111;

    color:#ffffff;

}

.btn-dark:hover{

    background:#000000;

    transform:translateY(-4px);

}


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

.btn-light{

    background:#ffffff;

    color:#111111;

    border:2px solid #e5e5e5;

}

.btn-light:hover{

    background:#f4f4f4;

}


/*=============================================
BOTÓN BORDE ROJO
=============================================*/

.btn-outline{

    background:transparent;

    color:#d62828;

    border:2px solid #d62828;

}

.btn-outline:hover{

    background:#d62828;

    color:white;

}


/*=============================================
BOTÓN CON ICONO
=============================================*/

.btn i{

    font-size:1rem;

}


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

@media(max-width:768px){

.btn{

    width:100%;

    padding:16px;

}

}