/*------------------------------------
Definición de las fuentes personalizadas
------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Prata&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap');
/*------------------------------------
Normalización de estilos
-------------------------------------*/
html, body{
	margin: 0;
	padding: 0;
}

html{
	background-image: url(https://xinalaniretreat.com/wp-content/uploads/2024/12/xinalani-menu-hojas.png), url(https://xinalaniretreat.com/wp-content/uploads/2024/11/textura-papel-mixto.jpg);
	background-size: 100%,512px;
}
/*-----------------------------------
Asignando las fuentes al nivel de titulos al que correspondedn
-----------------------------------*/
body{
	font-family: "Karla", sans-serif;
	color: #5c5850;
}
h1,h2,section header p{
	font-family: "Karla", sans-serif;
	color: #5c5850;
}
section header p{
	font-family: "Karla", sans-serif;
	font-size: 22px;
    margin: 5px 0 10px 0;
}
h3{
	font-family: "Karla", serif;
	color: #878B61;
}
p.subtitle{
	color: #878B61;
	margin-top: 5px;
}
#menu-header p{
	font-family: "Karla", sans-serif;
	color: #878B61;
}
/*----------------------------------
Estilos generales para el menú
----------------------------------*/
#container{
	max-width: 1280px;
	margin: 20px auto;
	padding: 25px 50px;
	padding-bottom: 90px;
	position: relative;
}
/*--- Menu Header ---*/
#menu-header{
	width: 100%;
	text-align: center;
	/*border-bottom: 3px solid #878B61;*/
}
#menu-header p, #menu-header h1{
	display: inline-block;
	vertical-align: middle;
}
#menu-header img{
	max-width: 180px;
	display: block;
	margin: 0 auto;
}
#menu-header h1{
	font-size: 60px;
	margin: 20px;
	font-family: 'Prata';
	font-weight: initial;
	margin-top: 0;
	margin-bottom: 35px;
}
#menu-header p{
	font-size: 20px;
}
/*--- Menu Categories ---*/
#menu-categories{
	text-align: center;
}
#menu-categories ul li,
#idioma a{
	display: inline-block;
	list-style: none;
	padding: 8px 10px;
	margin: 5px;
	border: 1px solid #878B61;
	transition: all .3s;
	color: #878B61;
	font-size: 15px;
}
#idioma{
	position: absolute;
	right: 20px;
	top: 20px;
}
#idioma a{
	text-decoration: none;
}
#menu-categories li.active{
	background: #878B61;
	color: #fff;
}
#menu-categories li:hover,
#idioma a:hover{
	cursor: pointer;
	background: #878B61;
	color: #fff;
	transition: all .3s;
}
body ul{
	padding: 0;
}
body ul li{
	list-style: none;
}
/*--- Secciones de bebidas ---*/
#menu-body-layout{
	text-align: center;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	margin-top: 70px;
}
#menu-body-layout section{
	padding: 35px;
	display: inline-block;
	text-align: center;
	vertical-align: top;
}
#menu-body-layout #various-elements section{
	padding: 0;
}
#menu-body-layout section header::after{
	display: inline-block;
	width: 100%;
	height: 10px;
	content: " ";
	background-image: url(https://xinalaniretreat.com/wp-content/themes/Xinalani/assets/img/icons/separator-waves.svg);
	background-repeat: no-repeat;
	background-position: center center;
}
#freshly-cut-coconut,#champagne{
	border: 1px solid #878B61;
}
.special-drink h3{
	margin-bottom: 0;
}
.special-drink p{#spii
	margin-top: 0;
	font-family: 'Karla', sans-serif;
}
section img{
	max-width: 200px;
	display: none;
}
#agave-creations,#signature-cocktails,#classic-cocktails,#white-wine{
	background: rgb(229 225 221 / 40%);
}
#spirits,#snacks{
	grid-column: span 3;
}
#spirits header,
#snacks header{
	width: 100%;
}
#spirits header p,
#snacks header p{
	float: right;
	margin-top: 60px;
	font-weight: 600;
}
#spirits header h2,
#spirits header p,
#snacks header h2,
#snacks header p{
	display: inline-block;
}
#spirits h3,
#snacks h3{
	margin-bottom: 0;
}
#spirits ul,
#snacks ul{
	margin-top: 5px;
}
#spirits h2,
#snacks h2{
	font-size: 40px;
	margin-bottom: 10px;
}
#spirits ul li,
#snacks ul li{
	padding: 3px;
	font-family: "Karla", sans-serif;
}
#spirits ul li:nth-child(even){
	background: #e5e1dd;
}
#spirits ul li span{
	float: right;
	margin-right: 15px;
	font-weight: 600;
}
section#spirits,
section#snacks{
	width: 100%;
	text-align: left;
}
section#spirits #spirits-container,
section#snacks #spirits-container{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 15px;
}
#backtoxin{
	width: 100%;
	background: #fff;
	position: fixed;
	bottom: 0;
	padding: 5px;
	text-align: center;
}
#backtoxin a{
	color: #5e6717;
}

#snacks-warning{
	margin-top: 35px;
	padding: 5px 20px;
	background: #5e6717;
	color: #fff;
}
/*----------------------------------
Estilos Responsive para el menú
----------------------------------*/
@media all and (max-width: 935px){
	#menu-body-layout{
		grid-template-columns: 1fr 1fr;
	}
	section#classic-cocktails{
		width: 100%;
		text-align: center;
	}
	#spirits, #snacks{
		text-align: left;
		grid-column: span 2;
	}
}

@media all and (max-width: 767px){
	#spirits, #snacks{
		grid-column: span 1;
	}
	#container{
		margin: 0;
		padding: 20px;
		margin-bottom: 60px;
	}
	#menu-header{
		margin-top: 30px;
		padding-bottom: 30px;
	}
	#menu-header h1, #menu-header p{
		display: block;
		margin: 0;
	}
	#menu-categories ul{
		margin-top: 0;
	}
	#menu-categories ul li{
		display: none;
		margin: 0;
		border-top: 0;
	}
	#menu-categories.open ul li{
		display: block !important;
	}
	#menu-categories ul li.active{
		display: block;
	}
	#menu-body-layout{
		grid-template-columns: 1fr;
	}
	#menu-body-layout section{
		box-sizing: border-box;
	}
	section#classic-cocktails,
	section#agave-creations,
	section#spirits,
	section#snacks{
		text-align: center;
	}
	#classic-cocktails header h2,
	#classic-cocktails header p,
	#spirits header h2,
	#spirits header p,
	#snacks header h2,
	#snacks header p,
	#agave-creations header h2{
		display: block;
		text-align: center;
		float: none !important;
	}
	#classic-cocktails header p,
	#spirits header p,
	#snacks header p{
		margin-top: 0;
	}

	#agave-creations{
		background-size: 180%;
		background-position: bottom;
	}
	section#classic-cocktails>div,
	section#agave-creations>div{
		display: block;
		width: 100%;
		margin-right: 0;
	}
	section#spirits #spirits-container,
	section#snacks #spirits-container{
		grid-template-columns: 1fr;
	}
	#spirits ul li,
	#snacks ul li{
		text-align: left;
	}
	#menu-header h1{
		font-size: 30px;
	}
	#menu-body-layout section header h2{
		font-size: 25px;
		margin: 10px 0;
	}
	#menu-body-layout{
		margin-top: 0;
	}
}

@media all and (max-width: 500px){
	html{
	background-image: url(https://xinalaniretreat.com/wp-content/uploads/2024/12/xinalani-mobile-menu-hojas-final.png), url(https://xinalaniretreat.com/wp-content/uploads/2024/11/textura-papel-mixto.jpg);
	background-size: 100%,256px;
}
}

#menu-body-layout section.filtrarDiv,
section.filtrarDiv{
	display: none;
}
#menu-body-layout section.show{
	display: inline-block;
	box-sizing: border-box;
}
section.specific{
	grid-column: span 3;
}