:root {
    --metaverse-white: #FFFEFF;
    --metaverse-green: #00A443;
    --metaverse-green-light: #DCEBE1;
    --metaverse-orange: #FF9C1A;
    --metaverse-forest: #00402A;
    --metaverse-border: #D8CFC7;
    --metaverse-sand: #FFF5EC;
    --metaverse-brown: #615D5A;
}

#metaverse {
    width: 100%;
    max-width: 980px;
    padding: 23px 16px;
    margin: 20px auto;
    text-align: left;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    border: 1px solid var(--metaverse-border);
    background-color: var(--metaverse-white);
}

#metaverse * {
    font-family: 'IberPangea' !important;
    font-style: normal;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#metaverse h2 {
    margin-top: 0 !important;
}

#metaverse ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#metaverse ul li:before {
    content: none !important;
    display: none !important;
}

#metaverse img {
    display: block;
    width: 100%;
}

#metaverse .metaverse_title {
    color: var(--metaverse-green) !important;
    font-size: 32px;
    line-height: 1.125;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    text-wrap: balance;
    margin-bottom: 34px;
}

#metaverse .metaverse_title strong {
    font-weight: 600;
}


#metaverse .metaverse_menu {
    position: relative;
    margin-bottom: 36px;
    z-index: 9;
}

#metaverse .metaverse_menu_selected {
    display: flex;
    min-height: 50px;
    align-items: center;
    border-radius: 50px;
    border: 1px solid var(--metaverse-green);
    background: var(--metaverse-white);
    padding: 11px 71px 11px 20px;
    color: var(--metaverse-forest) !important;
    font-size: 16px;
    line-height: 1.62;
    font-style: normal;
    font-weight: 500;
    text-align: left;
    position: relative;
    cursor: pointer;
    z-index: 2;
    transition: all 0.5s;
}

#metaverse .metaverse_menu_selected:after {
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    background-color: var(--metaverse-green);
    position: absolute;
    top: 0;
    right: 49px;
}

#metaverse .metaverse_menu_selected:before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-top: 1.5px solid var(--metaverse-green);
    border-right: 1.5px solid var(--metaverse-green);
    transform: rotate(135deg);
    position: absolute;
    top: 17px;
    right: 22px;
    transition: all 0.5s;
}

#metaverse .metaverse_menu.active .metaverse_menu_selected {
    border-radius: 50px 50px 50px 0;
    border-color: var(--metaverse-white);
    background-color: var(--metaverse-green);
    color: var(--metaverse-white) !important;
}

#metaverse .metaverse_menu_selected.selected {
    border-radius: 50px;
    border-color: var(--metaverse-white);
    background-color: var(--metaverse-green);
    color: var(--metaverse-white) !important;
}

#metaverse .metaverse_menu.active .metaverse_menu_selected:after,
#metaverse .metaverse_menu_selected.selected:after {
    background-color: var(--metaverse-white);
}

#metaverse .metaverse_menu.active .metaverse_menu_selected:before {
    border-color: var(--metaverse-white);
    transform: rotate(-45deg);
    top: 21px;
}

#metaverse .metaverse_menu_selected.selected:before {
    border-color: var(--metaverse-white);
}

#metaverse .metaverse_menu_list {
    position: absolute;
    top: 100%;
    left: 1px;
    width: calc(100% - 51px);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}

#metaverse .metaverse_menu.active .metaverse_menu_list {
    max-height: 400px;
    overflow: auto;
    transition: max-height 0.5s ease-in-out;
    margin-top: -15px;
}

#metaverse .metaverse_menu_item {
    border-right: 1px solid var(--metaverse-green);
    border-bottom: 1px solid var(--metaverse-green);
    border-left: 1px solid var(--metaverse-green);
    background: var(--metaverse-white);
    display: block;
    padding: 11px 12px 10px;
    color: var(--metaverse-forest) !important;
    margin-bottom: 0 !important;
    font-size: 16px;
    line-height: 1.62;
    font-style: normal;
    font-weight: 500;
    text-align: center;
    transition: all 0.5s;
    cursor: pointer;
}

#metaverse .metaverse_menu_item:first-child {
    padding-top: 27px;
}

#metaverse .metaverse_menu_item:last-child {
    border-radius: 0 0 15px 15px;
}

#metaverse .metaverse_menu_item.active,
#metaverse .metaverse_menu_item:hover {
   background-color: var(--metaverse-green-light);
}

#metaverse .metaverse_content {
    border-radius: 15px;
    border: 0.5px solid var(--metaverse-forest);
    background: var(--metaverse-sand);
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 240px;
    height: 430px;
    margin: 0 auto;
}

#metaverse .metaverse_content:after,
#metaverse .metaverse_content:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-position: center top;
    background-size: contain;
    background-repeat: no-repeat;
    transition: all 0.5s;
    opacity: 1;
}

#metaverse .metaverse_content:after {
    background-image: url('/wcorp/gc/prod/es_ES/estaticos/metaverso/images/gafas.svg');
    z-index: 2;
    top: -100%;
}

#metaverse .metaverse_content:before {
    background-image: url('/wcorp/gc/prod/es_ES/estaticos/metaverso/images/fondo.svg');
    background-size: auto 100%;
    z-index: 0;
    top: 50%;
    left: 100%;
}

#metaverse.viewport .metaverse_content:after {
    top: 0;
}

#metaverse.viewport .metaverse_content:before {
    top: 0;
    left: 0;
}

#metaverse .metaverse_image {
    display: none;
    width: calc(100% - 28px);
    max-width: 210px;
    margin: 14px auto 23px;
}

#metaverse .metaverse_image-0 {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    transition: all 0.5s;
    opacity: 1;
}

#metaverse .metaverse_text {
    display: none;
    border-radius: 15px;
    background: var(--metaverse-white);
    padding: 10px 14px;
    color: var(--metaverse-brown);
    font-size: 16px;
    line-height: 1.25;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    width: calc(100% - 28px);
    margin: 0 14px 14px;
}

#metaverse.metaverse-active-1 .metaverse_image-1,
#metaverse.metaverse-active-2 .metaverse_image-2,
#metaverse.metaverse-active-3 .metaverse_image-3,
#metaverse.metaverse-active-4 .metaverse_image-4,
#metaverse.metaverse-active-5 .metaverse_image-5,
#metaverse.metaverse-active-6 .metaverse_image-6 {
    display: block;
}

#metaverse.metaverse-active-3 .metaverse_image-3 {
    margin-bottom: 10px;
}

#metaverse.metaverse-active-1 .metaverse_image-0,
#metaverse.metaverse-active-2 .metaverse_image-0,
#metaverse.metaverse-active-3 .metaverse_image-0,
#metaverse.metaverse-active-4 .metaverse_image-0,
#metaverse.metaverse-active-5 .metaverse_image-0,
#metaverse.metaverse-active-6 .metaverse_image-0,
#metaverse.metaverse-active-1 .metaverse_content:after,
#metaverse.metaverse-active-2 .metaverse_content:after,
#metaverse.metaverse-active-3 .metaverse_content:after,
#metaverse.metaverse-active-4 .metaverse_content:after,
#metaverse.metaverse-active-5 .metaverse_content:after,
#metaverse.metaverse-active-6 .metaverse_content:after,
#metaverse.metaverse-active-1 .metaverse_content:before,
#metaverse.metaverse-active-2 .metaverse_content:before,
#metaverse.metaverse-active-3 .metaverse_content:before,
#metaverse.metaverse-active-4 .metaverse_content:before,
#metaverse.metaverse-active-5 .metaverse_content:before,
#metaverse.metaverse-active-6 .metaverse_content:before {
    opacity: 0;
}

#metaverse.metaverse-active-1 .metaverse_text-1,
#metaverse.metaverse-active-2 .metaverse_text-2,
#metaverse.metaverse-active-3 .metaverse_text-3,
#metaverse.metaverse-active-4 .metaverse_text-4,
#metaverse.metaverse-active-5 .metaverse_text-5,
#metaverse.metaverse-active-6 .metaverse_text-6 {
    display: block;
}

@media (min-width: 700px) {

    #metaverse {
        padding: 30px 30px;
    }

    #metaverse .metaverse_title {
        margin-bottom: 40px;
    }

    #metaverse .metaverse_menu {
        margin-bottom: 0;
    }

    #metaverse .metaverse_menu_selected {
        display: none;
    }

    #metaverse .metaverse_menu_list {
        max-height: 1000px;
        overflow: visible;
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
    }

    #metaverse .metaverse_menu_item {
        width: 115px;
        border-radius: 72px;
        border: 1px solid var(--metaverse-green);
        background: var(--metaverse-white);
        padding: 12px 20px;
    }

    #metaverse .metaverse_menu_item:first-child,
    #metaverse .metaverse_menu_item:last-child {
        border-radius: 72px;
        padding: 12px 20px;
    }

    #metaverse .metaverse_menu_item {
        position: absolute;
    }

    #metaverse .metaverse_menu_item:nth-of-type(odd) {
        right: calc(50% + 135px);
        left: auto;
    }

    #metaverse .metaverse_menu_item:nth-of-type(even) {
        left: calc(50% + 135px);
        right: auto;
    }

    #metaverse .metaverse_menu_item[data-selected="1"],
    #metaverse .metaverse_menu_item[data-selected="2"] {
        top: 90px;
    }

    #metaverse .metaverse_menu_item[data-selected="3"],
    #metaverse .metaverse_menu_item[data-selected="4"] {
        top: 190px;
    }

    #metaverse .metaverse_menu_item[data-selected="5"],
    #metaverse .metaverse_menu_item[data-selected="6"] {
        top: 290px;
    }

    #metaverse.metaverse-active-1 .metaverse_menu_item[data-selected="1"],
    #metaverse.metaverse-active-2 .metaverse_menu_item[data-selected="2"],
    #metaverse.metaverse-active-3 .metaverse_menu_item[data-selected="3"],
    #metaverse.metaverse-active-4 .metaverse_menu_item[data-selected="4"],
    #metaverse.metaverse-active-5 .metaverse_menu_item[data-selected="5"],
    #metaverse.metaverse-active-6 .metaverse_menu_item[data-selected="6"]{
        background-color: var(--metaverse-green);
        color: var(--metaverse-white) !important;
    }

    #metaverse.metaverse-active-1 .metaverse_menu_item[data-selected="1"]:before,
    #metaverse.metaverse-active-2 .metaverse_menu_item[data-selected="2"]:before,
    #metaverse.metaverse-active-3 .metaverse_menu_item[data-selected="3"]:before,
    #metaverse.metaverse-active-4 .metaverse_menu_item[data-selected="4"]:before,
    #metaverse.metaverse-active-5 .metaverse_menu_item[data-selected="5"]:before,
    #metaverse.metaverse-active-6 .metaverse_menu_item[data-selected="6"]:before {
        content: '' !important;
        display: block !important;
        width: 15px;
        height: 1px;
        background-color: var(--metaverse-forest);
        position: absolute;
        top: 50%;
        margin: 0 !important;
    }

    #metaverse.metaverse-active-1 .metaverse_menu_item[data-selected="1"]:before,
    #metaverse.metaverse-active-3 .metaverse_menu_item[data-selected="3"]:before,
    #metaverse.metaverse-active-5 .metaverse_menu_item[data-selected="5"]:before {
        left: 100%;
    }

    #metaverse.metaverse-active-2 .metaverse_menu_item[data-selected="2"]:before,
    #metaverse.metaverse-active-4 .metaverse_menu_item[data-selected="4"]:before,
    #metaverse.metaverse-active-6 .metaverse_menu_item[data-selected="6"]:before {
        right: 100%;
    }

    #metaverse.metaverse-active-1 .metaverse_menu_item[data-selected="1"]:after,
    #metaverse.metaverse-active-2 .metaverse_menu_item[data-selected="2"]:after,
    #metaverse.metaverse-active-3 .metaverse_menu_item[data-selected="3"]:after,
    #metaverse.metaverse-active-4 .metaverse_menu_item[data-selected="4"]:after,
    #metaverse.metaverse-active-5 .metaverse_menu_item[data-selected="5"]:after,
    #metaverse.metaverse-active-6 .metaverse_menu_item[data-selected="6"]:after {
        content: '' !important;
        display: block !important;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: var(--metaverse-forest);
        position: absolute;
        top: calc(50% - 2px);
    }

    #metaverse.metaverse-active-1 .metaverse_menu_item[data-selected="1"]:after,
    #metaverse.metaverse-active-3 .metaverse_menu_item[data-selected="3"]:after,
    #metaverse.metaverse-active-5 .metaverse_menu_item[data-selected="5"]:after {
        right: -18px;
    }

    #metaverse.metaverse-active-2 .metaverse_menu_item[data-selected="2"]:after,
    #metaverse.metaverse-active-4 .metaverse_menu_item[data-selected="4"]:after,
    #metaverse.metaverse-active-6 .metaverse_menu_item[data-selected="6"]:after {
        left: -18px;
    }

}