h1#mini-site-title{
	font-size: 35px;
	margin-top: 30px;
}
#mini-site-title{
	color: #343434;
	font-family: 'Prata';
}
#single-packages.main{
	max-width: 1480px;
	display: grid;
	grid-template-columns: 1fr 350px;
    gap: 30px;
	margin: 0 auto;
}
#single-packages #mini-site-intro{
	margin-top: 0;
	padding-top: 0;
}
#package-details-container .container,
#package-booking-calendar-container .container{
	width: 100%;
}
#retreat-dates{
	font-family: 'Karla';
}
.mini-site-featured-image{
	width: 250px;
	height: 250px;
	object-fit: cover;
	mask-image: url('https://xinalaniretreat.com/wp-content/uploads/2025/03/mascara-circular-xinalani.png');
	mask-size: contain;
	border-radius: 0 !important;
	mask-repeat: no-repeat;
}
#content{
	margin-top: 20px;
}
section .container{
    padding-left: 0;
    padding-right: 0;
}
.retreat-description{
	margin-top: 30px;
}
.btn.green-button{
	border: 2px solid #757437;
	background: #757437;
}
.btn.green-button:hover{
	color: #757437;
}
/*----- Estilos para la sección de introducción -----*/
#package-introduction{
	max-width: 860px;
	margin: 0 auto;
}
#room-rates{
	display: grid;
	grid-gap: 10px;
	text-align: center;
	margin: 0 auto;
	margin-top: 45px;
}
#room-rates>div:before{
	content: " ";
	display: inline-block;
	width: 90px;
	height: 90px;
	margin-bottom: 30px;
	background-size: contain;
	background-repeat: no-repeat;
}
#room-dates>div h3{
	margin-bottom: 0;
	margin-top: 20px;
}
#room-rates>div h3{
	margin-bottom: 0;
	font-family: 'Prata';
}
#room-rates.columns-1{
	grid-template-columns: 1fr;
}
#room-rates.columns-2{
	grid-template-columns: 1fr 1fr;
	max-width: 720px;
}
#room-rates.columns-3{
	grid-template-columns: 1fr 1fr 1fr;
}
#room-rates.columns-4{
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
.room-list{
	margin-top: 20px;
}
.room-list>p{
	margin-bottom: 0;
}
.room-list p span{
	color: #d87c13;
	font-weight: 600;
	margin-left: 10px;
}
#prices{
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	gap: 40px;
	flex-wrap: wrap;
}
#prices>div{
	flex: 1 1 0px;
}
#single-occupancy:before{
	background-image: url('https://xinalaniretreat.com/wp-content/uploads/2025/09/single-occupancy-xinalani.png');
}
#double-occupancy:before{
	background-image: url('https://xinalaniretreat.com/wp-content/uploads/2025/09/double-occupancy-xinalani.png');
}
#triple-occupancy:before{
	background-image: url('https://xinalaniretreat.com/wp-content/uploads/2025/09/triple-occupancy-xinalani.png');
}
#quadruple-occupancy:before{
	background-image: url('https://xinalaniretreat.com/wp-content/uploads/2025/09/quadruple-occupancy-xinalani.png');
}
section h2,
section h2 span
{
	font-size: 35px;
	text-align: center;
	font-family: 'Prata';
	font-weight: normal;
	color: #343434;
	position: relative;
	z-index: 1;
	margin-bottom: 35px;
}
section .container h2:before{
	content: " ";
	width: 130px;
	height: 130px;
	display: inline-block;
	background-size: cover;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
}
#about-the-instructors .container>h2:before{
	background-image: url('https://xinalaniretreat.com/wp-content/uploads/2025/03/teachers-title-icon.png');
}
/*-- Estilos para el menu --*/
.mobile-sticky-menu ul li a, header nav ul li a{
	border: 3px solid #fff;
	border-radius: 5px;
}
header nav>ul>li>a.icon-burger{
	position: relative;
	top: 4px;
}
header.smaller nav>ul>li>a.icon-burger{
	top: 0;
}
.mobile-sticky-menu ul li a:hover, header nav ul li a:hover{
	background: #fff;
	color: #000;
}
.mobile-sticky-menu ul li a:hover span, header nav ul li a:hover span{
	color: #000;
}
/*-- Estilos para about the experience --*/
#about-the-experience .container h2,
#rates-section .container h2
{
	margin-bottom: 0;
}
#about-the-experience .container>h2:before{
	background-image: url('https://xinalaniretreat.com/wp-content/uploads/2025/03/about-the-experience-spark-icon.png');
}
section .container>h3{
	font-size: 20px;
	text-align: center;
	font-weight: initial;
	position: relative;
	top: -10px;
	z-index: 1;
	color: #757437;
}
#about-the-experience .container>h3 span{
	font-size: 20px;
	color: #757437;
}
#experience-gallery-container{
	margin-top: 45px;
}
#gallery-layout{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 10px;
	grid-auto-rows: 235px;
}
#gallery-layout a{
	width: 100%;
	height: 100%;
	mask-image: url('https://xinalaniretreat.com/wp-content/uploads/2024/08/mascara-cuadrada-xinalani.png');
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
    overflow: hidden;
}
.zoom{
	transition: all .2s;
}
.zoom:hover{
	transform: scale(1.01) translateY(-5px);
}
#gallery-layout a img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#gallery-layout a img,
.zoom img {
    transition: transform 0.3s ease;
    will-change: transform;
    transform-origin: center center;
}
#gallery-layout a:hover img,
.zoom:hover img {
    transform: scale(1.05);
}
#gallery-layout a:nth-child(1){
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 3;
	aspect-ratio: auto;
	mask-image: url('https://xinalaniretreat.com/wp-content/uploads/2025/03/galeria-mascara-rectangular.png');
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
}
#gallery-layout a:nth-child(4){
	grid-column-start: 3;
	grid-column-end: 5;
	grid-row-start: 2;
	grid-row-end: 3;
	aspect-ratio: auto;
	mask-image: url('https://xinalaniretreat.com/wp-content/uploads/2025/03/galeria-mascara-rectangular.png');
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
}
#gallery-layout a:nth-child(5){
	grid-column-start:1;
	grid-column-end: 3;
	grid-row-start: 3;
	grid-row-end: 4;
	aspect-ratio: auto;
	mask-image: url('https://xinalaniretreat.com/wp-content/uploads/2025/03/galeria-mascara-rectangular.png');
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
}
#gallery-layout a:nth-child(10){
	grid-column-start: 3;
	grid-column-end: 5;
	grid-row-start: 3;
	grid-row-end: 4;
	aspect-ratio: auto;
	mask-image: url('https://xinalaniretreat.com/wp-content/uploads/2025/03/galeria-mascara-rectangular.png');
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
}
.pswp img{
    border-radius: 10px;
}
#retreat-video-content{
	margin-top: 40px;
}
/*-- Estilos para la sección de Rates --*/
#rates-section,
#about-the-experience{
    margin-top: 80px;
}
#rates-section .container>h2:before{
	background-image: url('https://xinalaniretreat.com/wp-content/uploads/2025/03/rates-icon.png');
	z-index: -1;
}

#package-specific-recommendation{
	text-align: center;
	margin-top: 35px;
}
#package-specific-recommendation svg{
	fill: var(--xinalani-green);
	width: 30px;
	height: 30px;
	display: inline-block;
	vertical-align: middle;
	padding: 10px;
	box-sizing: content-box;
	background: #fff;
	border-radius: 40px;
	z-index: 2;
	position: relative;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}
#package-specific-recommendation p{
	display: inline-block;
	padding: 5px 20px;
	background: #f0ebe6;
	margin-left: -16px;
	z-index: 1;
	position: relative;
	border-radius: 5px;
}
#package-specific-recommendation p a{
	color: #757437 !important;
	text-decoration: none;
	font-weight: 600;
}
#package-specific-recommendation p a:hover{
	text-decoration: underline;
}
/*-- Estilos para la sección de Inclusiones --*/
#inclusion-list .container h2:before{
	background-image: url('https://xinalaniretreat.com/wp-content/uploads/2025/04/inclusiones-icono.png');
}
#inclusion-list ul.amenities{
	margin-top: 50px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-auto-rows: 1fr;
	grid-gap: 15px;
}
#inclusion-list ul.amenities li{
	width: initial;
	margin: initial;
	padding: initial;
	padding: 15px;
	display: grid;
	grid-template-columns: 50px 1fr;
	text-align: left;
	align-items: center;
	grid-gap: 15px;
	mask-image: url('https://xinalaniretreat.com/wp-content/uploads/2025/03/galeria-mascara-rectangular.png');
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	background: #f1f1f19c;
	transition: background .3s ease;
	line-height: 20px;
}
#inclusion-list ul.amenities li:hover{
	background: #eeeae5;
	transition: background .3s ease;
}
#inclusion-list ul.amenities li.icon-percent{
	background: #207684;
	color: #fff !important;
}
#inclusion-list ul.amenities li.icon-percent:before{
	color: #fff !important;
}
#inclusion-list ul li.custom-icon img{
	object-fit: contain;
}
#inclusion-list ul li span{
	margin-bottom: 0;
	line-height: 20px;
}
#includes-disclaimer{
    text-align: center;
    padding: 40px;
    margin-top: 35px;
    border-radius: 10px;
    background: #eeeae5;
	mask-image: url('https://xinalaniretreat.com/wp-content/uploads/2025/03/galeria-mascara-rectangular.png');
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
}
#includes-disclaimer p{
	font-size: 12px;
}
ul.amenities li:before{
	display: block;
	font-size: 45px !important;
	color: #76752f;
	max-width: 45px;
	margin: 0 auto;
}
/*-- Fin de estilos para la sección de Inclusiones --*/
/*-- Estilos para la sección de Schedule --*/
#schedules h2:before{
	background-image: url('https://xinalaniretreat.com/wp-content/uploads/2025/04/schedule-icono.png');
}
.carousel-activities .thumb-box>a{
	mask-image: url('https://xinalaniretreat.com/wp-content/uploads/2024/08/mascara-cuadrada-xinalani.png');
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
}
#schedules h2{
	max-width: 768px;
	margin: 90px auto !important;
}
#schedules h2 span{
	line-height: 140%;
}
/*-- Fin de Estilos para la sección de Schedule --*/

/*-- Estilos para la ventana modal --*/
.form-modal{
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 5;
	justify-content: center;
	align-items: center;
	/* From https://css.glass */
	/*background: rgba(47, 23, 23, 0.2);*/
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}
.form-modal.active{
	display: flex;
}
@keyframes fadeIn{
	from { opacity: 0, transform: translateY(-20px); }
	to { opacity: 1, transform: translateY(0); }
}
.form-modal-content{
	background: #ece9e4;
	padding: 2rem;
	border-radius: 20px;
	position: relative;
	width: 60%;
	/*height: 85%;*/
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
	animation: fadeIn 0.3s ease;
	padding-bottom: 10px;
}
.formModal-close{
	position: absolute;
	top: 15px;
	right: 15px;
	font-size: 40px;
	background: none;
	border: none;
	cursor: pointer;
	z-index: 5;
}
.formModal-close:hover{
	color: #cd7c26;
}
#save-your-spot-form-container .inner-container{
	display: grid;
	grid-template-columns: 1fr;
}
#modal-form-retreat-title-container{
	display: grid;
	grid-gap: 35px;
	grid-template-columns: 130px 1fr;
	margin-bottom: 30px;
	align-items: center;
	/*box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	padding: 20px;*/
	border-radius: 	10px;
}
#save-your-spot-form-container .inner-container .mini-site-featured-image{
	width: 100%;
	height: auto;
	aspect-ratio: 1/1;
	margin-bottom: 0 !important;
}
#modal-form-retreat-title{
	font-family: 'Prata';
	font-size: 25px;
	line-height: 35px;
	margin-bottom: 0;
}
#modal-form-retreat-dates{
	margin-bottom: 0;
}
#save-your-spot-form .columna p,
#save-your-spot-form .columna input,
#save-your-spot-form .columna select,
#save-your-spot-form .columna textarea{
	margin: 0;
}
#save-your-spot-form .columna input,
#save-your-spot-form .columna select,
#save-your-spot-form .columna textarea{
	border-radius: 25px;
	background-color: #fff;
	border: 2px solid #ece9e4;
}
#save-your-spot-form .columna input:focus,
#save-your-spot-form .columna select:focus-within,
#save-your-spot-form .columna textarea:focus{
	border-color: #cd7c26 !important;
}
#save-your-spot-form .columna textarea{
	height: initial;
	resize: none;
}
.wpcf7-form-control.wpcf7-submit{
	color: #fff;
}
.fila{
	display: grid;
	margin-bottom: 10px;
	grid-gap: 10px;
}
.fila.sencilla{
	grid-template-columns: 1fr;
}
.fila.doble{
	grid-template-columns: 1fr 1fr;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	font-size: 16px;
	margin-top: 0;
	border: none;
	color: #fff;
	padding: 10px 15px;
	border-radius: 10px;
}
/*Estilos para los errores del formulario*/
.wpcf7 form.invalid .wpcf7-response-output{
	background: #cd7c26;
}
.wpcf7 form.sent .wpcf7-response-output{
	background: #757437;
}
span.wpcf7-not-valid-tip{
	position: absolute;
}

/*----------------------------------------------------*/
/*----- Estilos para el hero con efecto parallax -----*/
/*----------------------------------------------------*/

.hero-parallax {
	position: relative;
	width: 100%;
	min-height: 100vh;
	height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	z-index: 1;
	mask-image: url('https://xinalaniretreat.com/wp-content/uploads/2025/09/mascara-header.png');
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
}
.hero-parallax__bg {
	 position: absolute;
	 top: 0; left: 0; right: 0; bottom: 0;
	 width: 100%;
	 height: 100%;
	 background-size: cover;
	 background-position: center;
	 filter: brightness(0.9) saturate(1.1);
	 z-index: 1;
	 will-change: transform;
	 transition: filter 0.3s;
	 /* Parallax effect for all browsers */
	 transform: translateY(0);
}

.hero-parallax__content {
	position: relative;
	z-index: 2;
	color: #fff;
	text-align: center;
	width: 100%;
	padding: 0 2rem;
}
.hero-parallax__title {
	font-family: 'Prata', serif;
	font-size: 120px !important;
	font-weight: initial;
	letter-spacing: 0.03em;
	text-shadow: 0 4px 32px rgba(0,0,0,0.25);
	color: #fff;
	max-width: min-content;
	text-align: left;
	margin: 0 auto;
	line-height: 140px;
	padding: 25px;
}

/* Flecha animada abajo */
.hero-parallax__arrow {
   position: absolute;
   left: 50%;
   bottom: 50px;
   transform: translateX(-50%);
   background: none;
   border: none;
   padding: 0;
   cursor: pointer;
   z-index: 3;
   animation: arrow-bounce 1.6s cubic-bezier(.6,0,.4,1) infinite;
   outline: none;
   transition: filter 0.2s;
}
.hero-parallax__arrow svg {
   display: block;
   fill: #fff;
   width: 25px;
   height: 25px;
}
@keyframes arrow-bounce {
   0%, 100% { transform: translateX(-50%) translateY(0); }
   50% { transform: translateX(-50%) translateY(18px); }
}


/*--------------------------------------*/
/*----- Estilos para el Breadcrumb -----*/
/*--------------------------------------*/
.icon-back-arrow-xinalani svg{
	width: 20px;
	height: 20px;
	vertical-align: text-bottom;
	margin-right: 5px;
	fill: #5c5850;
}
.page-template-default .main a.icon-back-arrow-xinalani{
	color: #5c5850 !important;
	text-decoration: none;
	font-weight: 600;
}

/*----------------------------------------------------*/
/*------ Estilos para el calendario de reservas ------*/
/*----------------------------------------------------*/
#package-booking-calendar-container{
	text-align: center;
	margin-top: 80px;
}
#package-booking-calendar-container label{
	/*font-family: 'Prata';
	font-size: 25px;*/
	font-family: 'Karla', sans-serif;
	font-size: 16px;
	display: none;
}
#package-booking-calendar-container p{
	border-bottom: 1px solid #757437;
	padding-bottom: 10px;
	color: #757437;
	display: none;
}
#package-booking-calendar-container #datepicker-section{
	box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
	padding: 15px;
	border-radius: 15px;
	border-top: 1px solid #757437;
	position: sticky;
	top: 120px;
	margin-bottom: 45px;
}
#datepicker-section .container{
	padding: 0;
}
#package-booking-calendar-container .flatpickr-calendar{
	margin: 0 auto;
	margin-top: 15px;
	width: 100%;
	box-shadow: none;
	margin-top: 0;
}
.flatpickr-calendar .flatpickr-rContainer{
	width: 100%;
}
.flatpickr-months .flatpickr-month{
	font-family: 'Prata';
}
.flatpickr-calendar .flatpickr-days{
	width: 100%;
}
.flatpickr-day{
	max-width: none !important;
}
.flatpickr-calendar .dayContainer{
	width: 100%;
	max-width: 100%;
}
/*--- Colores de seleccion ---*/
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange{
	background: #757437 !important;
	border: none !important;
}
.flatpickr-day.inRange{
	box-shadow: -5px 0 0 #c9c9b1, 5px 0 0 #c9c9b1 !important;
	background: #c9c9b1 !important;
	border-color: #c9c9b1 !important;
}
.flatpickr-current-month{
	font-size: 16px !important;
}


/*-------------------------------------------------------*/
/*----- Estilos para las pestañas y línea de tiempo -----*/
/*-------------------------------------------------------*/
#schedules{
	padding-bottom: 35px;
}
.schedule-tabs {
	max-width: 1200px;
	margin: 0 auto;
}
.tab-buttons {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 30px;
}
.tab-btn {
	padding: 5px;
	background: #fff;
	border-radius: 5px;
	cursor: pointer;
	font-size: 14px;
	color: #5c5850;
	transition: all 0.3s ease;
	min-width: 100px;
	font-family: 'Karla', sans-serif;
	/*border: 2px solid #747437;*/
	text-transform: uppercase;
}
.tab-btn:hover {
	background: #bdbd98;
	color: white;
	border-color: #bdbd98;
}
.tab-btn.active {
	background: #757437;
    border-color: #757437;
	color: white;
}
.tab-content {
	position: relative;
}
.tab-pane {
	display: none;
	animation: fadeIn 0.5s ease-in-out;
}
.tab-pane.active {
	display: block;
}
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}
.timeline-container {
	max-width: none;
	margin: 0 auto;
}
.timeline {
	position: relative;
	margin-left: 50px;
	border-left: 2px solid #757437;
}
.timeline-item {
	position: relative;
	margin-bottom: 10px;
	display: flex;
	align-items: flex-start;
}
.timeline-item svg{
	fill: #757437;
	background: #fff;
	position: absolute;
	left: -9px;
	width: 17px;
	height: 17px;
	top: 19px;
	padding: 2px;
	transition: all .5s ease;
}
.timeline-time {
	position: absolute;
	left: -120px;
	top: 15px;
	font-weight: bold;
	color: #757437;
	font-size: 16px;
	width: 100px;
	text-align: right;
}
.timeline-content {
	flex: 1;
	margin-left: 20px;
}
.timeline-content:hover svg{
	/*fill: #cd7c26;*/
	padding: 0;
	transition: all .5s ease;
}
.activity-card {
	background: white;
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	border: 1px solid #e3e3e3;
}
.activity-card:hover {
	transform: translateY(-5px);
	/*box-shadow: 0 8px 30px rgba(0,0,0,0.15);*/
}
.activity-image {
	flex: 0 0 140px;
	height: 85px;
	overflow: hidden;
}
.activity-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.activity-card:hover .activity-image img {
	transform: scale(1.05);
}
.activity-info {
	flex: 1;
	padding: 20px;
}
.activity-info h4 {
	margin: 0;
	color: #5c5850;
	font-size: 16px;
	font-weight: 600;
	font-family: 'Prata', serif;
}
.activity-info p {
	margin: 0;
	color: #666;
	line-height: 1.5;
	font-size: 16px;
}

/*----------------------------------------------------*/
/*------- Estilos para los upgrades de paquetes ------*/	
/*----------------------------------------------------*/
:root{
	--xinalani-green: #757437;
}
#package-upgrades .container>h2{
	margin-bottom: 0;
	z-index: 0;
}
#package-upgrades h2 span{
	z-index: 0;
}
#package-upgrades .container>p{
	font-size: 20px;
	text-align: center;
	font-weight: initial;
	position: relative;
	top: -10px;
	color: var(--xinalani-green);
	text-transform: uppercase;
}
.upgrades-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.upgrade-card {
    background: #fff;
    border-radius: 15px;
    padding: 30px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.upgrade-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.upgrade-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--xinalani-green), var(--xinalani-green));
}

.upgrade-header {
    text-align: center;
    margin-bottom: 15px;
}

.upgrade-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(122, 193, 66, 0.1);
}

.upgrade-card h3 {
    font-size: 23px;
    margin: 10px 0 5px;
    color: #333;
    font-weight: initial;
	font-family: 'Prata';
}

.upgrade-subtitle {
    color: #666;
    font-size: 16px;
	font-family: 'Karla', sans-serif;
    margin: 0;
    font-style: italic;
}

.upgrade-content {
    text-align: left;
	border-bottom: 1px solid #e7e7e7;
}

.upgrade-cta{
	text-align: center;
	margin-top: 20px;
}
.upgrade-cta a{
	background: #757437;
	color: #fff;
	display: inline-block;
	border: 2px solid #757437;
}
.upgrade-cta a svg{
	fill: #fff;
	width: 20px;
	height: 20px;
}
.upgrade-cta a span{
	color: #fff;
	vertical-align: text-bottom;
	font-size: 14px;
}

.upgrade-cta a:hover{
	background: #fff;
	color: #757437;
}
.upgrade-cta a:hover svg{
	fill: #757437;
}
.upgrade-cta a:hover span{
	color: #757437;
}

.upgrade-features {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
}

.upgrade-features li {
    padding: 8px 0;
    position: relative;
    padding-left: 25px;
    color: #555;
    line-height: 1.5;
	padding-left: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
}

.upgrade-features li svg{
	fill: #757437
}
.upgrade-features li span{
	line-height: 20px;
}

.upgrade-price {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

.price-from {
    display: block;
    font-size: 0.9em;
    color: #666;
    margin-bottom: 5px;
}

.price-amount {
    font-size: 25px;
    font-weight: 700;
    color: var(--xinalani-green);
	margin-top: -15px;
	display: inline-block;
	margin-bottom: 0;
}

.upgrades-cta {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid #e0e0e0;
}

.upgrades-cta p {
    color: #666;
    font-size: 0.95em;
    max-width: 600px;
    margin: 0 auto 30px;
}

/*----------------------------------------------------*/
/*-------- Estilos para el widget de Whatsapp --------*/	
/*----------------------------------------------------*/
.joinchat{
	display: none;
}

/*-----------------------------------------------------*/
/*---------- Estilos responsive de la página ----------*/
/*-----------------------------------------------------*/
@media all and (max-width: 1600px){
	#modal-form-retreat-title{
		font-size: 22px;
		line-height: 27px;
	}
	#modal-form-retreat-title-container{
		grid-template-columns: 100px 1fr;
		margin-bottom: 30px;
	}
	#save-your-spot-form .columna textarea{
		height: 85px;
	}

	#single-packages.main{
		max-width: 1280px;
    }
}
@media all and (max-width: 1280px){
	#single-packages.main{
		grid-template-columns: 1fr;
		padding: 0 20px;
	}
	.mini-site-featured-image{
		margin: 0 auto;
	}
	#package-details-container .container,
	#package-booking-calendar-container .container{
		padding: 0 20px;
	}
	#room-rates.columns-2{
		max-width: 100%;
	}
}
@media all and (max-width: 800px){
	.hero-parallax__content .hero-parallax__title{
		font-size: 90px !important;
		line-height: 100px !important;
	}
	#prices>div{
		flex: 45%;
	}
	#inclusion-list ul.amenities{
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 768px) {
	.timeline {
		padding-left: 80px;
		margin-left: 0;
	}
	.timeline-time {
		left: -80px;
		width: 70px;
		font-size: 14px;
	}
	.timeline-item::before {
		left: -40px;
	}
	.timeline-item svg{
		left: -89px;
	}
	.activity-card {
		flex-direction: row;
	}
	.activity-image {
		flex: none;
		height: 120px;
	}
	.activity-image img{
		aspect-ratio: 1;
	}
	.tab-buttons {
		flex-direction: column;
		align-items: center;
	}
	.tab-btn {
		width: 100%;
		max-width: 200px;
		font-family: 'Prata';
	}

	.upgrades-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .upgrade-card {
        padding: 25px 20px;
    }
    
    .upgrade-card h3 {
        font-size: 1.2em;
    }
    
    .price-amount {
        font-size: 1.6em;
    }
}

@media all and (max-width: 600px){
	/*-- Títulos --*/
	.hero-parallax__title{
		padding: 0 !important;
	}
	.hero-parallax__title { font-size: 2rem; }
	.hero-parallax__btn { font-size: 1rem; padding: 0.8rem 1.5rem; }

	h1#mini-site-title{
		font-size: 28px;
	}
	h2#retreat-dates{
		font-size: 20px;
	}
	section h2,
	section h2 span
	{
		line-height: 30px;
		font-size: 28px;
	}
	section h2{
		margin-bottom: 20px !important;
	}
	/*-- Estilos para la imagen destacada --*/
	.mini-site-featured-image{
		width: 100%;
		height: initial;
		aspect-ratio: 1/1;
		max-width: 350px;
	}
	#prices>div{
		flex: 100%;
	}
	/*-- Estilos responsive de la galería --*/
	#gallery-layout{
		grid-template-columns: 1fr 1fr;
	}
	#gallery-layout a:nth-child(1),
	#gallery-layout a:nth-child(4),
	#gallery-layout a:nth-child(5),
	#gallery-layout a:nth-child(10){
		grid-column-start: auto;
		grid-column-end: auto;
		grid-row-start: auto;
		grid-row-end: auto;
	}
	#gallery-layout a:nth-child(3),
	#gallery-layout a:nth-child(6),
	#gallery-layout a:nth-child(9){
		grid-column-start: 1;
		grid-column-end: 3;
	}
	/*-- Estilos para las rates de las habitaciones --*/
	#room-rates,
	#room-rates.columns-2{
		grid-template-columns: 1fr;
		grid-gap: 30px;
	}
	.redes-instructor ul{
		text-align: center;
	}
	/* -- Estilos para el formulario de save your spot --*/
	.form-modal-content{
		width: 100%;
		height: 100%;
		overflow: scroll;
		padding: 30px;
		padding-top: 65px;
	}
	.formModal-close{
		top: 20px;
		right: 20px;
	}
	#modal-form-retreat-title-container{
		grid-template-columns: 85px 1fr;
		grid-gap: 20px;
	}
	#modal-form-retreat-title{
		font-size: 20px;
	}
	.fila.doble{
		grid-template-columns: 1fr;
	}

	/* -- Estilos para la recomendación de paquete -- */
	#package-specific-recommendation{
		position: relative;
	}
	#package-specific-recommendation svg{
		position: absolute;
		top: -25px;
		left: 50%;
		transform: translateX(-50%);
	}
	#package-specific-recommendation p{
		padding: 20px;
		padding-top: 30px;
		margin-left: 0;
	}

	#package-upgrades{
		padding-left: 25px;
		padding-right: 25px;
	}

	.activity-card{
		flex-direction: column;
	}
	.activity-image{
		height: 160px;
	}
}
@media all and (max-width: 500px){
	.hero-parallax__content .hero-parallax__title{
		font-size: 50px !important;
		line-height: 60px !important;
	}
	#inclusion-list ul.amenities{
		grid-template-columns: 1fr;
	}

	#package-details-container .container, #package-booking-calendar-container .container{
		padding: 0;
	}
}