:root
{
    --color_base_boton:#DB9A00;
    --color_base_boton_hover: #1B2B67;
}

.boton_s12
{
    width: 250px;
    height: 50px;
    border: 2px solid white;
    border-radius: 30px;
    margin: 5px;
    background-color: var(--color_base_boton);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.invertido
{
    background-color: var(--color_base_boton_hover);
}
.cont_izq_boton_s12
{
    width: 80%;
    height: 100%;
}
.cont_der_boton_s12
{
    width: 20%;
    height: 100%;
}
.cont_der_boton_s12 i
{
    width: 30px;
    height: 30px;
    font-size: 30px;
    /*border: 1px solid red;*/
    transition: all 0.8s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.boton_s12:hover
{
    background-color:var(--color_base_boton_hover);
}
.boton_s12:hover .cont_der_boton_s12 i
{
    transform: rotate(335deg);
}

.invertido:hover
{
    background-color: var(--color_base_boton);
}