/* ============================================
   CALCULADORA DE PRÉSTAMOS
   ============================================ */

/* Hero/Encabezado de la calculadora */
.hero-calculadora { 
    background: var(--white); 
    padding: 28px 20px 0; 
    text-align: center; 
}

.hero-calculadora .hero-content h1 { 
    margin: 0; 
    color: var(--green-dark); 
    font-size: 2rem;
    padding-bottom: 28px;
    border-bottom: 3px solid var(--green-dark); /* ← LÍNEA VERDE SEPARADORA */
}

/* Sección principal de calculadora */
.section-calculadora { 
    padding: 30px 20px 72px; 
    background: var(--white); 
}

.section-calculadora > .container > h2 { 
    display: none; 
}

/* Grid principal: inputs a la izquierda, resultados a la derecha */
.calculadora-container { 
    display: grid; 
    grid-template-columns: minmax(0, 1.04fr) minmax(420px, 1fr); 
    gap: 54px; 
    max-width: 1200px; 
    margin: 0 auto; 
    align-items: flex-start; /* ← ALINEACIÓN VERTICAL ARRIBA (arreglado) */
}

/* ============================================
   INPUTS (LADO IZQUIERDO)
   ============================================ */

.calculadora-inputs { 
    display: flex; 
    flex-direction: column; 
    gap: 45px; 
    padding-top: 0; /* ← Removido para alineación */
}

/* Grupo de input (label + campo) */
.input-group { 
    display: grid; 
    grid-template-columns: 1fr 190px; 
    column-gap: 26px; 
    row-gap: 27px; 
    align-items: center; 
}

.input-group label { 
    color: #1e2832; 
    font-size: 1.18rem; 
    font-weight: 600; 
}

/* Input con moneda o sufijo */
.input-with-currency, 
.input-with-suffix { 
    display: flex; 
    align-items: center; 
    height: 56px; 
    border: 2px solid #747474; 
    border-radius: 4px; 
    overflow: hidden; 
    background: var(--white); 
}

.currency, 
.suffix { 
    color: #31445b; 
    font-size: 1rem; 
    font-weight: 400; 
}

.currency { 
    padding-left: 12px; 
}

.suffix { 
    padding-right: 12px; 
}

.input-with-currency input, 
.input-with-suffix input { 
    width: 100%; 
    min-width: 0; 
    border: 0; 
    outline: 0; 
    padding: 10px 8px; 
    text-align: right; 
    color: #111; 
    font: inherit; 
    font-size: 1rem; 
}

/* Contenedor de slider */
.slider-container { 
    grid-column: 1 / -1; 
}

/* Slider (rango) */
.slider { 
    --value: 0%; 
    display: block; 
    width: 100%; 
    height: 11px; 
    border-radius: 999px; 
    appearance: none; 
    -webkit-appearance: none; 
    cursor: pointer; 
    background: linear-gradient(to right, #169e3b 0 var(--value), #e8ebef var(--value) 100%); 
}

.slider::-webkit-slider-thumb { 
    appearance: none; 
    -webkit-appearance: none; 
    width: 27px; 
    height: 27px; 
    border: 1px solid #d5d5d5; 
    border-radius: 50%; 
    background: #fff; 
    box-shadow: 0 1px 3px rgb(0 0 0 / 22%); 
}

.slider::-moz-range-thumb { 
    width: 25px; 
    height: 25px; 
    border: 1px solid #d5d5d5; 
    border-radius: 50%; 
    background: #fff; 
    box-shadow: 0 1px 3px rgb(0 0 0 / 22%); 
}

/* Etiquetas min/max del slider */
.slider-labels { 
    display: flex; 
    justify-content: space-between; 
    margin-top: 10px; 
    color: #6e7780; 
    font-size: .95rem; 
}

/* Texto explicativo debajo del segundo slider */
.input-group:nth-child(2) .slider-container::after { 
    content: "Especifique el tiempo del préstamo en meses."; 
    display: block; 
    margin-top: 10px; 
    color: #6e7780; 
    font-size: .95rem; 
}

/* ============================================
   RESULTADOS (LADO DERECHO)
   ============================================ */

.calculadora-resultados { 
    min-height: 585px; 
    padding: 54px 40px; 
    border-radius: 17px; 
    background: #e9edf1; 
    color: #1e2832; 
}

/* Contenedor de cada resultado */
.resultado-item { 
    padding: 0 0 26px; 
}

/* Primer resultado (cuota mensual - destaca) */
.resultado-item:first-child { 
    margin-bottom: 20px; 
}

.resultado-item:first-child .resultado-label { 
    color: #1e2832; 
    font-size: 1.18rem; 
    font-weight: 600; 
}

/* Valor del resultado (número grande) */
.resultado-valor { 
    display: block; 
    margin-top: 10px; 
    color: #303030; 
    font-size: 3rem; 
    line-height: 1.05; 
    font-weight: 700; 
}

/* Separador entre secciones */
.resultado-item:nth-child(2) { 
    border-bottom: 2px solid #ced2d5; 
}

/* Resultado de interés con spacing */
.resultado-item:nth-child(3) { 
    padding-top: 29px; 
}

/* Grid para montos (label | valor) */
.resultado-item:nth-child(2), 
.resultado-item:nth-child(3) { 
    display: grid; 
    grid-template-columns: 1fr auto; 
    column-gap: 20px; 
}

.resultado-item:nth-child(2) .resultado-label { 
    grid-column: 1 / -1; 
    margin-bottom: 5px; 
}

/* Etiquetas de resultado */
.resultado-label { 
    color: #1e2832; 
    font-size: 1.18rem; 
    font-weight: 600; 
}

.resultado-sublabel { 
    color: #1e2832; 
    font-size: 1.12rem; 
    font-weight: 600; 
}

/* Monto formateado */
.resultado-monto { 
    color: #263748; 
    font-size: 1.35rem; 
    font-weight: 400; 
    white-space: nowrap; 
}

/* Descripción pequeña */
.resultado-descripcion { 
    grid-column: 1 / -1; 
    margin-top: 4px; 
    color: #69727b; 
    font-size: .98rem; 
}

/* ============================================
   CTA FINAL (CALL TO ACTION)
   ============================================ */

.resultado-cta { 
    margin-top: 44px; 
}

.resultado-cta h4 { 
    margin: 0 0 13px; 
    color: #263748; 
    font-size: 1.45rem; 
}

.resultado-cta .btn { 
    display: flex; 
    justify-content: center; 
    width: 100%; 
    padding: 19px 24px; 
    border-radius: 8px; 
    background: #169e3b; 
    font-size: 1.28rem; 
}

.resultado-cta .btn:hover { 
    background: var(--green-dark); 
    color: var(--white); 
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */

@media (max-width: 850px) { 
    .calculadora-container { 
        grid-template-columns: 1fr; 
    } 
    
    .calculadora-resultados { 
        min-height: auto; 
    } 
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */

@media (max-width: 540px) { 
    .hero-calculadora { 
        padding-top: 22px; 
    } 
    
    .hero-calculadora .hero-content h1 { 
        font-size: 1.6rem; 
    } 
    
    .section-calculadora { 
        padding: 25px 15px 50px; 
    } 
    
    .calculadora-inputs { 
        gap: 34px; 
    } 
    
    .input-group { 
        grid-template-columns: 1fr; 
        row-gap: 14px; 
    } 
    
    .input-with-currency, 
    .input-with-suffix { 
        width: 100%; 
    } 
    
    .calculadora-resultados { 
        padding: 32px 24px; 
        border-radius: 14px; 
    } 
    
    .resultado-valor { 
        font-size: 2.35rem; 
    } 
    
    .resultado-item:nth-child(2), 
    .resultado-item:nth-child(3) { 
        grid-template-columns: 1fr; 
        row-gap: 3px; 
    } 
}