#restingplaceSec {
	position: relative;
	margin-bottom: var(--space-between-sections);
	overflow: hidden;
}

#restingplaceSec .content {
	float: left;
	width: 100%;
}

#restingplaceSec .content .enjoyBox {
	float: left;
	margin-left: calc(0px - var(--container-padding));
	font-family: var(--font-title-family);
	font-size: 170px;
	color: rgb(255 255 255 / 2%);
	line-height: 140px;
	text-transform: uppercase;
	position: relative;
	z-index: 1;
}

#restingplaceSec .content span.title {
	display: block;
	margin: 0 0 40px 17%;
	font-family: var(--font-cursive-family);
	font-size: var(--font-subtitle-cursive-size);
	color: var(--color-primary);
	line-height: 50px;
}

#restingplaceSec .content h1 {
	margin: 0 0 40px 17%;
	font-family: var(--font-title-family);
	font-size: var(--font-title-size);
	color: var(--color-black);
	line-height: 58px;
	text-transform: uppercase;
}

#restingplaceSec .content h2 {
	float: right;
	width: 68%;
	margin: 0 0 20px 0;
	font-family: var(--font-title-family);
	font-size: 32px;
	color: var(--color-primary);
	line-height: 42px;
	text-transform: uppercase;
}

#restingplaceSec .content p {
	float: right;
	width: 68%;
	margin: 0 0 20px 0;
	font-size: var(--font-text-size);
	color: var(--color-black);
	font-weight: 400;
	line-height: 30px;
}

#restingplaceSec .content p:last-child {
	margin-bottom: 0;
}

#restingplaceSec .content .readmore {
	float: right;
	width: 68%;
	margin: 0;
	clear: both;
}

/* En la plantilla default (páginas de contenido/legales) el only-text va en columna normal a ancho completo */
body.default #restingplaceSec .content span.title,
body.default #restingplaceSec .content h1 {
	margin-left: 0;
}

body.default #restingplaceSec .content h2,
body.default #restingplaceSec .content p,
body.default #restingplaceSec .content .readmore {
	float: none;
	width: 100%;
}

#restingplaceSec .restingplace {
	display: flex;
	position: relative;
	float: left;
	width: 100%;
	margin-bottom: 170px;
}

#restingplaceSec .restingplace:last-child {
	margin-bottom: 0;
}

#restingplaceSec .restingplace .bgBoxMainRight {
	width: calc(65% + var(--container-padding) - 100px);
	height: calc(200% + (170px * 2));
	background: var(--color-grey);
	position: absolute;
	top: 50%;
	right: calc(0px - var(--container-padding));
	z-index: -1;
}

#restingplaceSec .restingplace .bgBoxMainLeft {
	width: calc(65% + var(--container-padding) - 100px);
	height: calc(200% + (170px * 2));
	background: var(--color-grey);
	position: absolute;
	top: 50%;
	left: calc(0px - var(--container-padding));
	z-index: -1;
}

#restingplaceSec .restingplace .rightTextBox {
	font-family: var(--font-title-family);
	font-size: 170px;
	color: var(--color-grey-soft);
	line-height: 140px;
	text-transform: uppercase;
	position: absolute;
	top: 0;
	transform: translateY(-100%);
	right: calc(0px - var(--container-padding));
	z-index: 1;
}

#restingplaceSec .restingplace .leftTextBox {
	font-family: var(--font-title-family);
	font-size: 170px;
	color: var(--color-grey-soft);
	line-height: 140px;
	text-transform: uppercase;
	position: absolute;
	top: 0;
	transform: translateY(-100%);
	left: calc(0px - var(--container-padding));
	z-index: 1;
}

#restingplaceSec .restingplace .slider {
	align-self: flex-start;
	float: left;
	width: 65%;
}

#restingplaceSec .restingplace .slider .customNav {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-top: 23px;
}

#restingplaceSec .restingplace .slider .customNav button {
	width: 17px;
	padding: 0;
	background-color: transparent;
	filter: var(--color-filter-icon-primary)
}

#restingplaceSec .restingplace .slider .customNav #counter {
	width: 80px;
	margin: 0 5px;
	font-family: var(--font-text-family);
	font-weight: normal;
	font-size: 17px;
	color: var(--color-black);
	line-height: 17px;
	text-align: center;
}

#restingplaceSec .restingplace .slider .customNav #counter span {
	font-family: 'var(--font-text-family)';
	color: var(--color-primary);
	font-weight: 900;
}

#restingplaceSec .restingplace .info {
	position: relative;
	float: left;
	width: 35%;
	margin-top: 80px;
	padding: 40px;
	padding-right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

#restingplaceSec .restingplace .info .bgBox {
	background: var(--color-grey-soft);
	position: absolute;
	top: 0;
	right: calc(0px - var(--container-padding));
	bottom: 0;
	left: -100px;
	z-index: -1;
}

#restingplaceSec .restingplace .info .restingplace-info h3 {
	margin: 0 0 20px 0;
	font-family: var(--font-title-family);
	font-size: var(--font-subtitle-size);
	color: var(--color-black);
	line-height: 32px;
	text-transform: uppercase;
}

#restingplaceSec .restingplace .info .restingplace-info .facilities {
	display: flex;
	align-items: center;
	grid-gap: 20px;
	margin: 0 0 20px 0;
}

#restingplaceSec .restingplace .info .restingplace-info .facilities .item {
	display: flex;
	align-items: center;
	grid-gap: 10px;
	font-size: var(--font-text-size);
	color: var(--color-black);
	font-weight: 600;
	line-height: 24px;
}

#restingplaceSec .restingplace .info .restingplace-info .facilities .item img {
	filter: var(--color-filter-icon-primary)
}

#restingplaceSec .restingplace .info .restingplace-info p {
	margin: 0 0 20px 0;
	font-size: 16px;
	color: var(--color-black);
	font-weight: 400;
	line-height: 30px;
}

#restingplaceSec .restingplace .info .restingplace-info p:last-child {
	margin-bottom: 0;
}

#restingplaceSec .restingplace .info .restingplace-info a.button {
	display: inline-block;
	margin: 10px 0 0 0;
	padding: 15px 20px;
	background-color: var(--color-primary);
	font-size: 16px;
	color: var(--color-white);
	font-weight: 700;
	line-height: 20px;
	text-transform: uppercase;
	text-align: center;
	transition: all .3s ease-in-out;
}

#restingplaceSec .restingplace .info .restingplace-info a.button:hover {
	color: var(--color-white);
	background-color: var(--color-primary-hover);
}

#restingplaceSec .restingplace:nth-child(even) .slider {
	order: 2;
}

#restingplaceSec .restingplace:nth-child(even) .slider .customNav {
	justify-content: flex-end;
}

#restingplaceSec .restingplace:nth-child(even) .info {
	padding-right: 40px;
	padding-left: 0;
}

#restingplaceSec .restingplace:nth-child(even) .info .bgBox {
	right: -100px;
	left: calc(0px - var(--container-padding));
}
@media only screen and (min-width: 1180px) and (max-width: 1366px) {
        #restingplaceSec .content .enjoyBox			{ font-size: 130px; line-height: 100px; }
    #restingplaceSec .restingplace .rightTextBox { font-size: 130px; line-height: 100px; }
    #restingplaceSec .restingplace .leftTextBox { font-size: 130px; line-height: 100px; }
}

@media only screen and (min-width: 959px) and (max-width: 1180px) {
        #restingplaceSec .content .enjoyBox			{ font-size: 140px; line-height: 110px; }
    #restingplaceSec .content h2				{ width: 50%; }
    #restingplaceSec .content p					{ width: 50%; }
    #restingplaceSec .content .readmore			{ width: 50%; }
    #restingplaceSec .restingplace				{ margin-bottom: 120px; }
    #restingplaceSec .restingplace .bgBoxMainRight { width: calc(65% + var(--container-padding) - 100px); height: calc(200% + (120px * 2)); }
    #restingplaceSec .restingplace .bgBoxMainLeft { width: calc(65% + var(--container-padding) - 100px); height: calc(200% + (120px * 2)); }
    #restingplaceSec .restingplace .rightTextBox { font-size: 140px; line-height: 110px; }
    #restingplaceSec .restingplace .leftTextBox { font-size: 140px; line-height: 110px; }
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
        #restingplaceSec .content .enjoyBox			{ font-size: 110px; line-height: 90px; }
    #restingplaceSec .content span.title		{ margin: 0 0 20px 0; font-size: var(--font-subtitle-cursive-size); line-height: 40px; }
    #restingplaceSec .content h1				{ margin: 0 0 20px 0; font-size: 35px; line-height: 45px; }
    #restingplaceSec .content h2				{ width: 50%; margin: 0 0 15px 0; font-size: 26px; line-height: 36px; }
    #restingplaceSec .content p					{ width: 50%; font-size: 16px; line-height: 28px; }
    #restingplaceSec .content .readmore			{ width: 50%; }
    #restingplaceSec .restingplace				{ margin-bottom: 100px; }
    #restingplaceSec .restingplace .bgBoxMainRight { width: calc(55% + var(--container-padding) - 0px); height: calc(200% + (100px * 2)); }
    #restingplaceSec .restingplace .bgBoxMainLeft { width: calc(55% + var(--container-padding) - 0px); height: calc(200% + (100px * 2)); }
    #restingplaceSec .restingplace .rightTextBox { font-size: 110px; line-height: 90px; }
    #restingplaceSec .restingplace .leftTextBox { font-size: 110px; line-height: 90px; }
    #restingplaceSec .restingplace .slider		{ width: 55%; }
    #restingplaceSec .restingplace .info		{ width: 45%; margin-top: 70px; padding: 15px; padding-right: 0; }
    #restingplaceSec .restingplace .info .bgBox { left: -50px; }
    #restingplaceSec .restingplace .info .restingplace-info h3 { margin: 0 0 15px 0; font-size: 26px; line-height: 36px; }
    #restingplaceSec .restingplace .info .restingplace-info .facilities .item { font-size: 16px; line-height: 20px; }
    #restingplaceSec .restingplace .info .restingplace-info p { font-size: 16px; line-height: 28px; }
    #restingplaceSec .restingplace .info .restingplace-info a.button { margin: 0px 0 0 0; padding: 10px 15px; }
    #restingplaceSec .restingplace:nth-child(even) .info { padding-right: 15px; padding-left: 0; }
    #restingplaceSec .restingplace:nth-child(even) .info .bgBox { right: -50px; }
}

@media only screen and (max-width: 767px) {
        #restingplaceSec .content .enjoyBox			{ display: none; font-size: 70px; line-height: 70px; }
    #restingplaceSec .content span.title		{ margin: 0 0 20px 0; font-size: var(--font-subtitle-cursive-size); line-height: 40px; }
    #restingplaceSec .content h1				{ margin: 0 0 20px 0; font-size: var(--font-title-size); line-height: 45px; }
    #restingplaceSec .content h2				{ float: left; width: 100%; margin: 0 0 15px 0; font-size: 26px; line-height: 36px; }
    #restingplaceSec .content p					{ float: left; width: 100%; font-size: var(--font-text-size); line-height: 28px; }
    #restingplaceSec .content .readmore			{ float: left; width: 100%; margin-top: 20px; }
    #restingplaceSec .restingplace				{ display: block; margin-bottom: 70px; }
    #restingplaceSec .restingplace .bgBoxMainRight { display: none; width: calc(55% + var(--container-padding) - 0px); height: calc(200% + (100px * 2)); }
    #restingplaceSec .restingplace .bgBoxMainLeft { display: none; width: calc(55% + var(--container-padding) - 0px); height: calc(200% + (100px * 2)); }
    #restingplaceSec .restingplace .rightTextBox { display: none; font-size: 70px; line-height: 70px; }
    #restingplaceSec .restingplace .leftTextBox { display: none; font-size: 70px; line-height: 70px; }
    #restingplaceSec .restingplace .slider		{ width: calc(100% + 30px); margin-left: -15px; position: relative; z-index: inherit; }
    #restingplaceSec .restingplace .slider .customNav { justify-content: flex-start; margin-top: -25px; margin-bottom: -32px; padding: 0 30px; position: relative; z-index: 2; }
    #restingplaceSec .restingplace .info		{ width: 100%; margin-top: 0; padding: 15px; padding-top: 47px; position: relative; z-index: 1; background-color: var(--color-grey);}
    #restingplaceSec .restingplace .info .bgBox { right: 0; left: 0; }
    #restingplaceSec .restingplace .info .restingplace-info h3 { margin: 0 0 15px 0; font-size: var(--font-subtitle-size); line-height: 36px; }
    #restingplaceSec .restingplace .info .restingplace-info .facilities .item { font-size: 16px; line-height: 20px; }
    #restingplaceSec .restingplace .info .restingplace-info p { font-size: var(--font-text-size); line-height: 28px; }
    #restingplaceSec .restingplace .info .restingplace-info a.button { width: 100%; margin: 0px 0 0 0; padding: 10px 15px; }
    #restingplaceSec .restingplace:nth-child(even) .slider .customNav { justify-content: flex-start; }
    #restingplaceSec .restingplace:nth-child(even) .info { padding-right: 15px; padding-left: 15px; }
    #restingplaceSec .restingplace:nth-child(even) .info .bgBox { right: 0; left: 0; }
}

/* Botones de la habitación (reservar ahora + ver más) lado a lado */
#restingplaceSec .restingplace .info .restingplace-info .restingplace-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}