.side-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: #f2f2f3;
    width: var(--large-width);
    height: 100vh;
    z-index: 9999999998;
    --inner-padding: 70px;
    --large-width: 420px;
    --small-width: 320px;
}

.side-menu.open {
    display: block;
}

body:has(.side-menu.open) {
    overflow-y: hidden;
}

.side-menu .side-menu-main {
    z-index: 9999999999;
    position: relative;
}

.side-menu + .overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #0008;
    z-index: 999999999;
    cursor: pointer;
}

.side-menu.open + .overlay {
    display: block;
}

.side-menu .side-menu-main {
    z-index: 9999999999;
    position: relative;
    padding: 40px 0;
    height: 100%;
}

.side-menu .side-menu-main .side-menu-close,
.side-menu .side-menu-main .side-menu-logo {
    padding: 0 var(--inner-padding);
}

.side-menu .side-menu-main .side-menu-close .close-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    margin-left: auto;
    display: block;
}

.side-menu .side-menu-main .side-menu-close .close-btn img {
    transition: all 0.35s ease;
}

.side-menu .side-menu-main .side-menu-close .close-btn img:hover,
.side-menu .side-menu-main .side-menu-close .close-btn img:focus {
    filter: brightness(0);
}


.side-menu .side-menu-main .side-menu-logo {
    width: fit-content;
}

.side-menu .side-menu-main .side-menu-menu1 {
    margin-top: 40px;
}

.side-menu .side-menu-main .side-menu-menu1 ul.menu {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.side-menu .side-menu-main .side-menu-menu1 ul.menu li {
    display: block;
    width: 100%;
}

.side-menu .side-menu-main .side-menu-menu1 ul.menu li.bottom-text {
    padding: 35px var(--inner-padding);
    font-size: 14px;
    font-family: 'Rubik-Light';
    color: #707173;
}

.side-menu .side-menu-main .side-menu-menu1 ul.menu li.bottom-text strong {
    color: #1A181B;
    font-family: 'Rubik-Bold';
}

.side-menu .side-menu-main .side-menu-menu1 ul.menu li a {
    transition: all 0.35s ease;
    padding: 0 var(--inner-padding);
    display: block;
    position: relative;
}

.side-menu .side-menu-menu1 a + .open-submenu {
    display: none;
}

.side-menu .side-menu-main .side-menu-menu1 ul.menu li a:hover,
.side-menu .side-menu-main .side-menu-menu1 ul.menu li a:focus {
    background-color: #e4e5e6;
}

.side-menu .side-menu-main .side-menu-menu1 ul.menu li a span {
    font-family: 'Rubik-SemiBold';
    font-weight: 600;
    color: #58585A;
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid #e9d8c6;
}

.side-menu .side-menu-main .side-menu-menu1 ul.menu ul.submenu {
    background-color: #e4e5e6;
    position: fixed;
    top: 0;
    left: var(--large-width);
    width: var(--large-width);
    height: 100vh;
    padding-top: 180px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s ease;
}

.side-menu .side-menu-main .side-menu-menu1 ul.menu li a:hover ~ ul.submenu,
.side-menu .side-menu-main .side-menu-menu1 ul.menu li a:focus ~ ul.submenu,
.side-menu .side-menu-main .side-menu-menu1 ul.menu li ul.submenu:hover,
.side-menu .side-menu-main .side-menu-menu1 ul.menu li ul.submenu:focus,
.side-menu .side-menu-main .side-menu-menu1 ul.menu ul.submenu:has(*:hover),
.side-menu .side-menu-main .side-menu-menu1 ul.menu ul.submenu:has(*:focus) {
    opacity: 1;
    visibility: visible;
}

.side-menu .side-menu-main .side-menu-menu1 ul.submenu li a {
    padding: 0 var(--inner-padding);
    transition: all 0.35s ease;
    color: #58585A;
    font-family: 'Rubik-Light';
    font-size: 14px;
    line-height: 19px;
}

.side-menu .side-menu-main .side-menu-menu1 ul.submenu li a:hover,
.side-menu .side-menu-main .side-menu-menu1 ul.submenu li a:focus {
    background-color: #976d3b;
    color: #FFFFFF;
}

.side-menu .side-menu-main .side-menu-menu1 ul.submenu li a span {
    border-bottom: 1px solid #c5c6c8;
    padding: 24px 0;
    display: block;
    color: inherit;
}

.side-menu .side-menu-main .side-menu-menu1 ul.menu > li > a > span {
    height: 60px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.side-menu .side-menu-main .side-menu-menu1 ul.menu > li > a > span::before {
    content: '';
    width: 36px;
    height: 32px;
}

.side-menu .side-menu-main .side-menu-menu1 ul.menu > li.descubrir > a > span::before {
    background: url(../images/icons/descubrir.png) no-repeat;
}

.side-menu .side-menu-main .side-menu-menu1 ul.menu > li.visitar > a > span::before {
    background: url(../images/icons/visitar.png) no-repeat;
}

.side-menu .side-menu-main .side-menu-menu1 ul.menu > li.disfrutar > a > span::before {
    background: url(../images/icons/disfrutar.png) no-repeat;
}

.side-menu .side-menu-main .side-menu-menu1 ul.submenu li:first-child a span {
    border-top: 1px solid #c5c6c8;
}

.side-menu .side-menu-main .side-menu-menu1 ul.submenu li p {
    padding: 35px var(--inner-padding);
    color: #707173;
    font-family: 'Rubik-Light';
    font-size: 14px;
    line-height: 19px;
}

.side-menu .side-menu-main .side-menu-menu1 ul.submenu li p strong {
    color: #000;
    font-family: 'Rubik-Bold';
}

.side-menu .side-menu-main .side-menu-menu1 ul.menu ul.submenu ul.submenu {
    position: fixed;
    top: 0;
    left: calc(2 * var(--large-width));
    width: var(--small-width);
    height: 100vh;
    background-color: #976d3b;
    padding-top: 180px;
    transition: all 0.35s ease;
    opacity: 0;
    visibility: hidden;
}

.side-menu .side-menu-main .side-menu-menu1 ul.menu ul.submenu li a:hover ~ ul.submenu,
.side-menu .side-menu-main .side-menu-menu1 ul.menu ul.submenu li a:focus ~ ul.submenu,
.side-menu .side-menu-main .side-menu-menu1 ul.menu ul.submenu li ul.submenu:hover,
.side-menu .side-menu-main .side-menu-menu1 ul.menu ul.submenu li ul.submenu:focus,
.side-menu .side-menu-main .side-menu-menu1 ul.menu ul.submenu ul.submenu:has(*:hover),
.side-menu .side-menu-main .side-menu-menu1 ul.menu ul.submenu ul.submenu:has(*:focus){
    opacity: 1;
    visibility: visible;
}

.side-menu .side-menu-main .side-menu-menu1 ul.menu ul.submenu ul.submenu li a {
    color: #FFF;
}

.side-menu .side-menu-main .side-menu-menu1 ul.menu ul.submenu ul.submenu li a:hover,
.side-menu .side-menu-main .side-menu-menu1 ul.menu ul.submenu ul.submenu li a:focus {
    background-color: #FFF;
    color: #976d3b;
}

.side-menu .side-menu-main .side-menu-menu1 ul.menu ul.submenu ul.submenu li a span {
    border-top: 1px solid #d8bb9a;
    border-bottom: none;
}

.side-menu .side-menu-main .side-menu-menu2 {
    padding: 42px var(--inner-padding) 48px;
}

.side-menu .side-menu-main .side-menu-menu2 ul.menu {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.side-menu .side-menu-main .side-menu-menu2 ul.menu > li > a {
    color: #8C6526;
    font-size: 14px;
    line-height: 18px;
    font-family: 'Rubik';
}

.side-menu .side-menu-main .side-menu-menu2 ul.menu > li > a:focus {
    outline: 1px solid #8C6526;
}

.side-menu .side-menu-main .side-menu-menu2 ul.menu > li.contacto > a {
    display: flex;
    gap: 10px;
    align-items: center;
}

.side-menu .side-menu-main .side-menu-menu2 ul.menu > li.contacto > a::before {
    content: '';
    background: url(../images/icons/contacto.png) no-repeat;
    width: 17px;
    height: 13px;
    display: block;
}

.side-menu .side-menu-main .side-menu-social {
    padding: 14px 0;
    border-top: 1px solid #e9d8c6;
    margin: 0 var(--inner-padding);
}

.side-menu .side-menu-main .side-menu-social span {
    font-size: 12px;
    line-heighT: 16px;
    color: #656565;
}

.side-menu .side-menu-main .side-menu-social ul {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.side-menu .side-menu-main .side-menu-social ul li a {
    transition: all 0.35s ease;
    opacity: 0.3;
}

.side-menu .side-menu-main .side-menu-social ul li a:hover,
.side-menu .side-menu-main .side-menu-social ul li a:focus {
    opacity: 1;
}