.banner img {
    width: auto;
    height: 100vh;
    display: block;
}

main {
    gap: 20px;
}

.app {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 50px;
    justify-content: center;
    align-items: center;
}

.logo {
    margin-bottom: 30px;
    text-align: center;
}

.logo img {
    width: 200px;
}

main[data-step="dados-pessoais"] .step-dp,
main[data-step="dados-do-veiculo"] .step-dv {
    color: white;
}

main[data-step="dados-pessoais"] .step-dp .icon,
main[data-step="dados-do-veiculo"] .step-dv .icon {
    background: var(--verde);
    color: var(--grafite);
}

.forms {
    max-width: 800px;
    width: 100%;
}

.forms .step-dp,
.forms .step-dv {
    display: none;
}

main[data-step="dados-pessoais"] .forms .step-dp,
main[data-step="dados-do-veiculo"] .forms .step-dv {
    display: block;
}

.form-title {
    font-size: 24px;
    margin: 20px 0 30px;
    text-align: center;
    font-weight: 600;
}

.forms form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 40px;
}

.forms form > div {
    position: relative;
}

.forms .step-dp > button,
.forms .step-dv > button {
    margin: auto;
}

.forms .continuar {
    text-align: center;
    margin-bottom: 20px;
}

/* Responsividade para dispositivos móveis */
@media (max-width: 768px) {
    body {
        flex-direction: column;
        align-items: center;
    }

    .app {
        width: 100%;
        padding: 20px;
        gap: 20px;
    }

    .forms form {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 15px;
    }

    .banner {
        display: none;
    }

    .step .text {
        display: none;
    }
}