#layout-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 1em;
}

#layout-wrapper::after,
#layout-wrapper::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 29em;
    background: var(--color-rojo);
    z-index: 1;
}
#layout-wrapper::before{
    height: -webkit-fill-available;
    background: var(--color-rojo);
}

    .contenedor_header{ 
        width: 100%;
        display: flex;
        justify-content: center;
        border-bottom: 5px solid var(--color-morado);
        padding-bottom: 1em;
    }
        .contenedor_header img {
          width: 10em;
          height: fit-content;
          margin: 0 1em;
        }

        .contenedor_header a:nth-child(1) img{
            border: 5px solid white;
            border-radius: 1em;
        }
  
    .contenedor_imagen {
        position: relative;
        display: flex;
        justify-content: center;
        width: 100%;
        height: 25em;
        overflow: hidden;
        border-bottom-left-radius: 1em;
        border-bottom-right-radius: 1em;
        box-shadow: 0 0 0.5em 1px rgba(0, 0, 0, .3);
    }
        .contenedor_imagen img:nth-child(1) {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .contenedor_imagen img:nth-child(2) {
            width: 14em;
            height: fit-content;
            margin-top: 5em;
            object-fit: contain;
            position: absolute;
            z-index: 3;
            border: 5px solid white;
            border-radius: 1em;
        }
           
    .contenedor_informacion {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding: 1em 0;
    }
        .contenedor_informacion img {
            width: 14em;
            height: fit-content;
            object-fit: contain;
        }
            .contenedor_informacion .contenedor_texto {
                display: flex;
                flex-direction: column;
                margin: .5em;
            }
            .contenedor_informacion .contenedor_texto label:nth-child(1){
                font-weight: 700;
                font-size: 1.5em;
                color: black;
            }
            .contenedor_informacion .contenedor_texto label:nth-child(1){
                font-weight: 700;
                color: black;
                text-align: end;
            }

    .contenedor_total_trabajo {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
        .contenedor_trabajo{
            width: 100%;
            max-width: 45em;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
            .trabajo {
                display: flex;
                flex-direction: column;
                width: 100%;
                max-width: 11em;
                margin: .5em;
                padding: 1em;
                border: 5px solid black;
                position: relative;
                border-top-left-radius: 0.5em;
                border-bottom-left-radius: 0.5em;
                border-bottom-right-radius: 0.5em;
                box-shadow: -0.2em 0.2em 0.5em 1px rgba(0, 0, 0, .3);
            }
            .trabajo:hover:before {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                background-color: rgba(0, 0, 0, .2);
            }
            .trabajo::after{
                content: '';
                position: absolute;
                top: 0;
                margin-top: -0.9em;
                margin-right: -1em;
                right: 0;
                width: 2em;
                height: 1.5em;
                background-color: var(--color-rojo);
                transform: rotate(45deg);
                z-index: 3;
                border-bottom: 5px solid black;
            }
                .trabajo_seleccionado .contenedor_seleccion{
                    display: flex !important;
                }
                .contenedor_seleccion{
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    display: none;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    margin: -1em;
                }
                .contenedor_seleccion:after{
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0, 0, 0, .5);
                    opacity: .7;
                }
                    .contenedor_seleccion img{
                        z-index: 2;
                        margin: 0 !important;
                    }
                    .contenedor_seleccion label{
                        text-align: center;
                        z-index: 2;
                        color: white !important;
                        width: calc(100% - 2em) !important;
                    }
                    .contenedor_seleccion label:nth-child(2){
                        font-size: 1.3em !important;
                    }
                .trabajo label{
                    color: black;
                }
                
                .trabajo .titulo {
                    font-weight: 700;
                    font-size: 1.5em;
                }

                .trabajo label:nth-child(4){
                    width: 80%;
                }

                .trabajo img{
                    width: 5em;
                    height: 5em;
                    object-fit: contain;
                    margin-right: 0;
                    margin-left: auto;
                }
        .contenedor_paginacion{
            display: flex;
        }
            .contenedor_paginacion .paginacion, 
            .contenedor_paginacion .paginacion_siguiente,
            .contenedor_paginacion .paginacion_atras{
                width: 1.2em;
                height: 1.2em;
                color: white;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 1.5em;
            }
            .contenedor_paginacion .paginacion_seleccionado{
                width: 1.2em;
                height: 1.2em;
                color: var(--color-amarillo);
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 1.5em;
            }
    /* <!-- contenedor prefooter --> */
    .contenedor_footer {
        width: 100%;
        position: relative;
        max-width: 45em !important;
        z-index: 2;
        display: flex;
        justify-content: end;
        padding: .5em 0 0 0 ;
    }
        .boton {
            font-weight: 700;
            padding: .75em 1.5em;
            color: var(--color-rojo);
            background-color: black;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 5px solid black;
            width: 100%;
            max-width: 10em;
            margin: 0 1em;
            border-radius: 0.5em;
            cursor: pointer;
            box-shadow: 0 0 0.5em 1px rgba(0, 0, 0, .3);
        }
        .boton:hover {
            background: rgba(30, 30, 30);
        }
        .boton_continuar{
            background-color: white !important;
            color: var(--color-verde) !important;
        }
    
        .boton_continuar:hover{
            background-color: var(--color-verde) !important;
            color: white !important;
        }
    

    #modal_datos .modal-content{
         border: 5px solid black;
        border-radius: 0.7em;
    }
    
    #modal_datos .modal-content .contenedor_img {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    #modal_datos .modal-content img {
        width: 5em;
        height: 5em;
        object-fit: cover;
    }
    #modal_datos .contenedor {
        display: flex;
        flex-direction: column;
    }

    #modal_datos .contenedor label{
        font-size: .8em;
        margin: 0.5em;
    }
    #modal_datos .contenedor input,
    #modal_datos .contenedor textarea {
        border: 5px solid black;
        border-radius: 0.5em;
        padding: 0.5em;
        margin-bottom: 2em;
        text-transform: uppercase;
    }
    #modal_datos .contenedor textarea {
        resize: vertical;
        min-height: 5em;
    }
    #modal_datos .modal-title {
        font-size: 1em;
        margin-top: 0;
    }
    #modal_datos .boton_cerrar_modal{
        font-weight: 700;
        padding: .75em 1.5em;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 5px solid black;
        width: 100%;
        max-width: fit-content;
        margin: 0 1em;
        background-color: white !important;
        color: var(--color-verde) !important;
        border-radius: 0.5em;
        cursor: pointer;
        box-shadow: 0 0 0.5em 1px rgba(0, 0, 0, .3);
    }

    #btn_continuar_proceso{
        font-weight: 700;
        padding: .75em 1.5em;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 5px solid black;
        width: 100%;
        max-width: 12em;
        margin: 0 1em;
        background-color: white !important;
        color: var(--color-verde) !important;
        border-radius: 0.5em;
        cursor: pointer;
        box-shadow: 0 0 0.5em 1px rgba(0, 0, 0, .3);
    }

    #btn_continuar_proceso:hover,
    #modal_datos .boton_cerrar_modal:hover{
        background-color: var(--color-verde) !important;
        color: white !important;
    }


@media only screen and (max-width: 627px) {
    .contenedor_informacion  {
        justify-content: start;
    }
}