@charset "utf-8";

/* ==========================================
   ROOMS SECTION - CSS MODULAR
   ========================================== */
/* Archivo CSS para la sección de habitaciones (rooms-section)
   Contiene estilos para desktop, tablet y móvil */

/* ==========================================
   ESTILOS BASE - DESKTOP GRANDE (1920px+)
   ========================================== */

#roomsSec {
	position: relative;
	z-index: 0;
	padding: 0 98px;
	background-color: #faf8f5;
	overflow: hidden;
	--circleFullWidth: 696px;
}

#roomsSec .circleFull {
	--p: 0;
	/* the percentage */
	--b: 1px;
	/* the thickness */
	--c: #f7f4f1;
	/* the color */
	--w: var(--circleFullWidth);
	/* the size*/
	width: var(--w);
	aspect-ratio: 1/1;
	position: relative;
	display: inline-grid;
	place-content: center;
	position: absolute;
	top: 159px;
	right: -60px;
	z-index: -1;
	transform: rotate(-90deg);
}

#roomsSec .circleFull:before,
#roomsSec .circleFull:after {
	content: "";
	position: absolute;
	border-radius: 50%;
}

#roomsSec .circleFull:before {
	inset: 0;
	background: radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat,
		conic-gradient(var(--c) calc(var(--p) * 1%), #0000 0);
	-webkit-mask: radial-gradient(farthest-side,
			#0000 calc(100% - var(--b)),
			#000 calc(100% - var(--b)));
	mask: radial-gradient(farthest-side,
			#0000 calc(100% - var(--b)),
			#000 calc(100% - var(--b)));
}

#roomsSec .circleFull:after {
	inset: calc(50% - var(--b) / 2);
	background: var(--c);
	transform: rotate(calc(var(--p) * 3.6deg - 90deg)) translate(calc(var(--w) / 2 - 50%));
}

#roomsSec.in-viewport .circleFull {
	animation-name: circleFullDrawDecorLine;
	animation-duration: 7s;
	animation-fill-mode: both;
	animation-delay: 0s;
	animation-timing-function: ease-out;
}

#roomsSec .contentBox {
	max-width: 1400px;
	margin: auto;
	padding: 96px 0;
	text-align: center;
}

#roomsSec .contentBox h2.h2 {
	display: block;
	margin: 0 0 16px 0;
	font-size: 1rem;
	color: #898787;
	font-weight: 300;
	line-height: 1.4rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
}

#roomsSec .contentBox p {
	margin: 0 0 30px 0;
	font-family: "Juana";
	font-size: 1.9375rem;
	color: #606060;
	font-weight: 200;
	line-height: 2.9375rem;
}

#roomsSec .contentBox p strong {
	font-family: "Juana Regular It";
	font-weight: 400;
}

#roomsSec .contentBox p:last-child {
	margin-bottom: 0;
}

#roomsSec .roomsLogos {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-bottom: 96px;
	flex-wrap: wrap;
}

#roomsSec .roomsLogos img {
	height: 92px;
	width: 92px;
	object-fit: contain;
}

#roomsSec .roomsBox {
	display: flex;
	gap: 0px;
	margin-bottom: 112px;
	border: 1px solid #ded9d4;
}

#roomsSec .roomsBox .roomsMenu {
	width: 100%;
	max-width: 553px;
	padding: 16px 32px 16px 16px;
}

#roomsSec .roomsBox .roomsMenu ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

#roomsSec .roomsBox .roomsMenu ul>li {
	margin: 0 0 24px 0;
	font-family: "Gill Sans";
	font-size: 1.5625rem;
	color: #aba8a8;
	font-weight: 300;
	line-height: 2.375rem;
	letter-spacing: 0rem;
}

#roomsSec .roomsBox .roomsMenu ul>li:last-child {
	margin-bottom: 0;
}

#roomsSec .roomsBox .roomsMenu ul>li>span {
	display: block;
	margin: 0 0 10px 0;
	font-size: 1.5625rem;
	color: #aba8a8;
	font-weight: 300;
	line-height: 2.375rem;
	text-transform: uppercase;
}

#roomsSec .roomsBox .roomsMenu ul>li>a {
	display: inline-block;
	color: #aba8a8;
	font-weight: 300;
	transition: 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}

#roomsSec .roomsBox .roomsMenu ul>li>a:hover,
#roomsSec .roomsBox .roomsMenu ul>li:hover>a,
#roomsSec .roomsBox .roomsMenu ul>li.current>a {
	color: #606060;
	text-decoration: none;
}

#roomsSec .roomsBox .roomsMenu ul>li>ul {
	padding: 0 0 0 24px;
	margin: 0;
	list-style-type: none;
}

#roomsSec .roomsBox .roomsMenu ul>li>ul>li {
	margin: 0 0 10px 0;
	font-family: "Gill Sans";
	font-size: 1.5625rem;
	color: #aba8a8;
	font-weight: 300;
	line-height: 2.375rem;
	letter-spacing: 0rem;
}

#roomsSec .roomsBox .roomsMenu ul>li>ul>li:last-child {
	margin-bottom: 0;
}

#roomsSec .roomsBox .roomsMenu ul>li>ul>li>a {
	display: inline-block;
	color: #aba8a8;
	font-weight: 300;
	transition: 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}

#roomsSec .roomsBox .roomsMenu ul>li>ul>li>a:hover,
#roomsSec .roomsBox .roomsMenu ul>li>ul>li>a.active,
#roomsSec .roomsBox .roomsMenu ul>li>ul>li:hover>a,
#roomsSec .roomsBox .roomsMenu ul>li>ul>li.current>a {
	color: #606060;
	text-decoration: none;
	font-weight: 400;
}

#roomsSec .roomsBox .roomsMenu ul>li>ul>li>a br {
	display: block;
}

#roomsSec .roomsBox .roomsCont {
	width: 100%;
	padding: 24px 24px;
	border-left: 1px solid #ded9d4;
}

#roomsSec .roomsBox .roomsCont .roomItems {
	display: none;
	opacity: 0;
	transition: opacity 0.7s ease;
}

#roomsSec .roomsBox .roomsCont .roomItems.show {
	display: flex;
	flex-direction: column;
	opacity: 1;
}

#roomsSec .roomsBox .roomsCont .roomItems.show[style*="display: block"] {
	display: flex !important;
}

/* Estilos de picture movidos a .roomitem-slider (ver "Room Item Slider") */

#roomsSec .roomsBox .roomsCont .roomItems .info {
	display: flex;
	flex-direction: column;
	padding: 32px 16px 16px;
}

#roomsSec .roomsBox .roomsCont .roomItems .info ul.meta {
	display: flex;
	flex-wrap: wrap;
	row-gap: 4px;
	column-gap: 22px;
	padding: 0;
	margin: 0 0 8px 0;
	list-style-type: none;
}

#roomsSec .roomsBox .roomsCont .roomItems .info ul.meta li {
	position: relative;
	font-size: 1rem;
	color: #c0b8af;
	font-weight: 500;
	line-height: 1.375rem;
	text-transform: uppercase;
}

#roomsSec .roomsBox .roomsCont .roomItems .info ul.meta li sup {
	font-size: 0.6em;
}

#roomsSec .roomsBox .roomsCont .roomItems .info ul.meta li::after {
	content: "•";
	position: absolute;
	top: 0;
	right: -14px;
}

#roomsSec .roomsBox .roomsCont .roomItems .info ul.meta li:last-child::after {
	display: none;
}

#roomsSec .roomsBox .roomsCont .roomItems .info h3.h3 {
	display: block;
	margin: 0 0 24px 0;
	font-family: "Juana";
	font-size: 1.9375rem;
	color: #606060;
	font-weight: 200;
	line-height: 2.3125rem;
	letter-spacing: -0.025rem;
}

#roomsSec .roomsBox .roomsCont .roomItems .info p {
	margin: 0 0 24px 0;
	font-size: 1.25rem;
	color: #898787;
	font-weight: 300;
	line-height: 1.75rem;
}

#roomsSec .roomsBox .roomsCont .roomItems .info p:last-child {
	margin-bottom: 0;
}

#roomsSec .roomsBox .roomsCont .roomItems .info p strong {
	font-weight: 500;
}

#roomsSec .roomsBox .roomsCont .roomItems .info .btnBox {
	display: flex;
	justify-content: flex-start;
	gap: 15px;
	margin-top: 24px;
}

#roomsSec .roomsBox .roomsCont .roomItems .info .btnBox .bookNowBtn {
	display: inline-block;
	padding: 12px 25px;
	border: 1px solid #ded9d4;
	background-color: #ded9d4;
	border-radius: 0px;
	font-size: 1rem;
	color: #606060;
	font-weight: 500;
	line-height: 1.05rem;
	letter-spacing: 0.0313rem;
	text-transform: uppercase;
	text-decoration: none;
	transition: 0.8s cubic-bezier(0.3, 1, 0.3, 1);
}

#roomsSec .roomsBox .roomsCont .roomItems .info .btnBox .bookNowBtn:hover {
	border-color: #8c8275;
	background-color: #8c8275;
	color: #606060;
}

#roomsSec .roomsBox .roomsCont .roomItems .info .btnBox .bookNowBtn .btnText {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	width: 100%;
	overflow: hidden;
}

#roomsSec .roomsBox .roomsCont .roomItems .info .btnBox .bookNowBtn .btnText span {
	width: 100%;
	white-space: nowrap;
	text-shadow: 0px calc(20px * 1.25) transparent;
	transform: translateY(0);
	transition: text-shadow 0.8s cubic-bezier(0.3, 1, 0.3, 1);
}

#roomsSec .roomsBox .roomsCont .roomItems .info .btnBox .bookNowBtn:hover .btnText span {
	text-shadow: 0px 20px #ffffff;
	transform: translateY(calc(20px * -1));
	transition: all 0.8s cubic-bezier(0.3, 1, 0.3, 1);
}

#roomsSec .roomsBox .roomsCont .roomItems .info .btnBox .exploreBtn {
	display: inline-block;
	padding: 12px 25px;
	border: 1px solid #d3d0cf;
	background-color: transparent;
	border-radius: 0px;
	font-size: 1rem;
	color: #606060;
	font-weight: 300;
	line-height: 1.05rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	text-decoration: none;
	transition: 0.8s cubic-bezier(0.3, 1, 0.3, 1);
}

#roomsSec .roomsBox .roomsCont .roomItems .info .btnBox .exploreBtn:hover {
	border-color: #ded9d4;
	background-color: #ded9d4;
	color: #606060;
}

#roomsSec .roomsBox .roomsCont .roomItems .info .btnBox .exploreBtn .btnText {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	width: 100%;
	overflow: hidden;
}

#roomsSec .roomsBox .roomsCont .roomItems .info .btnBox .exploreBtn .btnText span {
	width: 100%;
	white-space: nowrap;
	text-shadow: 0px calc(20px * 1.25) transparent;
	transform: translateY(0);
	transition: text-shadow 0.8s cubic-bezier(0.3, 1, 0.3, 1);
}

#roomsSec .roomsBox .roomsCont .roomItems .info .btnBox .exploreBtn:hover .btnText span {
	text-shadow: 0px 20px #606060;
	transform: translateY(calc(20px * -1));
	transition: all 0.8s cubic-bezier(0.3, 1, 0.3, 1);
}

/* Room Item Slider */
#roomsSec .roomsBox .roomsCont .roomItems .roomitem-slider {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 66.71%;
	/* 467/700 = 0.6671 */
	overflow: hidden;
	background-color: #f5f5f5;
}

#roomsSec .roomsBox .roomsCont .roomItems .roomitem-slider .swiper-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#roomsSec .roomsBox .roomsCont .roomItems .roomitem-slider .swiper-slide {
	width: 100% !important;
	height: 100% !important;
}

#roomsSec .roomsBox .roomsCont .roomItems .roomitem-slider .swiper-slide picture {
	display: block;
	width: 100%;
	height: 100%;
}

#roomsSec .roomsBox .roomsCont .roomItems .roomitem-slider .swiper-slide picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

#roomsSec .roomsBox .roomsCont .roomItems .roomitem-slider .swiperNav {
	display: flex;
	justify-content: space-between;
	margin-top: 0;
	position: absolute;
	top: 50%;
	right: 16px;
	left: 16px;
	transform: translateY(-50%);
	z-index: 10;
}

#roomsSec .roomsBox .roomsCont .roomItems .roomitem-slider .swiperNav [class*="swiper-button-"] {
	background: #faf8f5;
}

#roomsSec .roomsBox .roomsCont .roomItems .roomitem-slider .swiperCountDots {
	margin-top: 0;
	color: #ffffff;
	position: absolute;
	top: 7%;
	right: 15px;
	left: 15px;
}

#roomsSec .roomsBox .roomsCont .roomItems .roomitem-slider .swiperCountDots .countline {
	display: inline-block;
	width: 64px;
	height: 1px;
	background: #ffffff;
	border-radius: 0px;
}

/* ==========================================
   MEDIA QUERY - DESKTOP PEQUEÑO (1180px - 1366px)
   ========================================== */
@media only screen and (min-width: 1180px) and (max-width: 1366px) {

#roomsSec .roomsBox .roomsMenu {
	max-width: 470px;
}

}


/* ==========================================
   MEDIA QUERY - TABLET/DESKTOP (959px - 1180px)
   ========================================== */
@media only screen and (min-width: 959px) and (max-width: 1180px) {

#roomsSec {
	padding: 0 32px;
}

#roomsSec .contentBox {
	padding: 70px 0;
}

#roomsSec .roomsLogos {
	margin-bottom: 70px;
}

#roomsSec .roomsBox {
	margin-bottom: 70px;
}

#roomsSec .roomsBox .roomsMenu {
	max-width: 470px;
}

#roomsSec .roomsBox .roomsCont .roomItems .info h3.h3 {
	font-size: 1.75rem;
	line-height: 2.125rem;
}

}


/* ==========================================
   MEDIA QUERY - TABLET (768px - 959px)
   ========================================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {

#roomsSec {
	padding: 0 15px;
}

#roomsSec .contentBox {
	padding: 70px 0;
}

#roomsSec .contentBox p {
	margin: 0 0 20px 0;
	font-size: 1.4375rem;
	line-height: 2.0625rem;
}

#roomsSec .roomsLogos {
	margin-bottom: 70px;
}

#roomsSec .roomsBox {
	margin-bottom: 70px;
}

#roomsSec .roomsBox .roomsMenu {
	max-width: 470px;
	padding: 15px 15px;
}

#roomsSec .roomsBox .roomsMenu ul > li {
	margin: 0 0 20px 0;
	font-size: 1.25rem;
	line-height: 1.5625rem;
}

#roomsSec .roomsBox .roomsMenu ul > li > span {
	margin: 0 0 10px 0;
	font-size: 1.25rem;
	line-height: 1.5625rem;
}

#roomsSec .roomsBox .roomsMenu ul > li > ul {
	padding: 0 0 0 15px;
}

#roomsSec .roomsBox .roomsMenu ul > li > ul > li {
	margin: 0 0 10px 0;
	font-size: 1.25rem;
	line-height: 1.5625rem;
}

#roomsSec .roomsBox .roomsMenu ul > li > ul > li > a br {
	display: none;
}

#roomsSec .roomsBox .roomsCont {
	padding: 15px 15px;
}

#roomsSec .roomsBox .roomsCont .roomItems .info {
	padding: 15px 0 0;
}

#roomsSec .roomsBox .roomsCont .roomItems .info ul.meta li {
	font-size: 0.875rem;
	line-height: 1.125rem;
}

#roomsSec .roomsBox .roomsCont .roomItems .info h3.h3 {
	margin: 0 0 20px 0;
	font-size: 1.4375rem;
	line-height: 1.75rem;
}

#roomsSec .roomsBox .roomsCont .roomItems .info p {
	margin: 0 0 20px 0;
	font-size: 1rem;
	line-height: 1.5rem;
}

#roomsSec .roomsBox .roomsCont .roomItems .info .btnBox {
	margin-top: 0;
}

#roomsSec .roomsBox .roomsCont .roomItems .info .btnBox .bookNowBtn,
#roomsSec .roomsBox .roomsCont .roomItems .info .btnBox .exploreBtn {
	padding: 10px 17px;
	font-size: 0.875rem;
}

}


/* ==========================================
   MEDIA QUERY - MÓVIL (máximo 767px)
   ========================================== */
@media only screen and (max-width: 767px) {

#roomsSec {
	padding: 0 15px;
}

#roomsSec .contentBox {
	padding: 50px 0;
}

#roomsSec .contentBox p {
	margin: 0 0 20px 0;
	font-size: 1.25rem;
	line-height: 1.875rem;
}

#roomsSec .roomsLogos {
	margin-bottom: 50px;
}

#roomsSec .roomsLogos img {
	flex: 0 0 calc(50% - 8px);
}

#roomsSec .roomsBox {
	flex-direction: column;
	margin-bottom: 50px;
}

#roomsSec .roomsBox .roomsMenu {
	padding: 15px 15px;
}

#roomsSec .roomsBox .roomsMenu ul > li {
	margin: 0 0 20px 0;
	font-size: 1.25rem;
	line-height: 1.5625rem;
}

#roomsSec .roomsBox .roomsMenu ul > li > span {
	margin: 0 0 10px 0;
	font-size: 1.25rem;
	line-height: 1.5625rem;
}

#roomsSec .roomsBox .roomsMenu ul > li > ul {
	padding: 0 0 0 15px;
}

#roomsSec .roomsBox .roomsMenu ul > li > ul > li {
	margin: 0 0 10px 0;
	font-size: 1.25rem;
	line-height: 1.5625rem;
}

#roomsSec .roomsBox .roomsMenu ul > li > ul > li > a br {
	display: none;
}

#roomsSec .roomsBox .roomsCont {
	padding: 15px 15px;
	border-left: none;
	border-top: 1px solid #DED9D4;
}

#roomsSec .roomsBox .roomsCont .roomItems .info {
	padding: 15px 0 0;
}

#roomsSec .roomsBox .roomsCont .roomItems .info ul.meta li {
	font-size: 0.875rem;
	line-height: 1.125rem;
}

#roomsSec .roomsBox .roomsCont .roomItems .info h3.h3 {
	margin: 0 0 20px 0;
	font-size: 1.5rem;
	line-height: 1.875rem;
}

#roomsSec .roomsBox .roomsCont .roomItems .info p {
	margin: 0 0 20px 0;
	font-size: 1rem;
	line-height: 1.5rem;
}

#roomsSec .roomsBox .roomsCont .roomItems .info .btnBox {
	margin-top: 0;
}

#roomsSec .roomsBox .roomsCont .roomItems .info .btnBox .bookNowBtn,
#roomsSec .roomsBox .roomsCont .roomItems .info .btnBox .exploreBtn {
	padding: 10px 17px;
	font-size: 0.875rem;
}

}