:root {
    --main: #051B3E;
    --secondary: #00692F;
    --white: #ffffff;
}

.bg{
    height: 150vh;
    background: rgb(6, 28, 60);
    background: linear-gradient(
        45deg,
        #051B3E 0%,
        #141477ea 35%,
        #00692F 100%
    );
}

.div_contenedor_pasos {
    display: flex;
    justify-content: center;
}

.div_pasos_activo,
.div_pasos {
    border-radius: 8px;
    color: var(--secondary);
    background-color: var(--white);
    padding: 8px;
    width: 40px;
}

.div_pasos {
    color: var(--white);
    background-color: var(--secondary);
}

.fondo_main,
.btn_main,
.btn_secondary {
    color: var(--white);
    background-color: var(--main);
}

.btn_main,
.btn_secondary,
.btn_fill,
.btn_fill_secondary {
    border: none;
    border-radius: 12px;
    padding: 8px;
}

.btn_secondary {
    background-color: var(--secondary);
}

.btn_fill_secondary {
    color: var(--secondary);
    background-color: var(--white);
    border: 2px solid var(--secondary);
    transition: color 0.5s ease, background-color 0.5s ease;
}

.btn_fill_secondary:hover {
    color: var(--white);
    background-color: var(--secondary);
    border: 2px solid var(--secondary);
}

.btn_fill {
    color: var(--main);
    background-color: var(--white);
    border: 2px solid var(--main);
    transition: color 0.5s ease, background-color 0.5s ease;
}

.btn_fill:hover {
    color: var(--white);
    background-color: var(--main);
    border: 2px solid var(--main);
}

.btn_type_fill{
    height: 40px;
    align-self: end;
}

.text-main{
    color: var(--main);
}