*{
    --color-blanco:#FBFBFB;
    --color-oscuro:#282828;
    --color-formulario-label:#9F9F9F;
    --botones:#2E76EF;
}
@font-face {
    font-family:'Playfair Display';
    src: url(/Tipografias/static/PlayfairDisplay-Italic.ttf) format("truetype");
    font-weight: 800;
}
.panel-video{
    width: 100%;
    max-height: 700px;
    aspect-ratio:16/9;
    overflow: hidden;
}
.contenedor__capa{
    
    width: 100%;
    height: 800px;
}
.panel__capa{
    width: 100%;
    max-height: 800px;    
    
}

video{
    width: 100%;
}

/*-----Seccion Puestos Disponibles-----*/

.contenedor__puestos-disponibles{
    width: 100%;
    background-color: var(--color-oscuro);
    display: flex;
    justify-content: center;
    margin-top: 26px;
}
.contenedor-puesto-total{
    max-width: 1500px;
    display: flex;
    justify-content: center;
    gap: 110px;
    padding: 29px 40px 47px 40px;
}
.contenedor__puestos-disponible-texto{
    max-width:663px;
    min-width:300px;
    height: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.puestos__disponibles-titulo{
    font-size: 39px;
    color: var(--color-blanco);
    margin: 0;
}
.barra-puestos{
    height: 6px;
    background-color: var(--color-blanco);
    width: 40%;
    margin-top: 10px;
}
.puestos__disponibles-texto{
    color: var(--color-blanco);
    text-align:justify;
    max-height: 300px;
}
.contenedor-eagle-class-puesto-disponible{
    max-width: 526px;
    min-width:450px;
    height: auto;
}
.img-eagle-class-puesto-disponible{
    object-fit:cover;
    width: 100%;
    height: auto;
}
/*-----Version Responsive Tablet Seccion Puestos Disponibles-----*/

@media screen and (max-width:1023px) {
    .contenedor-puesto-total{
        gap: 29px;
        padding: 29px 24px 47px 32px;
    }
    .puestos__disponibles-titulo{
    font-size: 35.5px;
    color: var(--color-blanco);
    margin: 0;
    }
    .contenedor-eagle-class-puesto-disponible{
    max-width: 400px;
    min-width:350px;
    height: auto;
    }
}
/*Version Responsive Celular Seccion Puestos dsiponibles-----*/
@media screen and (max-width:768px) {
    .contenedor-puesto-total{
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    }
    .contenedor-eagle-class-puesto-disponible{
    max-width: 663px;
    min-width:50px;
    height: auto;
    }
    .img-eagle-class-puesto-disponible{
    object-fit:cover;
    height: 284px;
    width: 100%;
    height: auto;
    }
}

/*-----Seccion Documentos Obligatorios y Formulario de Vacantes-----*/
.seccion__formulario{
    width:100%;
    height: 762px;
    margin-top: 25px;
    background-color: #EFEFEF;
    padding:44px 54px 33px 53px;
    display: flex;
    box-sizing: border-box;
    justify-content: center;
}
/*-----Documentos Obligatorios-----*/
.documentos__obligatorios{
    max-width: 341px;
    min-width: 50px;
    height: 283px;
    background-color: var(--color-oscuro);
    border-radius: 10px;
    padding: 11px 24px 30px 19px;
    box-sizing: border-box;

}
.contenedor__documentos-titulo{
    display: flex;
    flex-direction: column;
}

.documentos__titulo{
    font-size: 27px;
    color: var(--color-blanco);
    margin: 0;
}
.documentos__barra{
    height: 5px;
    width: 50%;
    margin-top: 10px;
    background-color: var(--color-blanco);
}
.lista__documento{
    color: var(--color-blanco);
    padding-left: 19px;
}

/*-----Formularios de Solicitud de Empleo-----*/
.Contenedor__formulario-total{
    width: 937px;
    height: 520px;
    background-color: var(--color-oscuro);
    margin-left: 55px;
    border-radius: 10px;
    padding: 24px 43px 47px 43px;
    border-radius: 10px;
    
}
.contenedor__titulo-formulario{
    max-width: 500px;
    min-width: 100px;
    margin-bottom: 20px;
}
.titulo__formulario{
    font-size: 39px;
    color: var(--color-blanco);
    margin: 0;
}
.formulario__barra{
    width: 45%;
    height: 9px;
    background-color: var(--color-blanco);
    margin-top: 10px;
}

.contenedor-total{
    width: 100%;
    box-sizing: border-box;
    
}
label{
    color: var(--color-formulario-label);
    font-size: 16px;
}
.input{
    width: 100%;
    padding: 5px 7px 8px 7px;
    box-sizing: border-box;
    margin-top: 7px;
    
}
/*-----Seccion formulario Grid-----*/
.contenedor__nombre{
    grid-area: nombre;
    margin-right: 15px;
}
.contenedor__edad{
    grid-area: edad;
}
.contenedor__telefono{
    grid-area: telefono;
}
.contenedor__genero{
    grid-area: genero;
}
.contenedor__solicitud{
    grid-area: solicitud;
}
.contenedor__domicilio{
    grid-area: domicilio;
}
.contenedor__puesto-solicitado{
    grid-area: puesto-solicitado;
}
.contenedor__nivel-educativo{
    grid-area: nivel-educativo;
}
button{
    grid-area: boton;
}
.input{
    font-family: 'Playfair Display';
}
select{
    font-family: 'Playfair Display';
}
.contenedor__formulario-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 17px;
    grid-template-areas: 
    "nombre edad"
    "telefono telefono"
    "genero solicitud"
    "domicilio domicilio"
    "puesto-solicitado nivel-educativo"
    "boton boton"
    ;
}
.boton__solicitud{
    width:100%;
    background-color: var(--botones);
    color: var(--color-blanco);
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 6px;
    text-align: center;
    margin-top: 20px;
    border: none;
}
/*-----Version Responsive Tablet Seccion Formulario-----*/

@media screen and (max-width:1023px) {
.Contenedor__formulario-total{
        margin-left: 28px;
}
label{
    font-size: 15px;
}
}

/*-----Version Responsive Celular-----*/
@media screen and (max-width:768px) {
.panel-video{
    width: 100%;
    height: 515px;
}
video{
    width: 100%;
    position: relative;
    z-index: -1;
    object-position: center;
    object-fit: cover;
    height: 515px;
}
.seccion__formulario{
    margin-top: 210px;
    align-items: center;
    gap: 28px;
}
.documentos__obligatorios{
    margin: 20px;
}
.Contenedor__formulario-total{
    width: 100%;
    margin: 0px;
    height: auto;
    box-sizing: border-box;
    border-radius: 0px;    
}
.seccion__formulario{
    flex-direction: column;
    padding:0px;
    
}

.contenedor__formulario-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 17px;
    grid-template-areas: 
    "nombre"
    "edad"
    "telefono"
    "genero"
    "solicitud"
    "domicilio"
    "puesto-solicitado"
    "nivel-educativo"
    "boton"
    ;
}
}