@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0&display=swap');
.simulador-hipoteca
{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.simulador-hipoteca label, .simulador-hipoteca span
{
    font-size: 0.9rem;
    font-family:  "Spectral", serif;
}
.slides-valores
{
    display: flex;
    align-items: center;
}
#montoHipotecaValor, #montoImpuestosValor,#montoInteresValor{
    margin-left: auto;
    font-size: 2rem;
    color:#888;
    font-family:  "Spectral", serif;
}

#simuladorForm 
{
    display: flex;
    flex-wrap: wrap;
    gap: 2rem; /* Ajusta este valor según necesites */
    row-gap: 1rem;
    max-width: 600px;
    padding: 50px 0;
}
#simuladorForm input, #simuladorForm select
{
    border-radius: 0;
    border:none;
    border-bottom: 1px solid #000;
    font-family:  "Spectral", serif;
}
.form-group input[type="range"] {
    width: 100%; /* Hace que el input ocupe todo el ancho de su contenedor */
    margin: 0; /* Elimina márgenes por defecto */
    font-family:  "Spectral", serif;
}
#simuladorForm .form-group {
    flex-basis: calc(50% - 2rem); /* Ajusta el 20px según tu valor de gap */
    /* Opcional: si necesitas que los elementos sean más flexibles, puedes usar flex-grow y flex-shrink */
    flex-grow: 1;
    flex-shrink: 0;
}
#simuladorForm div:nth-child(5)
{
    flex-basis: 100%;
}
#pagoTotalMensual
{
    font-size: 2.5rem;
    font-weight: bold;
}
#resultados
{
    max-width: 600px;
    margin: 0 auto;
    font-family:  "Spectral", serif;
    background-color: #1eb4f2;
    color: #FFF;
    padding: 2rem;
}
#resultados p
{
    margin-bottom: 0;
    display: flex;
}
#resultados p span:nth-child(2)
{
    margin-left: auto;
    font-size: 1.3rem;
    font-weight: bold;
}
#resultados h3
{
    margin-bottom: 2rem;
}