/*-- THEME COLORS --*/
:root {
	/* Colors */
	--cafe: #761B05;
	--amarillo: #bca43c;
	--amarillo_o: #d7b344;
	--verde: #00D561;
	--shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

@font-face {
	font-family: "Poppins-Bold";
	src: url("/fonts/Poppins-Bold.woff2") format("woff2"),
		url("/fonts/Poppins-Bold.woff") format("woff");
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Poppins-ExtraBold";
	src: url("/fonts/Poppins-ExtraBold.woff2") format("woff2"),
		url("/fonts/Poppins-ExtraBold.woff") format("woff");
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Poppins-Medium";
	src: url("/fonts/Poppins-Medium.woff2") format("woff2"),
		url("/fonts/Poppins-Medium.woff") format("woff");
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Poppins-Regular";
	src: url("/fonts/Poppins-Regular.woff2") format("woff2"),
		url("/fonts/Poppins-Regular.woff") format("woff");
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "PlayfairDisplay-Black";
	src: url("/fonts/PlayfairDisplay-Black.woff2") format("woff2"),
		url("/fonts/PlayfairDisplay-Black.woff") format("woff");
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "PlayfairDisplay-Bold";
	src: url("/fonts/PlayfairDisplay-Bold.woff2") format("woff2"),
		url("/fonts/PlayfairDisplay-Bold.woff") format("woff");
	font-style: italic;
	font-display: swap;
}

/*-- END THEME COLORS --*/

/*-- BASE --*/
* {
	margin: 0px;
	padding: 0px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-family: "Poppins-Regular";
}

body {
	background-color: #ffffff;
	margin: 0px;
}

::-webkit-scrollbar {
	width: 6px;
	height: 5px;
}

::-webkit-scrollbar-thumb {
	background-color: #d3d3d3;
}

a {
	text-decoration: none;
}

h1,
h2,
h3,
h4,
h5{	
	font-family: "PlayfairDisplay-Black";
}

button {
	cursor: pointer;
}

.btn {
	font-size: 18px;
	padding: 8px 40px;
	color: #fff;
	background-color: var(--amarillo);
	border-radius: 10px;
	margin-top: 30px;
	font-family: "Poppins-Bold";
}

.btn-css {
	background-color: #03178c;
	color: #ffffff;
	border-radius: 20px;
	padding: 4px 20px;
	font-size: 20px;
	border: none;
}

input,
textarea,
select {
	outline: none;
}

header {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 999;
}

#header-1 {
	padding: 5px 80px;
	width: 100%;
	background-color: var(--cafe);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
}

#header-redes {
	display: flex;
	gap: 15px;
}
#header-redes a  {
    display: flex;
    justify-content: center;
    align-items: center;
}
#header-redes a svg {
	height: 20px;
	fill: #fff;
}

#header-contacto {
	padding: 4px 15px;
	background-color: var(--amarillo_o);
	color: var(--blanco);
	font-family: "Poppins-Bold";
	font-size: 20px;
	border-radius: 0px 0px 4px 4px;
}

.gtranslate_wrapper select {
	background-color: transparent;
	border: none;
	font-size: 14px;
	font-weight: lighter;
	color: #fff;
	background-color: var(--amarillo_o);
    border-radius: 20px;
    padding: 2px 20px;
}

#content-h1-phones {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

#content-h1-phones > a{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;

}

#content-h1-phones > a span{
    font-size: 14px;
    color: #fff;
}
#content-h1-phones > a svg{
    height: 18px;
    fill: #fff;
}

#header-2 {
	width: 100%;
	height: 60px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--amarillo_o);
	padding: 0px 80px;
	box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
		0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

#header-2 a  {
	height: 100%;
}

#header-2 a > img {
	height: 100%;
}

nav {
    height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

nav ul {
    height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	list-style: none;
	gap: 10px;
}

nav> ul> li {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
nav ul li a {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
	padding: 0px 15px;
	font-size: 20px;
	color: var(--cafe);
	transition: ease all 0.6s;
	font-family: "PlayfairDisplay-Bold";
} 

nav ul li a:hover {    
	background-color: #fff;
}

#menu-btn {
	display: none;
}



.sub-items-header {
	height: auto;
	display: none;
	width: 310px !important;
	position: absolute;
	background-color: var(--cafe);
	border-radius: 3px;
	top: 100%;
	z-index: 9999;
    flex-direction: column;
    box-shadow: var(--shadow);
    overflow: hidden;
	border: 1px solid #fff;
}

.sub-items-header > li > a {
    width: 100%;
	display: flex;
	justify-content: flex-start !important;
	align-items: center;
	color: #fff !important;
	border-bottom: 2px solid var(--cafe);
	padding: 10px 30px;
	transition: ease all 0.6s;
	font-weight: 600;
	border-bottom: 1px solid #fff;
}

.sub-items-header > li {
    width: 100%;

}

.sub-items-header > li > a:hover {
	background-color: #fff;
	color: var(--cafe) !important;
}

.btn-header-sub svg {
    width: 25px;
    fill: var(--cafe);
}

.content-sub-items-header{
    transition: ease all 0.6s;
}
.content-sub-items-header a span{
	font-family: "PlayfairDisplay-Bold";
}
.content-sub-items-header:hover a span{
	color: var(--cafe) !important;
}
.content-sub-items-header:hover ul {
    display: block;
}

section {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

#s-banner {
	position: relative;
	margin-top: 96px;
}

#s-banner img:first-child{
	width: 100%;
	filter: brightness(0.5);
	height: 80vh;
	object-fit: cover;
	object-position: center;
}

#icon-anos {
	width: 150px;
	position: absolute;
	left: 30px;
	bottom: 30px;
}

#s-banner.b-interno img:first-child{
	filter: brightness(0.5);
	height: 70vh !important;
}

#s-banner.b-interno h2{
	color: #fff;
	font-size: 60px;
}

#s-banner h2{
	font-size: 80px;
	color: var(--amarillo);
	position: absolute;
}

#s-banner.b-interno h1{
	color: #fff;
	font-size: 60px;
}

#s-banner h1{
	font-size: 80px;
	color: var(--amarillo);
	position: absolute;
}

.content-title-text {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 50px 0px;
}

.content-title-text>div {
	width: 70%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 15px;
}

.content-title-text>div h3{
	font-size: 35px;
	color: var(--cafe);
	margin-bottom: 25px;

}

.content-title-text>div p{
	font-size: 18px;
	text-align: center;
}

#c-reservas a{
	background-color: var(--verde);
	border-radius: 20px;
	color: #fff;
	height: auto;
	padding: 4px 20px;
	box-shadow: var(--shadow);
}

#content-items-b {
	width: 50%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	justify-content: center;
	align-items: center;
	gap: 30px;
	margin-bottom: 40px;
}

#content-items-b a{
	width: 100%;
	padding: 20px;
	border-radius: 20px;
	box-shadow: var(--shadow);
	background-color: #fff;
	gap: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#content-items-b a svg{
	fill: var(--cafe);
	width: 60px;
}

#content-items-b a span{
	font-size: 20px;
	color: #000;
	font-family: "Poppins-Bold";
}

.svg-amarillo path {
	fill: rgba(188, 164, 60, 0.5);
}

.svg-cafe path {
    fill: rgba(117, 38, 28, 0.5);
}

.svg-cafe.rotate {
	transform: rotateX(180deg) ;
}

.svg-amarillo.rotate {
	transform: rotateX(180deg) ;
}

#content-habitaciones {
	width: 80%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-content: center;
	align-items: stretch;
	gap: 30px;
}

.card-hab {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	overflow: hidden;
	align-items: center;
	border-radius: 5px;
	box-shadow: var(--shadow );
}

.card-hab img{
	width: 100%;
}

.card-hab div{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20px;
	gap: 15px;
}

.card-hab div h3{
	font-size: 25px;
	color: var(--cafe);
}

.card-hab div p{
	font-size: 18px;
}

.card-hab div a{
	width: 95%;
	text-align: center;
	font-size: 20px;
	color: #fff;
	background-color: var(--cafe);
	border-radius: 5px;
	padding: 4px 20px;
	border-bottom: 4px solid var(--amarillo_o);
	box-shadow: var(--shadow);
}

.s-planes .card-hab {
	flex-direction: row;
	align-items: stretch;
}

.s-planes .card-hab img{
	width: 50%;
	object-fit: cover;
}

.s-planes .card-hab div{
	width: 50%;
	padding: 20px;
}

.s-planes .card-hab div h3{
	font-size: 20px;
	color: #000;
}

.s-planes .card-hab div p{
	font-size: 16px;
}

#content-ubi {
	width: 80%;
	display: flex;
	justify-content: center;
	align-items: stretch;
}

#content-ubi iframe{
	width: 60%;
	border: none;
	border-radius: 10px;
	box-shadow: var(--shadow);
}

#content-ubi div{
	width: 40%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 50px 30px;
	gap: 30px;
}


#content-ubi div > a{
	width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
	background-color: var(--cafe);
	border-radius: 20px;
	padding: 4px 20px;

}

#content-ubi div > a span{
    font-size: 16px;
    color: #fff;
}
#content-ubi div > a svg{
	width: 25px;
    fill: #fff;
}

#content-ubi div p{
	font-size: 20px;
	color: #000;
	text-align: center;
}

#text-ubi {
	width: 80%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 50px 0px 30px;
	align-items: center;
	gap: 15px;
}

#text-ubi p{
	font-size: 18px;
	color: #000;
	text-align: center;
}

#s-reserva {
	background-image: url("/img/ri-15-1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
	padding: 100px 0px;
}

#content-reserva {
	width: 80%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#content-reserva div{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 10px;
}

#content-reserva div h5{
	color: var(--amarillo_o);
	font-size: 30px;
}

#content-reserva div p{
	font-family: "Poppins-Bold";
	color: #fff;
	font-size: 18px;
}

#content-reserva a{
	text-align: center;
	font-size: 20px;
	color: var(--cafe);
	background-color: #fff;
	border-radius: 5px;
	padding: 4px 20px;
	border-bottom: 4px solid var(--amarillo_o);
	box-shadow: var(--shadow);
	font-family: "Poppins-Bold";
}

#content-aliados {
	width: 80%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#aliados-carousel img {
	width: 100%;
    height: 70px;
    object-fit: contain;
}

#content-rincones {
	width: 80%;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	justify-content: center;
	align-items: stretch;
	gap: 2px;
}

#content-rincones a,
#content-rincones a img{
	width: 100%;
}
#content-rincones a img{
	height: 100%;
}

#content-experiencias {
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	position: relative;
}

.card-experiencias {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 15px;
	padding: 20px;
	border-radius: 10px;
	border: 2px solid var(--cafe);
	border-bottom: 4px solid var(--amarillo_o);
}

.card-experiencias p {
	font-size: 20px;
	color: #000;
	text-align: center;
	
}

.card-experiencias h5 {
	font-size: 30px;
	color: var(--cafe);
}


#content-nav-carousel-casa {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
	margin: 30px 0px;
}

#content-nav-carousel-casa .bnn svg {
	fill: #bdbdcd;
	width: 80px;
}
#content-nav-carousel-casa .bnn {
	width: 40px;
	height: 40px;
	cursor: pointer;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	top: calc(50% - 40px);
	border: 1px solid #bdbdcd;
	border-radius: 50%;
}


footer {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	justify-content: center;
	align-items: center;
	padding: 30px;
	background-color: #171717;
	
}

#content-img-footer,
#content-iframe-footer {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}


#content-img-footer img{
	width: 20%;
}
#content-iframe-footer iframe{
	width: 100%;
	height: 300px;
	border-radius: 10px;
	box-shadow: var(--shadow);
}

#content-redes-f {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 20px;
}

#content-redes-f svg{
	width: 35px;
	fill: #fff;
}

#content-redes-f h4{
	font-size: 25px;
	color: var(--amarillo_o);
}

#content-rincones-i {
	width: 80%;
	display: flex;
	justify-content: center;
	align-items: stretch;
	border-radius: 20px;
	box-shadow: var(--shadow);
	margin: 40px 0px;
	overflow: hidden;
	
}

#info-rincones {
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: 20px;
}

#slide-rincones {
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#carousel-rincones img {
	height: 500px;
	object-fit: cover;
}

#info-rincones h4 {
	width: 100%;
	text-align: center;
	font-size: 25px;
	color: var(--cafe);
	margin-bottom: 20px;
}

#info-rincones p {
	font-size: 18px;
	text-align: justify;
}

#content-desc-nos {
	width: 80%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 20px;
	padding-bottom: 40px ;
}

#content-desc-nos img{
	width: 100%;
	border-radius: 10px;
	box-shadow: var(--shadow);
}

#content-desc-nos img.mediana{
	width: 60%;
}

#content-desc-nos img.pequena{
	width: 30%;
}

#content-desc-nos h3{
	font-size: 25px;
	color: var(--cafe);
}

#content-desc-nos p{
	width: 100%;
	font-size: 18px;
	text-align: start;
}
#content-desc-nos ul{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 15px;
}

#content-desc-nos ul li {
	width: 100%;
	font-size: 18px;
	text-align: start;
}


.line-separator {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0px;
}

.line-separator span{
    width: 70%;
    background-color: var(--cafe);
    height: 3px;
}


#s-nosotros-n {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20px 0px 60px;
}

#content-s-nosotros {
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
	gap: 10px;
}

#content-btns-nosotros {
	width: 30%;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	flex-direction: column;
	gap: 10px;
}

#content-btns-nosotros a{
	width: 100%;
	padding: 5px 20px;
	font-size: 18px;
	color: #fff;
	background-color: var(--cafe);
	border-radius: 4px;
	transition: ease all 0.6s;
}

#content-btns-nosotros a.active,
#content-btns-nosotros a:hover{
	background-color: var(--amarillo_o);
	box-shadow: var(--shadow);
}

#info-nosotros {
	width: 70%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	background-color: #fff;
	padding: 20px;
	border-radius: 4px;
	box-shadow: var(--shadow);
	border: 2px solid var(--cafe);
}

.content-info-nosotros {
	width: 100%;
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 20px;
}

.content-info-nosotros.active {
	display: flex;
}

.content-info-nosotros p {
	font-size: 20px;
	color: #4d4d4d;
	text-align: center;
}

.content-info-nosotros >img {
	height: 150px;
}
.content-info-nosotros h3 {
	width: 100%;
	text-align: center;
	color: var(--cafe);
	font-size: 25px;
}

.content-redes-nos {
	width: 100%;
	background-color: var(--cafe);
	padding: 30px 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
}

.content-redes-nos svg{
	width: 40px;
	fill: #fff;
}

#content-info-casonas {
	width: 80%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 20px;
	padding: 50px 0px;
}
#content-info-casonas h2{
	width: 100%;
	text-align: center;
	font-size: 40px;
	color: var(--cafe);
	margin-bottom: 30px;
}
#content-info-casonas h4{
	font-size: 20px;
	color: var(--cafe);
}

#content-info-casonas.contemporanea h4{
	color: var(--amarillo);
}

#content-info-casonas p{
	font-size: 18px;
	
}

#s-hab {
	background-color: rgba(188, 164, 60, 0.2);
}

#s-hab h3{
	font-size: 20px;
	color: #000;
	margin-bottom: 30px;
}

#content-cards-habitaciones {
	width: 80%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 40px;
}

.card-hab-interna {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	background-color: var(--cafe);
}

.card-hab-interna img{
	width: 100%;
}
.card-hab-interna h4{
	font-size: 22px;
	color: var(--amarillo_o);
	padding: 20px 0px;
}
.card-hab-interna span{
	font-size: 16px;
	color: #fff;
	padding: 15px 0px;
}
.card-hab-interna a{
	width: 95%;
    text-align: center;
    font-size: 20px;
    color: #fff;
    background-color: var(--amarillo_o);
    border-radius: 5px;
    padding: 4px 20px;
    border-bottom: 4px solid #fff;
    box-shadow: var(--shadow);
	margin-bottom: 10px;
}
.card-hab-interna.suite {
	background-color: var(--amarillo_o);
}
.card-hab-interna.suite h4 {
	color: #fff;
}
.card-hab-interna.suite a {
    background-color: var(--cafe);
}
.card-hab-interna.contemporanea {
	background-color: var(--amarillo);
}
.card-hab-interna.contemporanea h4 {
	color: var(--cafe);
}
.card-hab-interna.contemporanea a {
    background-color: var(--cafe);
}

.s-hab-cont {
	background-color: rgba(188, 164, 60, 0.2);
}

#content-planes {
	width: 90%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 40px;
	margin: 40px 0px;
}

#content-planes >div:nth-child(even){
	flex-direction: row-reverse;
}

.card-planes {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: stretch;
	border-radius: 20px;
	box-shadow: var(--shadow);
	overflow: hidden;
	border: 2px solid var(--cafe);
}

.carousel-planes {
	width: 50%;	
}

.content-info-planes {
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30px 20px;
	flex-direction: column;
	gap: 10px;
}

.content-info-planes h3{
	font-size: 25px;
	color: var(--cafe);
}
.content-info-planes p{
	text-align: center;
	font-size: 16px;
	color: #000;
}
.content-info-planes a{
    text-align: center;
    font-size: 20px;
    color: #fff;
    background-color: var(--cafe);
    border-radius: 5px;
    padding: 4px 20px;
    border-bottom: 4px solid var(--amarillo_o);
    box-shadow: var(--shadow);
	margin-top: 20px;
}

.content-incluye {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 15px;
}

.content-incluye >span{
	font-size: 16px;
	color: var(--cafe);
	font-weight: bold;
}

.content-incluye > div {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-content: center;
	align-items: stretch;
	gap: 10px;
}
.content-incluye > div span{
	width: 100%;
	border-radius: 20px;
	box-shadow: var(--shadow);
	padding: 4px 10px;
	background-color: var(--amarillo_o);
	color: var(--cafe);
	text-align: center;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
}

.carousel-planes img {
	height: 100%;
}

#content-romanticos {
	width: 80%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 30px;
}

.card-romanticos {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 10px;
	box-shadow: var(--shadow);
	overflow: hidden;
}

.card-romanticos img{
	width: 100%;
}

.card-romanticos a{
	width: 100%;
    text-align: center;
    font-size: 20px;
    color: #fff;
    background-color: var(--cafe);
    padding: 4px 20px;
    border-bottom: 4px solid var(--amarillo_o);
    box-shadow: var(--shadow);
}

#content-eventos {
	width: 70%;
	padding: 40px 0px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 30px;
}

#content-eventos >h3{
	font-size: 35px;
	color: var(--cafe);
}

#content-eventos >p{
	font-size: 18px;
	color: #000;
}

#content-eventos >p a{
	color: var(--cafe);
	font-weight: bold;
}

#content-eventos >p b{
	color: var(--cafe);
}
#content-eventos >span{
	color: var(--cafe);
	font-weight: bold;
	font-size: 20px;
}

#content-eventos >ul{
	list-style: none;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 25px;
	margin-left: 30px;
}

#content-eventos >ul li {	
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 8px;
}

#content-eventos >ul li svg{
	width: 25px;
	fill: var(--amarillo);
}

#content-eventos >ul li span{
	width: calc(100% - 25px);
	font-size: 18px;
	color: #000;
}

#content-slide-evento {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
}

#carousel-evento img {
	width: 100%;
	height: 300px;
	object-fit: cover;
	border-radius: 4px;
	box-shadow: var(--shadow);
}

.content-habitaciones-int {
	grid-template-columns: 1fr !important;
	gap: 50px !important;
}

#content-asesor {
	width: 80%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 30px;
	padding: 30px 0px;
}

.content-habitaciones-int >div:nth-child(odd) {
	flex-direction: row-reverse;
}

.content-habitaciones-int .card-hab h3 {
	font-size: 35px !important;
	color: var(--cafe) !important;
}

.content-habitaciones-int .card-hab p {
	text-align: justify;
	font-size: 18px !important;
}

#content-que-hacer {
	width: 80%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	justify-content: flex-start;
	align-items: stretch;
	gap: 30px;
	padding-bottom: 50px;
}

.card-que-hacer {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	border-radius: 8px;
	box-shadow: var(--shadow);
	gap: 15px;
	overflow: hidden;
}

.card-que-hacer img{
	width: 100%;
	height: 250px;
	object-fit: cover;
}

.card-que-hacer h3{
	width: 90%;
	font-size: 20px;
	color: var(--amarillo);
}

.card-que-hacer p{
	width: 90%;
	font-size: 16px;
	color: #000;
	text-align: justify;
}

.card-que-hacer p b {
	font-family: "Poppins-Bold";
}

.card-que-hacer span{
	width: 90%;
	height: 1px;
	background-color: #d3d3d3;
	margin: 10px 0px;

}

.card-que-hacer p:last-child{
	padding-bottom: 15px;
}

.card-que-hacer a{
	width: 90%;
    text-align: center;
    font-size: 20px;
    color: #fff;
    background-color: var(--cafe);
    padding: 4px 20px;
    border-bottom: 4px solid var(--amarillo_o);
    box-shadow: var(--shadow);
	margin-bottom: 10px;
	border-radius: 10px;
}

.c-noticias  {
	grid-template-columns: 1fr 1fr 1fr !important;
}

.c-noticias .card-que-hacer h3{
	color: var(--cafe);
}

#content-title-noticia {
	width: 80%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 30px 0px;
}

#content-title-noticia h2{
	font-size: 35px;
}

#content-info-noticia {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
	padding: 20px 0px;
}

#btn-ws {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 111;
	transition: ease all 0.6s;
}

#btn-ws img{
	width: 100px;	
}

#btn-ws:hover{
	transform: scale(1.2);
}


.content-fechas-tem-alta>div {
	background-color: var(--amarillo);
	width: 100%;
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.content-fechas-tem-alta>div >ul{
	list-style: none;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 15px;
	margin-left: 30px;
}

.content-fechas-tem-alta>div >ul li {	
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 8px;
}

.content-fechas-tem-alta>div >ul li svg{
	width: 25px;
	fill: var(--cafe);
}

.content-fechas-tem-alta>div >ul li span{
	width: calc(100% - 25px);
	font-size: 18px;
	color: #000;
}

#content-eventos {
	width: 80%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.content-fechas-tem-alta h3{
	width: 100%;
	text-align: center;
	background-color: var(--cafe);
	padding: 8px 20px;
	color: #fff;
	font-family: "Poppins-Bold";
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
}

.content-fechas-tem-alta h3 svg{
	width: 40px;
	fill: #fff;
}

.content-fechas-tem-alta {
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-shadow: var(--shadow);
}

#content-info-hab {
	width: 80%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 20px;
	position: relative;
}

#content-servs {
	width: 35%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#content-info-hab .content-fechas-tem-alta {
	width: 100%;
}

#content-gal-hab {
	width: 65%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
	justify-content: center;
	align-items: stretch;
	position: sticky;
    top: 100px;
}

#content-gal-hab a,
#content-gal-hab a img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.btn-op {
	margin-bottom: 40px;
	background-color: var(--cafe);
}

#s-return {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 80vh;
	background-color: var(--cafe);
	margin-top: 90px;
}


#s-return h3{
	font-size: 100px;
	width: 80%;
	text-align: center;
	color: var(--amarillo_o);
	font-family: "PlayfairDisplay-Black";
}
#s-return h2{
	font-size: 60px;
	width: 80%;
	text-align: center;
	color: var(--amarillo_o);
	font-family: "PlayfairDisplay-Black";
}

.text-timer {
	font-size: 22px;
	color: var(--cafe);
	font-family: "PlayfairDisplay-Black";
	margin-top: 20px;
	text-transform: uppercase;
}

.text-timer b{
	font-size: 30px;
	font-family: "PlayfairDisplay-Black";
}

#content-contador {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 20px;
	background-color: var(--amarillo_o);
	border-radius: 20px;
	padding: 20px;
	box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

#content-contador div{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;	
}


.time-c {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
}

.time-c p{
	font-size: 50px !important;
	color: var(--cafe) !important;
	font-family: "PlayfairDisplay-Black" !important;
}

.time-c span{
	font-size: 25px !important;
	color: #4d4d4d !important;
}


.popup.showing {
	display: flex;
}

.popup {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	display: none;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
}

.popup .popup-container {
	width: 55%;
	max-height: 80%;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.popup .popup-container .btn-close-popup {
	width: 32px;
	height: 32px;
	cursor: pointer;
	background-color: #ffffff;
	border: none;
	border-radius: 50%;
	position: absolute;
	right: -55px;
	top: -35px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#popup-concuros img {
	width: 100%;
}

.popup-content {
	width: 100%;
	max-height: 80vh;
	color: #4d4d4d;
	border-radius: 20px;
	box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
		0 2px 4px -1px rgba(0, 0, 0, 0.3);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	z-index: 2;
	background-color: #fff;
	border-radius: 20px;
	overflow: auto;
}

.bg-oscuro {
	background-color: #4d4d4d;
	padding: 4px;
	border-radius: 3px;
}

.p-c-iframe iframe {
	width: 100%;
	height: 80vh;
}

.s-banner-link {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.s-banner-link a,
.s-banner-link img  {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}



@media screen and (max-width: 1024px) {
	#menu-btn {
		display: flex;
		width: 40px; height: 40px
	}

	nav {
		display: none;
	}

	nav.active {
		width: 60%;
		height: auto;
		padding: 20px;
		display: flex;
		position: absolute;
		top: 95px;
		right: 0px;
		background-color: var(--cafe);
		border-radius: 0px 0px 0px 20px;
	}

	nav.active ul {
		flex-direction: column;
		width: 100%;
	}

	nav.active ul li {
		width: 100%;
		flex-direction: column;
	}

	nav.active ul li a {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 5px 0px;
		font-size: 18px;
		color: #fff;
	}
	#header-2 {
		padding: 0px 10px;
	}

	.btn-header-sub svg {
		fill: #fff;
	}

	.content-sub-items-header:hover a span {
		color: var(--cafe) !important;
	}

	.sub-items-header {
		width: 100% !important;
		position: unset;
	}

	#content-h1-phones > a {
		display: none;
	}

	#header-1 {
		gap: 20px;
		padding: 5px 10px;
	}

	#s-banner img:first-child {
		height: 40vh;
	}

	#s-banner h2 {
		text-align: center;
		font-size: 40px;
	}

	#s-banner h1 {
		text-align: center;
		font-size: 40px;
	}

	.content-title-text>div h3 {
		font-size: 22px;
		text-align: center;
	}

	.content-title-text>div {
		width: 90%;
	}

	#content-items-b {
		width: 90%;
		grid-template-columns: 1fr;
	}

	#content-habitaciones {
		width: 100%;
		padding: 20px;
		grid-template-columns: 1fr;
	}

	.s-planes .card-hab {
		flex-direction: column;
	}
	.s-planes .card-hab img {
		width: 100%;
	}

	.s-planes .card-hab div {
		width: 100%;
	}

	#content-ubi {
		width: 100%;
		padding: 20px;
		flex-direction: column;
	}

	#content-ubi iframe {
		width: 100%;
	}

	#content-ubi div {
		width: 100%;
		padding: 0px;
	}

	#content-ubi div > a span {
		font-size: 14px;
	}

	#text-ubi {
		width: 100%;
		padding: 20px;
	}

	#content-reserva {
		width: 90%;
		flex-direction: column;
	}

	#content-reserva div {
		align-items: center;
	}

	#content-reserva div p {
		text-align: center;
	}

	#content-reserva {
		gap: 20px;
	}

	.content-title-text {
		padding: 30px 0px;
	}

	#content-aliados {
		margin-bottom: 40px;
	}

	#content-rincones {
		width: 100%;
		padding: 0px 20px;
		grid-template-columns: repeat(2, 1fr);
	}

	#content-experiencias {
		width: 100%;
		padding: 20px;
	}

	footer {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	#s-banner.b-interno h2 {
		font-size: 40px;
	}

	#content-info-casonas {
		width: 100%;
		padding: 20px;
	}
	#content-rincones-i {
		width: 100%;
		padding: 20px;
		flex-direction: column;
	}

	#info-rincones {
		width: 100%;
	}

	#slide-rincones {
		width: 100%;
	}	

	#carousel-rincones img {
		height: 200px;
	}

	.line-separator {
		padding: 20px 0px;
	}

	#content-desc-nos h3 {
		font-size: 20px;
		text-align: center;
	}

	#content-s-nosotros {
		width: 100%;
		flex-direction: column;
		padding: 20px;
	}

	#content-btns-nosotros {
		width: 100%;
	}

	#info-nosotros {
		width: 100%;
	}

	#content-btns-nosotros a {
		text-align: center;
	}

	.content-info-nosotros >img {
		height: auto;
		width: 100%;
	}

	.content-info-nosotros p {
		font-size: 18px;
	}

	.content-redes-nos {
		flex-wrap: wrap;
	}

	nav.active ul li a {
		padding: 10px;
	}

	#content-info-casonas h2 {
		font-size: 22px;
	}

	#s-hab h3 {
		text-align: center;
	}

	#content-cards-habitaciones {
		width: 100%;
		padding: 20px;
		grid-template-columns: 1fr;
	}

	.card-planes {
		flex-direction: column;
	}

	.carousel-planes {
		width: 100%;
	}

	.content-info-planes {
		width: 100%;
	}

	.content-info-planes h3 {
		font-size: 22px;
	}

	#content-planes >div:nth-child(even) {
		flex-direction: column;
	}

	.content-incluye > div {
		grid-template-columns: 1fr;
	}

	#content-romanticos {
		width: 100%;
		padding: 20px;
		grid-template-columns:  1fr;
	}

	#content-eventos {
		width: 100%;
		padding: 20px;
	}

	#content-eventos >h3 {
		font-size: 22px;
		text-align: center;
	}

	#content-eventos >ul {
		margin-left: 10px;
	}

	#content-asesor {
		width: 100%;
		padding: 20px;
	}

	.content-habitaciones-int >div:nth-child(odd) {
		flex-direction: column;
	}

	.content-habitaciones-int .card-hab h3 {
		text-align: center;
		font-size: 25px !important;
	}

	.c-noticias {
		grid-template-columns:  1fr !important;
	}

	#content-que-hacer {
		width: 100%;
		padding: 20px;
	}

	#icon-anos {
		width: 80px;
		position: absolute;
		left: 15px;
		bottom: 15px;
	}
	.content-fechas-tem-alta {
		width: 100%;
	}

	#content-info-hab {
		width: 100%;
		flex-direction: column-reverse;
	}

	#content-gal-hab {
		padding: 20px;
		width: 100%;
		display: grid;
		grid-template-columns:  1fr 1fr;
		position: unset;
	}

	#content-servs {
		width: 100%;
		padding: 20px;
	}

	.text-timer {
		font-size: 20px;
		text-align: center;
	}

	#content-contador div {
		gap: 10px;
	}
	
	.time-c p{
		font-size: 30px !important;
		color: var(--cafe) !important;
		font-family: "PlayfairDisplay-Black" !important;
	}

	.time-c span{
		font-size: 16px !important;
		color: #4d4d4d !important;
	}
}