/*==========================================
            HERO
==========================================*/

.hero-credito{

    padding:100px 0 90px;

    background:
    radial-gradient(circle at top right,#EAF4FF 0%,transparent 35%),
    #F8FBFF;

}

.hero-credito h1{

    font-size:60px;

    font-weight:800;

    color:#0B2A63;

    line-height:1.15;

}

.hero-credito p{

    margin:30px 0;

    font-size:20px;

    line-height:1.8;

    color:#64748B;

}

.hero-credito img{
     width:200%;

    border-radius:35px;

    box-shadow:0 30px 70px rgba(0,0,0,.12);

}



/*==========================================
            BENEFICIOS
==========================================*/

.beneficios-credito{

    padding:100px 0;

    background:#FFF;

}

.card-beneficio{

    background:#FFF;

    border-radius:25px;

    padding:35px;

    text-align:center;

    box-shadow:0 15px 35px rgba(0,0,0,.07);

    transition:.35s;

}

.card-beneficio:hover{

    transform:translateY(-12px);

}

.card-beneficio i{

    width:80px;

    height:80px;

    background:linear-gradient(135deg,#2E8BFF,#0B2A63);

    color:#FFF;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

    border-radius:50%;

    font-size:34px;

    margin-bottom:25px;

}

/*==========================================
            REQUISITOS
==========================================*/

.requisitos{

    background:#F8FBFF;

    padding:100px 0;

}

.requisito{

    background:#FFF;

    border-radius:20px;

    padding:35px;

    text-align:center;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

/*==========================================
            PASOS
==========================================*/

.pasos{

    padding:100px 0;

}

.paso{

    text-align:center;

    position:relative;

}

.numero{

    width:80px;

    height:80px;

    border-radius:50%;

    background:#2E8BFF;

    color:#FFF;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

    font-size:30px;

    font-weight:700;

    margin-bottom:25px;

}

/*==========================================
            FAQ
==========================================*/

.faq{

    padding:100px 0;

    background:#F8FBFF;

}

.accordion-item{

    border:none;

    border-radius:20px;

    margin-bottom:20px;

    overflow:hidden;

}

.accordion-button{

    font-size:18px;

    font-weight:600;

}




/*==========================================
            CTA
==========================================*/

.cta-final{

    background:linear-gradient(135deg,#0B2A63,#154DA6);

    color:#FFF;

    padding:100px 0;

    text-align:center;

}

.cta-final h2{

    font-size:48px;

    font-weight:700;

}

.cta-final p{

    margin:25px auto;

    max-width:700px;

    font-size:18px;

}

@media(max-width:991px){

.hero-credito{

    text-align:center;

}

.hero-credito h1{

    font-size:42px;

}

.hero-credito img{

    margin-top:40px;

}

}

.requisitos-credito .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 12px;
}

.requisitos-credito .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Si usas un color primario personalizado para tus botones/badget, aplícalo aquí */
.requisitos-credito .icon-wrapper i {
    color: var(--bs-primary); /* Ajusta al color corporativo si no usas el azul por defecto */
}

/*==========================================
            BOTONES (CTA & HERO)
==========================================*/

/* Estilo base del botón */
.btn-credito {
    display: inline-block;
    padding: 16px 36px;
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    background: linear-gradient(135deg, #2E8BFF, #0B2A63);
    border: none;
    border-radius: 50px;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 10px 25px rgba(46, 139, 255, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Efecto Hover */
.btn-credito:hover {
    color: #FFFFFF;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(46, 139, 255, 0.45);
    background: linear-gradient(135deg, #154DA6, #0B2A63);
}

/* Efecto al hacer clic */
.btn-credito:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(46, 139, 255, 0.3);
}

/* Variante alternativa para la sección CTA (fondo azul oscuro) */
.cta-final .btn-credito-alt {
    display: inline-block;
    padding: 16px 36px;
    font-size: 18px;
    font-weight: 700;
    color: #0B2A63;
    background: #FFFFFF;
    border: none;
    border-radius: 50px;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    cursor: pointer;
}

.cta-final .btn-credito-alt:hover {
    color: #0B2A63;
    background: #F8FBFF;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
}