/* Hero del formulario (oculto por defecto, se reemplaza por banner del proyecto) */
.hero-formulario-servicio{
    position: relative;
    background-image: url('/img/banner/banner1.png');
    background-size: cover;
    background-position: center;
    min-height: 360px;
    display: none;
    align-items: center;
    justify-content: center;
    margin-top: 72px;
    overflow: hidden;
}

.hero-formulario-servicio-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 23, 115, 0.68) 0%, rgba(71, 99, 231, 0.78) 100%);
}

.hero-formulario-servicio-container{
    position: relative;
    z-index: 2;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.hero-formulario-servicio-btn{
    min-width: 180px;
    min-height: 56px;
    padding: 12px 34px;
    border-radius: 999px;
    border: 1.5px solid #ffffff;
    color: #ffffff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: .4px;
}

/* Sección principal */
.formulario-servicio-caso-section{
    background:#f4f4f6;
    padding:80px 0;
    display:flex;
    align-items:center;
    overflow:hidden;
}

.formulario-servicio-caso-container{
    max-width:1180px;
}

.formulario-servicio-layout{
    display:grid;
    grid-template-columns:minmax(0, 380px) minmax(0, 480px);
    justify-content:center;
    align-items:center;
    gap:80px;
}

@media(min-width:1200px){
    .formulario-servicio-layout{
        gap:120px;
    }
}

.formulario-servicio-copy h2{
    margin:0;
    color:#001773;
    font-size:3rem;
    line-height:1.28;
    font-weight:400;
    letter-spacing:.2px;
}

.formulario-servicio-card{
    width:480px;
    min-height:675px;
    background:#fff;
    border:1px solid #21e9ff;
    border-bottom-color:#001773;
    border-radius:5px;
    padding:50px 54px 46px;
    position:relative;
    overflow:hidden;
}

.formulario-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:42px;
}

.formulario-icon img{
    height:42px;
    display:block;
}

.formulario-header{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:32px;
}

.formulario-header h3{
    margin:0;
    color:#001773;
    font-size:1.55rem;
    line-height:.95;
    font-weight:500;
}

.formulario-steps{
    display:flex;
    align-items:center;
    gap:7px;
    color:#001773;
    font-size:.78rem;
}

.formulario-icon-step2{
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease;
}

.formulario-servicio-card.is-step-2 .formulario-icon-step2{
    opacity:1;
    visibility:visible;
}

.formulario-servicio-card.is-step-2 .formulario-icon-step1{
    display:none;
}

.step-circle{
    width:42px;
    height:42px;
    border-radius:50%;
    border:3px solid #baf8f8;
    background:#baf8f8;
    box-shadow:inset 0 0 0 6px #fff;
    transition:all .3s ease;
}

.step-circle.active{
    background:#001773;
    border-color:#001773;
    box-shadow:inset 0 0 0 6px #fff;
}

.step-line{
    width:70px;
    height:1px;
    background:#baf8f8;
}

/* Steps */
.form-step{
    display:none;
    opacity:0;
    transform:translateX(35px);
}

.form-step-active{
    display:block;
    animation:stepIn .45s ease forwards;
}

.form-step.is-leaving{
    animation:stepOut .32s ease forwards;
}

@keyframes stepIn{
    from{opacity:0; transform:translateX(35px);}
    to{opacity:1; transform:translateX(0);}
}

@keyframes stepOut{
    from{opacity:1; transform:translateX(0);}
    to{opacity:0; transform:translateX(-35px);}
}

/* Inputs flotantes */
.form-floating-custom{
    position:relative;
    margin-bottom:25px;
}

.form-floating-custom input,
.form-floating-custom textarea{
    width:100%;
    height:54px;
    border: 1px solid rgba(0, 23, 115, 0.14);
    /* border:1px solid #001773;
    border-top-color:#21e9ff;
    border-left-color:#21e9ff; */
    border-radius:6px;
    background:#fff;
    color:#001773;
    font-size:1.05rem;
    padding:17px 28px 8px;
    outline:none;
    font-family:inherit;
}

.form-floating-custom textarea{
    height:auto;
    min-height:96px;
    resize:vertical;
    padding-top:22px;
}

.form-floating-custom label{
    position:absolute;
    left:28px;
    top:50%;
    transform:translateY(-50%);
    background:#fff;
    padding:0 8px;
    color:#001773;
    font-size:1.05rem;
    pointer-events:none;
    transition:all .22s ease;
}

.form-floating-custom-textarea label{
    top:22px;
    transform:none;
}

.form-floating-custom input:focus + label,
.form-floating-custom input:not(:placeholder-shown) + label,
.form-floating-custom textarea:focus + label,
.form-floating-custom textarea:not(:placeholder-shown) + label{
    top:0;
    font-size:.95rem;
    transform:translateY(-50%);
}

/* Tarjetas de pregunta */
.question-card{
    height:82px;
    display:flex;
    align-items:center;
    gap:18px;
    padding:0 18px 0 0;
    margin-bottom:20px;
    border:1px solid transparent;
    border-radius:6px;
    background:#fff;
    box-shadow:0 8px 24px rgba(0,23,115,.10);
    cursor:pointer;
    overflow:hidden;
    transition:all .32s ease;
    position:relative;
}

.question-card:hover,
.question-card.active{
    border-color:#21e9ff;
}

.question-card input[type="checkbox"]{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.question-icon{
    width:76px;
    height:82px;
    flex:0 0 76px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

.question-icon img{
    width:95px;
    transform:scale(1);
    transition:all .32s ease;
}

.question-card.active .question-icon img{
    opacity:1;
    transform:scale(1.3);
}

.question-copy h4{
    margin:0;
    color:#001773;
    font-size:1.05rem;
    font-weight:400;
    line-height:1.25;
}

.question-copy p,
.question-copy h4 span{
    margin:0;
    color:#001773;
    font-size:.72rem;
}

.debt-input{
    width:100%;
    height:54px;
    border:1px solid #001773;
    border-radius:6px;
    background:#fff;
    color:#001773;
    font-size:1.05rem;
    padding:0 28px;
    outline:none;
}

.debt-input::placeholder{
    color:#001773;
    opacity:1;
}

/* Botones */
.form-action{
    display:flex;
    justify-content:flex-end;
    margin-top:58px;
}

.form-action-between{
    justify-content:space-between;
    align-items:center;
}

.form-next-btn{
    min-width:160px;
    height:42px;
    padding:4px 5px 4px 18px;
    border:0;
    border-radius:999px;
    background:#e1fafa;
    color:#001773;
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    cursor:pointer;
    font-size:.9rem;
}

.form-btn-icon{
    width:34px;
    height:34px;
    border-radius:50%;
    background:rgba(0,23,115,.14);
    position:relative;
}

.form-btn-icon::before{
    content:"›";
    color:#001773;
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.4rem;
    line-height:1;
}

.form-back-btn{
    border:0;
    background:transparent;
    color:#001773;
    font-size:.78rem;
    display:inline-flex;
    align-items:center;
    gap:6px;
    cursor:pointer;
    padding:0;
}

.form-back-btn span{
    width:18px;
    height:18px;
    border-radius:50%;
    background:#001773;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:.75rem;
}

/* Mensajes de error */
.form-error{
    color:#c01616;
    font-size:.85rem;
    margin-top:-15px;
    margin-bottom:15px;
}

.form-alert{
    background:#fff5f5;
    border:1px solid #f3c2c2;
    color:#7a1a1a;
    padding:12px 16px;
    border-radius:6px;
    margin-bottom:20px;
    font-size:.9rem;
}

/* Página de gracias */
.gracias-section{
    background:#f3f3f7;
    min-height:440px;
    padding:105px 0 95px;
    position:relative;
}

.gracias-container{
    position:relative;
    min-height:260px;
}

.gracias-content{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:38px;
    color:#001773;
}

.gracias-icon img{
    width:120px;
    height:auto;
    display:block;
}

.gracias-text h1{
    margin:0 0 18px;
    color:#001773;
    font-size:2rem;
    font-weight:400;
    line-height:1.35;
    letter-spacing:.4px;
}

.gracias-text p{
    margin:0;
    color:#001773;
    font-size:1.45rem;
    font-weight:400;
    line-height:1.35;
}

.gracias-back{
    position:absolute;
    left:130px;
    top:155px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#001773;
    font-size:.95rem;
    text-decoration:none;
}

.gracias-back span{
    width:20px;
    height:20px;
    border-radius:50%;
    background:#001773;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    line-height:1;
}

.gracias-back:hover{
    color:#4359B4;
}

@media(max-width:991px){
    .formulario-servicio-caso-section{
        padding:48px 0;
    }

    .formulario-servicio-layout{
        grid-template-columns:1fr;
        gap:32px;
    }

    .formulario-servicio-card{
        width:100%;
        min-height:auto;
        padding:42px 28px;
    }

    .formulario-servicio-copy{
        text-align:center;
    }

    .formulario-servicio-copy h2{
        font-size:2.2rem;
    }

    .gracias-section{
        min-height:auto;
        padding:80px 0 85px;
    }

    .gracias-container{
        min-height:auto;
    }

    .gracias-content{
        gap:28px;
    }

    .gracias-icon img{
        width:100px;
    }

    .gracias-text h1{
        font-size:1.65rem;
    }

    .gracias-text p{
        font-size:1.2rem;
    }

    .gracias-back{
        position:static;
        margin-bottom:40px;
        margin-left:24px;
    }
}

@media(max-width:576px){
    .formulario-servicio-caso-section{
        padding:32px 0;
    }

    .formulario-servicio-card{
        padding:32px 20px;
        border-radius:8px;
    }

    .formulario-servicio-copy h2{
        font-size:1.8rem;
        line-height:1.2;
    }

    .formulario-top{
        margin-bottom:28px;
    }

    .formulario-header{
        margin-bottom:24px;
    }

    .formulario-header h3{
        font-size:1.3rem;
    }

    .formulario-icon img{
        height:34px;
    }

    .step-circle{
        width:32px;
        height:32px;
        border-width:2px;
        box-shadow:inset 0 0 0 4px #fff;
    }

    .step-line{
        width:40px;
    }

    .formulario-steps{
        font-size:.7rem;
        gap:5px;
    }

    .form-floating-custom{
        margin-bottom:18px;
    }

    .form-floating-custom input{
        height:48px;
        padding:14px 18px 6px;
        font-size:.95rem;
    }

    .form-floating-custom label{
        left:18px;
        font-size:.95rem;
    }

    .question-card{
        height:auto;
        min-height:72px;
        padding:8px 14px 8px 0;
        gap:12px;
    }

    .question-icon{
        width:60px;
        height:64px;
        flex:0 0 60px;
    }

    .question-icon img{
        width:75px;
    }

    .question-copy h4{
        font-size:.95rem;
    }

    .question-copy p,
    .question-copy h4 span{
        font-size:.7rem;
    }

    .debt-input{
        height:48px;
        padding:0 18px;
        font-size:.95rem;
    }

    .form-action{
        margin-top:36px;
    }

    .form-next-btn{
        min-width:140px;
        height:40px;
        font-size:.85rem;
    }

    .gracias-section{
        padding:60px 0 70px;
        text-align:center;
    }

    .gracias-content{
        flex-direction:column;
        gap:22px;
    }

    .gracias-icon img{
        width:88px;
        margin:0 auto;
    }

    .gracias-text h1{
        font-size:1.35rem;
        line-height:1.35;
    }

    .gracias-text p{
        font-size:1.05rem;
    }

    .gracias-back{
        position:static;
        margin:0 auto 30px;
        justify-content:center;
    }
}