/* ==================================CONTENEDOR GENERAL=============================== */

.jc-construccion {
    min-height: 70vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 50px 25px;

    font-family: 'Inter', Arial, Helvetica, sans-serif;

    background: #f4f6f9;

    box-sizing: border-box;
}

.jc-construccion *,
.jc-construccion *::before,
.jc-construccion *::after {
    box-sizing: border-box;
}


/* ===================================TARJETA PRINCIPAL=================================== */

.jc-construccion-tarjeta {
    width: 100%;
    max-width: 820px;

    padding: 55px 45px;

    background: #ffffff;

    border: 1px solid #dfe6ec;
    border-top: 5px solid #003f73;
    border-radius: 18px;

    box-shadow: 0 10px 30px rgba(0, 63, 115, 0.08);

    text-align: center;
}


/* ==================================ÍCONO PRINCIPAL================================== */

.jc-construccion-icono {
    width: 82px;
    height: 82px;

    margin: 0 auto 25px auto;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e8f6fb;

    border-radius: 50%;

    color: #003f73;

    font-size: 36px;
}


/* =============================================TÍTULO PRINCIPAL================================ */

.jc-construccion-titulo {
    margin: 0;

    color: #003f73;

    font-size: 38px;
    font-weight: 800;

    line-height: 1.2;
}


/* Línea decorativa debajo del título */
.jc-construccion-linea {
    width: 75px;
    height: 4px;

    margin: 22px auto 28px auto;

    background: #65c7e8;

    border-radius: 10px;
}


/* ===================================SUBTÍTULO==================================== */

.jc-construccion-subtitulo {
    margin: 0 0 20px 0;

    color: #1f2937;

    font-size: 27px;
    font-weight: 700;
}


/* =============================TEXTO INFORMATIVO=================================== */

.jc-construccion-texto {
    max-width: 650px;

    margin: 0 auto 28px auto;

    color: #5b6470;

    font-size: 16px;
    line-height: 1.8;
}


/* =============================MENSAJE DE ESTADO============================= */

.jc-construccion-mensaje {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    margin: 0;

    padding: 12px 20px;

    background: #eef6fb;

    border: 1px solid #d4e8f2;
    border-radius: 30px;

    color: #0d5f9a;

    font-size: 14px;
    font-weight: 700;
}

.jc-construccion-mensaje i {
    color: #2d83b5;
}


/* ===============================RESPONSIVE====================================== */

@media (max-width: 768px) {

    .jc-construccion {
        padding: 30px 18px;
    }

    .jc-construccion-tarjeta {
        padding: 40px 25px;
    }

    .jc-construccion-titulo {
        font-size: 30px;
    }

    .jc-construccion-subtitulo {
        font-size: 23px;
    }

    .jc-construccion-texto {
        font-size: 15px;
    }

}


@media (max-width: 480px) {

    .jc-construccion-icono {
        width: 70px;
        height: 70px;

        font-size: 30px;
    }

    .jc-construccion-titulo {
        font-size: 26px;
    }

    .jc-construccion-subtitulo {
        font-size: 21px;
    }

}