
.contenedor_superior{
    display: flex;
    justify-content: space-between;    
    width: calc(100% - (var(--padding) * 2)); 
    padding: var(--padding);     
    position: absolute;
    z-index: 10;
    background-color: white;
}
    .contenedor_superior_menu{
        display: flex;
        align-items: center;
    }
        .contenedor_superior_menu .contenedor_logo{
            width: 18em;
            height: 8em;
        }
        .contenedor_superior_menu .contenedor_logo_2{
            width: 8.2em;
            height: 8em;
            margin: 0 var(--margin);
        }
            .contenedor_logo img,
            .contenedor_logo_2 img{
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
            }

        .contenedor_menu{
            margin: 0 var(--margin);
            display: flex;            
        }
            .contenedor_menu a{
                text-decoration: none !important;
                display: flex;
                align-items: end;
                justify-content: center;
                position: relative;
            }
            .contenedor_menu a .imagen_icono{
                width: 5em;
                height: 5em;
                object-fit: contain;
                margin-top: 0.5em;
                padding: 0.5em;
                border: 8px solid var(--color-verde);
                border-radius: 100%;
            }
            .contenedor_menu a .opcion_menu{
                color: white;
                font-weight: 600;
                padding: .25em .5em;
                border-radius: .7em;
                margin-left: -3em;
                margin-bottom: .7em;
            }
            
            .contenedor_menu a:nth-child(1) .opcion_menu{
                background-color: var(--color-morado);
            }
            .contenedor_menu a:nth-child(2) .opcion_menu{
                background-color: var(--color-naranjo);
            }
            .contenedor_menu a:nth-child(3) .opcion_menu{
                background-color: var(--color-celeste);
            }
            .contenedor_menu a:nth-child(4) .opcion_menu{
                background-color: var(--color-rosado);
            }
        .contenedor_imagen{
            position: relative;
            width: 12em;
            height: 8em;
        }
            .contenedor_imagen .imagen_fondo:nth-child(1){
                position: absolute;
                max-width: 12em;
                max-height: 12em;
                transform: rotate(180deg);
                right: 0;
                top: 0;
                margin-right: calc(calc(var(--padding) + 1em) * -1);
                margin-top: calc(calc(var(--padding) + 1em) * -1);
            }
            
            .contenedor_imagen .imagen_fondo:nth-child(2){
                position: absolute;
                margin-left: calc(calc(var(--padding) + 1em) * -1);
                margin-bottom: calc(calc(var(--padding) * 2.5) * -1);
                bottom: 0;
                left: 0;
                max-width: 14em;
                max-height: 14em;
                object-fit: cover;
            }

    .contenedor_menu_total{
        display: flex;
        align-items: center;
        width: 100%;
        position: relative;
    }
        .btn_menu{
            width: 100%;
            justify-content: center;
            align-items: center;
            border-radius: .5em;
        }
        .btn_menu i{
            color: var(--color-azul);
            display: none;
        }
        .contenedor_menu_total .contenedor_total{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            margin-top: 0;
        }

    .contenedor_superior_red_social{
        display: flex;
        align-items: center;
    }
        .red_social{
            color: var(--color-azul);
            margin-left: var(--margin);
        }

        .contenedor_superior .contenedor_menu a{
            margin-bottom: .5em !important;
            padding: .5em;
            border-radius: .7em;
            position: relative;
        }
        
        .contenedor_superior .contenedor_menu a:hover:after{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: var(--color-azul);
            opacity: .1;
            top: 0;
            left: 0;
            border-radius: .7em;
        }
@media only screen and (max-width: 1450px) {
    .contenedor_superior_menu .contenedor_logo,
    .contenedor_imagen{
       display: none;
    }
    .contenedor_superior_menu .contenedor_logo_2{
        width: 5em;
        height: 5em;
        margin: 0 !important;
    }
    .contenedor_superior{
        position: fixed;
        justify-content: space-between !important;
        background-color: white;
        padding: 1em !important; 
        width: calc(100% - 2em) !important;
    }
    .contenedor_superior .btn_menu {
        display: flex;
        cursor: pointer;
        width: 2em;
    }
    .contenedor_superior .btn_menu i{
        display: flex;
        font-size: 1.2em;
    }
    .contenedor_superior .contenedor_menu_total .btn_menu:hover .contenedor_total{
        margin: 1em !important;
    }
    .contenedor_superior .contenedor_menu_total{
        width: fit-content;
    }
    .contenedor_superior .contenedor_total{
        position: fixed;
        top: 0;
        right: 0;
        width: calc(100% - 6.5em) !important;
        height: fit-content;
        max-height: calc(100vh - 8em) !important;
        max-width: 25em;
        background-color: white;
        flex-direction: column;
        align-items: flex-start;
        border-radius: 1em;
        padding: 2em;
        margin-top: -100vh !important;
        border: 4px solid var(--color-azul);
        overflow: hidden;
    }
        .contenedor_superior .contenedor_menu{
            display: flex;
            flex-direction: column;
            width: calc(100% - 4em);
            padding-right: 3em;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .contenedor_superior .contenedor_menu a{
            margin-bottom: .5em !important;
            padding: .5em;
            border-radius: .7em;
            position: relative;
        }
        .contenedor_superior .contenedor_menu a:hover:after{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: var(--color-azul);
            opacity: .1;
            top: 0;
            left: 0;
            border-radius: .7em;
        }

        .contenedor_superior .contenedor_superior_red_social{
            width: 100%;
            margin-top: 2em;
            display: flex;
            justify-content: center;
        }
        .contenedor_superior .contenedor_superior_red_social a:nth-child(1) .red_social{
            margin-left: 0 !important;
        }
        .contenedor_menu a .opcion_menu{
            min-width: 7em !important;
            text-align: center !important;
        }
    .contenedor_uno{
        padding-top: calc(var(--padding) * 2) !important;
    }
}
        