:root{
	--color1: #00914d;/*#3C91E6 #ffcc00 #CC5533 #339933 #1F7A1F #FFA500 #6A3666 #f2f2f2*/
	--color2:#FFA500;
	--color3:#F07100;
	--colortxt:#5b5b5b;
	--colorsoft:#9d9d9d;
	--colorbtn:white;
	--colortitle:black;
	--titlebrand:#006837;
	--bgw: #ffffffc7;
	--bgwsolid: #ffffff;
    --bgdark: #dff0f7;
	/*generales
	--cw:white;*/
	--shadow:1px 1px 8px rgba(0, 0, 0,.15);
	--filtroc:brightness(0) saturate(100%) invert(73%) sepia(72%) saturate(7223%) hue-rotate(134deg) brightness(104%) contrast(92%);
	--filtrow:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(91deg) brightness(107%) contrast(95%);
	--filtrob:brightness(0) saturate(100%);
	--input:#ffffff;
	--btnbg: linear-gradient(to bottom, #3dc987, #00914d, #019d54);
	--bordersoft:#9b9b9b99;
}
:root.oscuro{
	--color1: #00e900;
	--colortxt:#c3c7c9;
	--colorsoft:#cbcbcb;
	--colorbtn:black;
	--colortitle:white;
	--titlebrand:white;
	--bgw: #09324b9e;
	--bgwsolid:#09324b;
    --bgdark: #114c71;
	--filtrow:brightness(0) saturate(100%);
	--filtrob:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(91deg) brightness(107%) contrast(95%);
	--filtroc: brightness(0) saturate(100%) invert(56%) sepia(85%) saturate(4976%) hue-rotate(97deg) brightness(125%) contrast(117%);
}
/*GENERAL*/

/*END GENERAL*/
body{
	background: var(--bgdark);
	font-family: sans-serif;
	position: relative;
}
/*.motivo{
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-image: url(../img/dreamland_icon.svg);
    background-size: 114vw;
    background-repeat: no-repeat;
    background-position-x: 38vw;
    background-position-y: top;
    filter: var(--filtrob);
    opacity: 0.08;
}*/
*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}
*::-webkit-scrollbar{
    background: transparent;
    width: 8px;
    height: 8px;
}*::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,.2);
    border-radius: 6px;
    opacity: 0.5;
    max-height: 100px;
}
/*body svg path {
    fill: #9800ff !important;
}*/
/*HEADER*/
header{
	display: flex;
    padding: 10px;
    position: relative;
    z-index: 2500;
    background: #4dc952;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    height: 56px;
}

/*header div{
	display: flex;
	height: 40px;
	justify-content: center;
	align-items: center;
	gap: 6px;
}*/
header .theme_mode button{
	height: 30px;
	width: 30px;
	min-width: 30px;
	border-radius: 15px;
	border: 1px solid var(--color1);
	background: var(--color1);
	padding: 6px;
}
header .theme_mode button img{
	width: 100%;
	height: 100%;
	filter: var(--filtrow);
}
.social_header{
	display: flex;
	gap: 1vw;
}
.social_header a{
	padding: 8px;
	border-radius: 50%;
	transition: all 600ms ease-out;
}
.social_header a img{
	width: 20px;
	height: 20px;
	fill: var(--colorsoft) !important;
	transition: all 160ms ease-out;
	filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(91deg) brightness(107%) contrast(95%);
}
.social_header a:hover img{
	transform: scale(1.1);
}
.search_box{
	width: 100%;
	justify-content: end;
	position: relative;
	max-width: 300px;
	margin: 0 0 0 auto;
	display: flex;
	gap: 8px;
	background: white;
	height: 30px;
	padding: 0 10px;
	border-radius: 15px;
	align-items: center;
}
.search_box .search_icon{
	width: 22px;
	height: 22px;
}
.search_box .search_icon img{
	width: 100%;
	height: 100%;
	filter: brightness(0) saturate(100%);
	opacity: 0.4;
}
.search_box input{
	height: 100%;
	border:none;
	width: 100%;
	background: transparent;
	outline: none;
	color: var(--colortxt);
}
.search_box .sugerencias{
	position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 0 8px;
    height: fit-content;
    display: none;
    flex-direction: column;
    gap: 10px;
    background: var(--bgdark);
    border-radius: 0 0 10px 10px;
}
.search_box .sugerencias.mostrar{
	display: flex;
}
.search_box .sugerencias a:nth-child(1){
	margin-top: 10px;
}
.search_box .sugerencias a:last-child{
	margin-bottom: 10px;
}
.search_box .sugerencias a{
	display: flex;
	gap: 8px;
	padding: 8px;
	text-decoration: none;
	color: var(--colortxt);
}
.search_box .sugerencias a:hover{
	background: var(--bgw);
	color: var(--colortitle);
}
.search_box .sugerencias a img{
	filter: var(--filtrob);
	opacity: 60%;
	width: 24px;
	height: 24px;
}
/*MENU*/
.menu{
	width: 100%;
    height: 54px;
    background: var(--bgw);
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    display: flex;
    position: sticky;
    top: 0;
    z-index: 2000;
}
.menu div[class*="m_sec"]:nth-child(1){
	display: flex;
}
.marca_box{
	width: auto;
	height: 50px;
	display: block;
	border-radius: 50%;
}
.marca_box svg{
	height: 100%;
	width: auto;
}
.marca_box svg #path44{
	fill: var(--titlebrand) !important;
}
.marca_box img{
	width: 100%;
	height: 100%;
}
.logo{
	display: flex;
	flex-direction: column;
}
.logo b{
	color: var(--colortitle);
	font-family: "Quicksand", sans-serif;
}
.logo span{
	color: var(--colorsoft);
}
/*caja 1*/
.menu div[class*="m_sec"]:nth-child(1){
	display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bgwsolid);
    padding: 0 0 0 2vw;
}
.menu div[class*="m_sec"]:nth-child(1) div:nth-child(2) h1{
	font-size: 16px;
}
.menu div[class*="m_sec"]:nth-child(1) div:nth-child(2) span{
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 5.35px;
}
/*caja 3*/
.menu div[class*="m_sec"]:nth-child(2){
	display: flex;
    gap: 2vw;
    background: var(--bgwsolid);
    flex-grow: 1;
    justify-content: end;
    align-items: center;
    margin: 0 0 0 auto;
    padding: 0 2vw 0 0;
    flex-direction: row-reverse;
}
.noti_btn{
	position: relative;
	margin-right: 2px;
}
.noti_btn img{
	filter: var(--filtrob);
	opacity: 0.5;
	transition: all 400ms ease;
}
.noti_btn .n_notice{
	position: absolute;
	width: 23px;height: 23px;
	background: red;
	color: white;
	border-radius: 50%;
	top: -2px;
	right: -8px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2px solid var(--bgw);
	font-size: 14px;
	animation-name: showNumber;
	line-height: 1px;
	animation-duration: 1000ms;
	z-index: 10;
}
@keyframes showNumber{
	from{
		color: transparent;
		transform: scale(0.5);
	}50%{
		transform: scale(1.2);
	}100%{
		color: white;
		transform: scale(1.0);
	}
}
.menu_preferences{
	display: flex;
	gap: 1.5vw;
}
.lang_box{
	display: flex;
    position: relative;
    height: 34px;
    border-radius: 6px;
    background: var(--bgdark);
    align-items: center;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 5px;
    transition: all 300ms ease-out;
}
.lang_box:hover{
	background: var(--bgdark);
}
.lang_box .selected_lang{
	height: 24px;
	border-radius: 4px;
}
.lang_box .list, .money_box .list{
	position: absolute;
	right: 0;
	top: 100%;
	width: fit-content;
	background: var(--bgw);
	display: flex;
	flex-direction: column;
	padding: 8px;
	gap: 8px;
	border-radius: 6px;
	opacity: 0;
	transition: all 350ms ease;
	pointer-events: none;
	filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0.0));
}
.lang_box.mostrar .list, .money_box.mostrar .list{
	display: flex;
	opacity: 1;
	pointer-events: auto;
	filter: drop-shadow(2px 3px 7px rgba(0, 0, 0, 0.3));
	top: calc(100% + 16px);
}
.lang_box .list:after, .money_box .list:after{
	content: '';
    width: 26px;
    height: 16px;
    background: var(--bgw);
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    position: absolute;
    top: -15px;
    right: 11px;
}
.list_opt{
	cursor: pointer;
	font-size: 14px;
	display: flex;
	gap: 10px;
	padding: 6px;
	align-items: center;
	white-space: nowrap;
	color: var(--colorsoft);
}
.list_opt:hover{
	background: var(--bgdark);
}
.list_opt b{
	color: var(--colortitle);
	font-weight: normal;
}
.list_opt img{
	height: 24px;
}
.money_box{
	display: flex;
    position: relative;
    height: 34px;
    border-radius: 6px;
    background: var(--bgdark);
    align-items: center;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 5px;
    transition: all 300ms ease-out;
}
.money_box:hover{
	background: var(--bgdark);
}
.show_money_list{
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--colorsoft);
}
.show_money_list span{
	font-weight: 500;
	font-family: "Manrope", sans-serif;
	width: 33px;
}
.show_money_list img{
	width: 12px;
	height: 12px;
	filter: var(--filtrob);
	opacity: 0.4;
}
/*ventana reservas*/
.noti_box{
	position: absolute;
	right: 10px;
	top: 100%;
	background: var(--bgw);
	padding: 10px;
	z-index: -10;
	transition: all 350ms ease;
	filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0.0));
	max-height: calc(100vh - 200px);
	border-radius: 6px;
	opacity: 0;
	pointer-events: none;
	max-height: 100vh;
	backdrop-filter: blur(10px);
}
.noti_box.desplegado{
	filter: drop-shadow(2px 3px 7px rgba(0, 0, 0, 0.3));
	opacity: 1;
	pointer-events: auto;
	top: calc(100% + 16px);
}
.noti_box:after{
	content: '';
	width: 26px;height: 16px;
	background: var(--bgw);
	clip-path: polygon(100% 0, 0% 100%, 100% 100%);
	position: absolute;
	top: -15px;
	right: 18px;
}
.noti_scroll{
	display: flex;
	flex-direction: column-reverse;
	overflow-y: overlay;
	gap: 10px;
	height: 100%;
}
.noti_box a{
	display: flex;
	gap: 10px;
	padding: 0 10px;
	text-decoration: none;
	padding: 5px;
	border-radius: 5px;
}
.noti_box a:hover{
	background: var(--bgdark);
}
.noti_box a img{
	width: 30px;
	height: 30px;
	filter: var(--filtrob);
	opacity: 60%;
}
.reserva_info{
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.reserva_info b{
	color: var(--color1);
	font-size: 16px;
}
.noti_box a:hover span{
	color: var(--colortitle);
}
.reserva_info span{
	color:var(--colortxt);
	white-space: nowrap;
	font-size: 14px;
}
/*GENERAL*/
.req:after{
	content: '*';
	color: red;
	margin-left: 4px;
	font-size: 20px;
	line-height: 0;
	vertical-align: middle;
}