/* ==========================================================================
   CUSTOM ROOMS - Seccion de habitaciones en la home
   ========================================================================== */

/* ----------------------------------------------------------------------------
   Estilos base
   ---------------------------------------------------------------------------- */

#roomsSec {
	position: relative;
	padding-top: 128px;
	padding-bottom: 128px;
	overflow: hidden;
}
#roomsSec .circleFull {
	pointer-events: none;
	width: 814px;
	height: 814px;
	margin: auto;
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}
#roomsSec .circleFull .circleSvg {
	width: 100%;
	height: 100%;
	margin: auto;
	opacity: 0.16;
	position: absolute;
	inset: 0;
}
#roomsSec .circleFull .circleSvg:nth-child(2) {
	width: 91%;
	height: 91%;
}
#roomsSec .circleFull .circleSvg:nth-child(3) {
	width: 96%;
	height: 96%;
	right: auto;
}
#roomsSec .circleFull .circleSvg:nth-child(4) {
	top: -20px;
	right: -40px;
}
#roomsSec.in-viewport .circleFull .circleSvg .circle {
	stroke-width: 1.2px;
	animation-name: drawCircle;
	animation-duration: 7s;
	animation-fill-mode: forwards;
	animation-timing-function: ease;
	animation-delay: 0s;
}
#roomsSec .roomsBox {
	display: flex;
}
#roomsSec .roomsBox .leftCol {
	width: 100%;
	padding-right: 55px;
}
#roomsSec .roomsBox .leftCol .content {
	width: 100%;
	margin-bottom: 100px;
}
#roomsSec .roomsBox .leftCol .content .subtitle {
	display: block;
	margin-bottom: 32px;
	margin-top: 16px;
	font-size: 1rem;
	color: #00181a;
	font-weight: 400;
	line-height: 1.5rem;
	text-transform: uppercase;
}
#roomsSec .roomsBox .leftCol .content .title {
	margin: 0;
	font-family: "Playfair Display";
	font-size: 4rem;
	color: #00181a;
	font-weight: 400;
	line-height: 4.8125rem;
	text-transform: uppercase;
}
#roomsSec .roomsBox .leftCol .image {
	width: 100%;
	max-width: 424px;
}
#roomsSec .roomsBox .leftCol .image picture,
#roomsSec .roomsBox .leftCol .image picture img {
	width: 100%;
}
#roomsSec .roomsBox .rightCol {
	width: 100%;
	max-width: 538px;
}
#roomsSec .roomsBox .rightCol .image {
	width: 100%;
	margin-bottom: 100px;
}
#roomsSec .roomsBox .rightCol .image picture,
#roomsSec .roomsBox .rightCol .image picture img {
	width: 100%;
}
#roomsSec .roomsBox .rightCol .content {
	width: 100%;
}
#roomsSec .roomsBox .rightCol .content h1,
#roomsSec .roomsBox .rightCol .content h2,
#roomsSec .roomsBox .rightCol .content h3,
#roomsSec .roomsBox .rightCol .content h4,
#roomsSec .roomsBox .rightCol .content h5,
#roomsSec .roomsBox .rightCol .content h6 {
	display: block;
	margin: 0 0 24px 0;
	font-weight: 600;
	font-size: 1.4375rem;
	line-height: 2.3125rem;
	color: #00181a;
}
#roomsSec .roomsBox .rightCol .content p {
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.5rem;
	color: #00181a;
	margin-bottom: 40px;
}

/* ----------------------------------------------------------------------------
   Desktop Grande (1601px - 2700px)
   ---------------------------------------------------------------------------- */

/* Sin estilos especificos en este breakpoint - usa los estilos base */

/* ----------------------------------------------------------------------------
   Desktop (1366px - 1500px)
   ---------------------------------------------------------------------------- */

@media only screen and (min-width: 1366px) and (max-width: 1500px) {

#roomsSec 											{ padding-top: 100px; padding-bottom: 100px; }
#roomsSec .circleFull 								{ width: 614px; height: 614px; }
#roomsSec .roomsBox .leftCol .content 				{ margin-bottom: 50px; }
#roomsSec .roomsBox .leftCol .content .subtitle 	{ margin-bottom: 25px; }
#roomsSec .roomsBox .leftCol .content .title 		{ font-size: 3.375rem; line-height: 4.1875rem; }
#roomsSec .roomsBox .leftCol .content .title br 	{ display: none; }
#roomsSec .roomsBox .rightCol 						{ max-width: 488px; }
#roomsSec .roomsBox .rightCol .image 				{ margin-bottom: 60px; }

}

/* ----------------------------------------------------------------------------
   Desktop Pequeno (961px - 1365px)
   ---------------------------------------------------------------------------- */

@media only screen and (min-width: 961px) and (max-width: 1365px) {

#roomsSec 											{ padding-top: 70px; padding-bottom: 70px; }
#roomsSec .circleFull 								{ width: 514px; height: 514px; }
#roomsSec .roomsBox .leftCol 						{ padding-right: 30px; }
#roomsSec .roomsBox .leftCol .content 				{ margin-bottom: 50px; }
#roomsSec .roomsBox .leftCol .content .subtitle 	{ margin-bottom: 20px; }
#roomsSec .roomsBox .leftCol .content .title 		{ font-size: 3.125rem; line-height: 3.4375rem; }
#roomsSec .roomsBox .leftCol .content .title br		{ display: none; }
#roomsSec .roomsBox .rightCol .image 				{ margin-bottom: 50px; }
#roomsSec .roomsBox .rightCol .content h1,
#roomsSec .roomsBox .rightCol .content h2,
#roomsSec .roomsBox .rightCol .content h3,
#roomsSec .roomsBox .rightCol .content h4,
#roomsSec .roomsBox .rightCol .content h5,
#roomsSec .roomsBox .rightCol .content h6 		{ margin-bottom: 20px; }
#roomsSec .roomsBox .rightCol .content p 			{ margin-bottom: 30px; }

}

/* ----------------------------------------------------------------------------
   Tablet (768px - 960px)
   ---------------------------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 960px) {

#roomsSec 											{ padding-top: 50px; padding-bottom: 50px; }
#roomsSec .circleFull 								{ width: 414px; height: 414px; }
#roomsSec .roomsBox .leftCol 						{ padding-right: 30px; }
#roomsSec .roomsBox .leftCol .content 				{ margin-bottom: 40px; }
#roomsSec .roomsBox .leftCol .content .subtitle 	{ line-height: 1.3rem; margin-bottom: 20px; }
#roomsSec .roomsBox .leftCol .content .title 		{ font-size: 2.5rem; line-height: 3.5rem; }
#roomsSec .roomsBox .leftCol .content .title br 	{ display: none; }
#roomsSec .roomsBox .rightCol .image 				{ margin-bottom: 40px; }
#roomsSec .roomsBox .rightCol .content h1,
#roomsSec .roomsBox .rightCol .content h2,
#roomsSec .roomsBox .rightCol .content h3,
#roomsSec .roomsBox .rightCol .content h4,
#roomsSec .roomsBox .rightCol .content h5,
#roomsSec .roomsBox .rightCol .content h6 		{ margin-bottom: 15px; }
#roomsSec .roomsBox .rightCol .content p 			{ margin-bottom: 20px; }

}

/* ----------------------------------------------------------------------------
   Mobile (max-width: 767px)
   ---------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {

#roomsSec 											{ padding: 50px 0; }
#roomsSec .circleFull 								{ width: 375px; height: 375px; margin: 130px auto 0 auto; }
#roomsSec .roomsBox 								{ flex-direction: column; }
#roomsSec .roomsBox .leftCol 						{ padding: 0; margin-bottom: 20px; }
#roomsSec .roomsBox .leftCol .content 				{ margin-bottom: 30px; }
#roomsSec .roomsBox .leftCol .content .subtitle 	{ line-height: 1.5rem; margin-bottom: 20px; }
#roomsSec .roomsBox .leftCol .content .title 		{ font-size: 2.1875rem; line-height: 2.5rem; }
#roomsSec .roomsBox .leftCol .content .title br 	{ display: none; }
#roomsSec .roomsBox .rightCol .image 				{ margin-bottom: 30px; }
#roomsSec .roomsBox .rightCol .content h1,
#roomsSec .roomsBox .rightCol .content h2,
#roomsSec .roomsBox .rightCol .content h3,
#roomsSec .roomsBox .rightCol .content h4,
#roomsSec .roomsBox .rightCol .content h5,
#roomsSec .roomsBox .rightCol .content h6 		{ font-size: 1.25rem; line-height: 1.60rem; margin-bottom: 15px; }
#roomsSec .roomsBox .rightCol .content p 			{ font-size: 0.875rem; line-height: 1.25rem; margin-bottom: 20px; }
#roomsSec .roomsBox .rightCol .content .ourRoomsBtn { padding: 10px 40px 10px 20px; }
#roomsSec .roomsBox .rightCol .content .ourRoomsBtn::before { right: 18px; }

}