:root {
    --navColor: #035E9C;
    --bodyColor: #047FD2;
    --blanco: #FFFFFF;
    --grisObscuro: #222;
    --azulValores: #6BE6FF;
    --azulClaroVacante: rgba(30, 139, 209, .8);
    --azulOscuroVacante: rgba(8, 92, 140, .8);
    --azulBtnCargarCv: rgba(30, 139, 209, .2);
}

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    cursor: pointer;
}

nav {
    position: fixed;
    top: 20px;
    width: 100%;
    padding: 10px 10px;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    background-color: var(--navColor);
    z-index: 3;
}

    nav a {
        color: var(--blanco);
        padding: 5px 10px;
        margin: 0px 20px;
    }

    nav img {
        width: 100px;
        background-color: var(--blanco);
        padding: 5px;
        border-radius: 10px;
        position: absolute;
        margin-left: -40px;
        margin-top: -30px;
    }

.cntRedesNav {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 10px;
    align-items: center;
}

    .cntRedesNav img {
        width: 25px;
        margin: 5px;
    }

body {
    font-family: Helvetica;
    font-size: 1em;
    background-color: var(--bodyColor);
}

.cntPrimcipal {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    /*height: 100vh;*/
    padding: 100px 40px;
    box-sizing: border-box;
}

/* INICIO ------------------------------------------------------------------------------------------------------*/

.cntInfoInicio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 300px);
    color: var(--blanco);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url("https://visoti.mx/imagenes/grupoviso/edificio_inicio.gif");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

    .cntInfoInicio label {
        font-size: 1.5em;
    }

    .cntInfoInicio h1 {
        font-size: 5em;
    }

    .cntInfoInicio a {
        margin-top: 20px;
        padding: 10px 20px;
        font-size: 1.3em;
        background-color: var(--navColor);
        border-radius: 10px;
        color: var(--blanco);
    }

/* NOSOTROS --------------------------------------------------------------------------------------------------------*/

.cntSeccion {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 20px 40px;
    color: var(--blanco);
    box-sizing: border-box;
}

.cntImagenSomos {
    width: 45%;
    box-sizing: border-box;
}

    .cntImagenSomos img {
        position: relative;
        width: 130%;
        z-index: 2;
    }

.cntTextoSomos {
    width: 55%;
    box-sizing: border-box;
}

    .cntTextoSomos h1 {
        margin-left: 90px;
    }

.lblTituloSeccion {
    font-size: 3em;
}

.lblSubtituloSeccion {
    font-size: 2em;
}

.parrafoSomos {
    margin: 40px 0px;
    padding: 30px 30px 30px 90px;
    border: 2px solid var(--blanco);
    background-color: rgba(255, 255, 255, .16);
    border-radius: 10px;
}

.cntPieSomos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    padding-left: 90px;
    font-size: 1.2em;
    font-style: italic;
}

.cntMisionImagen {
    width: 50%;
    box-sizing: border-box;
}

    .cntMisionImagen img {
        width: 100%;
    }

.cntMisionTexto {
    width: 50%;
    box-sizing: border-box;
}

.cntValores {
    color: var(--blanco);
    padding: 40px;
    display: flex;
    flex-wrap: wrap;
}

    .cntValores label {
        font-size: 12em;
        font-weight: bold;
        margin-right: 30px;
        color: var(--azulValores);
    }

    .cntValores div {
        display: flex;
        justify-content: center;
        width: 33%;
        padding: 10px;
        box-sizing: border-box;
    }

        .cntValores div div {
            display: flex;
            flex-direction: column;
            width: 50%;
            box-sizing: border-box;
        }

            .cntValores div div h2 {
                color: var(--azulValores);
            }

            .cntValores div div p {
                margin: 20px 0px;
            }

/* CONTACTO --------------------------------------------------------------------------------------------------------*/

.cntDatosEnvio {
    display: flex;
    flex-direction: column;
    width: 50%;
    color: var(--blanco);
    box-sizing: border-box;
}

    .cntDatosEnvio div {
        display: flex;
        width: 100%;
        margin: 20px 0px;
        box-sizing: border-box;
    }

        .cntDatosEnvio div div {
            margin: 0px;
            padding: 10px;
            flex-direction: column;
        }

.txt {
    padding: 7px 10px;
    border: none;
    border-bottom: 1px var(--blanco) solid;
    background-color: transparent;
    color: var(--blanco);
}

.btnEnvio {
    width: auto;
    border: 1px var(--blanco) solid;
    color: var(--blanco);
    padding: 10px 30px;
    border-radius: 20px;
    font-weight: bold;
}

.cntImagenEnvio {
    width: 50%;
    box-sizing: border-box;
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px;
    color: var(--blanco);
    box-sizing: border-box;
}

footer {
    width: 95%;
    display: flex;
    justify-self: center;
    align-items: center;
    flex-direction: column;
    padding: 40px 20px;
    border-top: 1px var(--blanco) solid;
    color: var(--blanco);
    box-sizing: border-box;
}

    footer img {
        width: 100px;
        margin-bottom: 20px;
    }

/* BOLSA -----------------------------------------------------------------------------------------*/

.btnCargaCV {
    width: auto;
    border: 1px var(--blanco) solid;
    color: var(--bodyColor);
    padding: 10px 30px;
    border-radius: 5px;
    font-weight: bold;
    background-color: var(--blanco);
}

.cntSliderVacantes {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.cntTarjetaVacante {
    background-color: gray;
    width: 300px;
    height: 310px;
    margin: 0px 10px;
    border-radius: 20px;
}

.cntCabeceraVacante {
    display: flex;
    width: 100%;
    padding: 20px 0px 20px 10px;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

    .cntCabeceraVacante img {
        width: 100px;
    }

    .cntCabeceraVacante label {
        background-color: var(--grisObscuro);
        text-align: right;
        padding: 5px 20px;
        border-top-left-radius: 100px;
        border-bottom-left-radius: 100px;
        color: var(--blanco);
    }

.cntInfoCuerpoVacante {
    padding: 40px 0px 30px 40px;
    display: flex;
    flex-direction: column;
    align-items: end;
}

    .cntInfoCuerpoVacante h4 {
        background-color: var(--azulClaroVacante);
        text-align: right;
        padding: 10px 20px;
        border-top-left-radius: 100px;
        border-bottom-left-radius: 100px;
        color: var(--blanco);
    }

    .cntInfoCuerpoVacante h2 {
        background-color: var(--azulOscuroVacante);
        text-align: right;
        padding: 15px 20px;
        border-top-left-radius: 100px;
        border-bottom-left-radius: 100px;
        color: var(--blanco);
    }

.cntDetalleVacante {
    display: none;
    background-color: var(--blanco);
    position: fixed;
    width: 90%;
    height: 90vh;
    top: 20px;
    padding: 40px;
    border-radius: 20px;
    z-index: 3;
    color: gray;
    overflow: auto;
    box-sizing: border-box;
}

    .cntDetalleVacante .txt {
        border-bottom: 2px var(--bodyColor) solid;
    }

    .cntDetalleVacante .btnCargaCV {
        background-color: var(--azulBtnCargarCv);
    }

    .cntDetalleVacante .btnEnvio {
        background-color: var(--grisObscuro);
        color: var(--blanco);
    }

.btnCerrarDetalleVacante {
    position: absolute;
    right: 40px;
    font-weight: bold;
    font-size: 1.2em;
}

.cntTituloDetalleVacante {
    text-align: center;
    margin-bottom: 40px;
}

    .cntTituloDetalleVacante h2 {
        color: var(--bodyColor);
    }

.cntDescripcionDetalleVacante {
    margin: 20px 0px;
}

    .cntDescripcionDetalleVacante label {
        color: var(--bodyColor);
        margin-bottom: 10px;
        font-weight: bold;
    }

.cntRequisitosDetalleVacante {
    display: flex;
    flex-direction: column;
    margin: 20px 0px;
}

    .cntRequisitosDetalleVacante label {
        color: var(--bodyColor);
        margin-bottom: 10px;
        font-weight: bold;
    }

    .cntRequisitosDetalleVacante li {
        margin-left: 30px;
    }

.cntOfrecemosDetalleVacante {
    display: flex;
    flex-direction: column;
    margin: 20px 0px;
}

    .cntOfrecemosDetalleVacante label {
        color: var(--bodyColor);
        margin-bottom: 10px;
        font-weight: bold;
    }

    .cntOfrecemosDetalleVacante li {
        margin-left: 30px;
    }

.cntBtnPostulacionVacante {
    text-align: center;
    margin: 40px 0px;
}

    .cntBtnPostulacionVacante a {
        padding: 10px 20px;
        font-weight: bold;
        color: var(--blanco);
        background-color: var(--grisObscuro);
        border-radius: 100px;
    }

.cntSomosVacante {
}

    .cntSomosVacante label {
        color: var(--bodyColor);
        margin-bottom: 10px;
        font-weight: bold;
    }

    .cntSomosVacante p {
        text-align: justify;
        margin: 20px 0px;
    }

/* AVISO PRIVACIDAD ----------------------------------------------------------------------------------------*/

.cntAvisoGeneral {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 100vh;
    overflow: auto;
    padding: 40px;
    background-color: var(--bodyColor);
    box-sizing: border-box;
}

.cntAviso {
    background-color: var(--blanco);
    padding: 40px;
    text-align: justify;
    border-radius: 20px;
    z-index: 3;
    box-sizing: border-box;
}

    .cntAviso span {
        display: block;
        margin: 5px 0px;
        box-sizing: border-box;
    }

    .cntAviso label {
        font-weight: bold;
    }

/* ADMINISTRACION VACANTES ----------------------------------------------------------------*/

.item_vacante {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 10px;
    width: 100%;
    transition: all .3s;
    box-sizing: border-box;
}

    .item_vacante:hover {
        background-color: #B1B1B1;
        color: VAR(--grisObscuro);
    }

.item_vacante_azul {
    background-color: var(--azulOscuroVacante);
    color: var(--blanco);
}

.item_vacante label {
    text-align: center;
    cursor: pointer;
}

.cnt_cabecera_detalles_vacante {
    display: flex;
    flex-direction: column;
    text-align: left;
    width: 100%;
    justify-self: center;
    background-color: var(--blanco);
    padding: 30px;
    box-shadow: 1px 3px 5px rgba(0, 0, 0, .26);
    border-radius: 10px;
    box-sizing: border-box;
}

#cnt_informacion_vacante {
    padding: 40px 20px;
    text-align: center;
}

.cnt_requisitos_prestanciones {
    display: flex;
    padding: 20px 0px;
    margin: 20px;
    width: 100%;
    justify-self: center;
    box-sizing: border-box;
}

    .cnt_requisitos_prestanciones div {
        width: 50%;
        text-align: left;
        margin-bottom: 20px;
        box-sizing: border-box;
    }

        .cnt_requisitos_prestanciones div div {
            display: flex;
            align-items: center;
        }

        .cnt_requisitos_prestanciones div h4 {
            margin-right: 20px;
        }

        .cnt_requisitos_prestanciones div a {
            margin: 0px 10px;
            background-color: rgba(0, 0, 0, .36);
            padding: 7px 10px;
            border-radius: 5px;
            color: var(--blanco);
        }

    .cnt_requisitos_prestanciones ul {
        width: 100%;
        text-align: left;
        box-sizing: border-box;
    }

        .cnt_requisitos_prestanciones ul li {
            list-style: none;
            margin: 15px 0px;
        }

            .cnt_requisitos_prestanciones ul li a {
                padding: 5px;
                background-color: red;
                color: var(--blanco);
            }

            .cnt_requisitos_prestanciones ul li label {
                padding: 7px 10px;
                border-bottom: 2px var(--azulClaroVacante) solid;
            }

.txt_admin {
    padding: 7px 10px;
}

#cnt_lista_vacantes_general {
    display: none;
}

#cnt_informacion_vacante {
    display: none;
}

/* LOGIN ADMINISTRACION ----------------------------------------------------------------*/

#cnt_login {
    background-color: var(--azulOscuroVacante);
    width: 90%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    gap: 10px;
    justify-self: center;
    margin-top: 50px;
    border-radius: 5px;
    color: var(--blanco);
    box-sizing: border-box;
}

    #cnt_login input {
        width: 80%;
        padding: 7px 10px;
        text-align: center;
        border-radius: 5px;
        border: 1px var(--grisObscuro) solid;
        box-sizing: border-box;
    }

    #cnt_login a {
        width: 80%;
        padding: 7px 10px;
        text-align: center;
        background-color: rgba(0, 0, 0, .36);
        color: var(--blanco);
        border-radius: 5px;
        box-sizing: border-box;
    }

.cnt_lista_vacantes_publicadas {
    width: 90%;
    justify-self: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .26);
    border-radius: 10px;
    box-sizing: border-box;
}

.cnt_cabecera_vacantes {
    display: flex;
    justify-content: space-between;
    justify-self: center;
    width: 90%;
    padding: 10px 20px;
    border: 2px var(--azulOscuroVacante) solid;
    color: var(--grisObscuro);
    margin: 50px 0px 20px 0px;
    box-sizing: border-box;
}

.cnt_cabecera_titulo_vacante {
    display: flex;
    gap: 10px;
    width: 80%;
    box-sizing: border-box;
}

    .cnt_cabecera_titulo_vacante div {
        display: flex;
        flex-direction: column;
    }

.cnt_titulo_vacante_admin {
    width: 30%;
    box-sizing: border-box;
}

.ddl_requisitos_prestaciones {
    width: 300px;
    box-sizing: border-box;
}

/* OTROS ----------------------------------------------------------------*/
.barraSeparacion {
    width: 90%;
    border: 2px rgba(255, 255, 255, .4) dashed;
    box-sizing: border-box;
}

.slider-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.slider {
    display: flex;
    overflow: hidden;
    width: 980px; /* 3 cards x 300px */
    margin: 0px 10px;
    box-sizing: border-box;
}

.btnSlider {
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
    color: var(--azulClaroVacante);
    background-color: var(--blanco);
}

#cnt_cargar_cv_bolsa {
    justify-content: space-between;
    align-items: start;
}

#cnt_cargar_cv_bolsa_2 {
    justify-content: space-between;
    align-items: start;
}

cnt_enviar_cv_bolsa {
    justify-content: space-between;
    align-items: end;
}


/* RESPONSIVO MOVIL -----------------------------------------------------------------------------------------------------*/

@media (max-width: 600px) {

    .cntInfoInicio h1 {
        font-size: 4em;
    }

    .cntSeccion {
        flex-direction: column;
        padding: 20px;
    }

    .cntImagenSomos {
        width: 100%;
    }

        .cntImagenSomos img {
            width: 100%;
        }

    .cntTextoSomos {
        width: 100%;
    }

        .cntTextoSomos h1 {
            margin-left: 0px;
            text-align: center;
        }

    .parrafoSomos {
        margin: 40px 0px;
        padding: 20px;
        text-align: center;
    }

    .cntPieSomos {
        padding-left: 0px;
    }

    .cntMisionImagen {
        width: 100%;
    }

    .cntMisionTexto {
        width: 100%;
    }

    .lblTituloSeccion {
        text-align: center;
    }

    #lbl_parrafo_nos_rige {
        text-align: center;
    }

    .cntValores {
        flex-direction: column;
        text-align: center;
    }

        .cntValores div {
            flex-direction: column;
            width: 100%;
        }

            .cntValores div div {
                width: 100%;
            }

        .cntValores label {
            margin-right: 0px;
        }

    #lbl_parrafo_contactanos {
        text-align: center;
    }

    .cntDatosEnvio div {
        flex-direction: column;
        width: 100%;
    }

    .btnEnvio {
        margin-top: 20px;
    }

    .cntDatosEnvio {
        text-align: center;
        width: 100%;
    }

    #lbl_parrafo_bolsa {
        text-align: center;
        margin: 20px 0px;
    }

    .slider {
        max-width: 285px;
    }

    .cntTarjetaVacante {
        width: 275px;
    }

    .cntCabeceraVacante img {
        width: 80px;
    }

    #lbl_parrafo_bolsa_2 {
        text-align: center;
        margin: 30px 0px 20px 0px;
    }

    #cnt_cargar_cv_bolsa {
        align-items: center;
    }

    #cnt_cargar_cv_bolsa_2 {
        align-items: center;
    }

    cnt_enviar_cv_bolsa {
        align-items: center;
    }

    .btnCerrarDetalleVacante {
        right: 10px;
        margin-top: -30px;
    }

    nav img {
        width: 90px;
        margin-left: -20px;
    }

    .cnt_btn_menu {
        display: flex;
        flex-direction: column; /* Botones uno debajo del otro */
        justify-content: end; /* Centrado vertical interno */
        text-align: center;
    }

        .cnt_btn_menu a {
            margin: 5px 0;
        }

    .cntPrimcipal {
        padding: 140px 40px;
    }
}