/**
 * Listado apilado para el home — [refugio_tours] / [refugio_tour].
 * Diseño heredado del plugin "Refugio Tours", con dos botones (Reservar / Ver más info).
 * Todos los selectores van namespaced a .rt-experience para no chocar con el tema/Elementor.
 */

.rt-experience, .rt-experience * { box-sizing: border-box; }

.rt-experience {
	position: relative;
	width: 100%;
	min-height: var(--rt-section-height, 650px);
	margin: 0 0 var(--rt-section-gap, 28px);
	border-radius: var(--rt-section-radius, 26px);
	overflow: hidden;
	isolation: isolate;
	font-family: var(--rt-font-family, inherit);
}

.rt-hero {
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(90deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.02) 42%, rgba(0,0,0,.16) 100%), var(--rt-hero) center / cover no-repeat;
	transform: scale(1.01);
}

.rt-popular {
	position: absolute; top: 35px; right: 35px; z-index: 2;
	color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 2px;
}

/* Tarjeta desktop ------------------------------------------------------- */

.rt-desktop-card {
	position: absolute; top: 31px; left: 29px;
	display: flex; flex-direction: column;
	width: 370px; height: calc(100% - 46px);
	border: 2px solid rgba(255,255,255,.95); border-radius: 23px;
	background: rgba(0,0,0,.56); overflow: hidden; padding-bottom: 22px;
}

.rt-desktop-photo {
	flex: 0 0 auto; width: 100%; height: 204px;
	background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,.28)), var(--rt-photo) var(--rt-position, center) / 170% auto no-repeat;
}

.rt-ribbon { flex: 0 0 auto; padding: 20px 22px 0; }
.rt-experience .rt-ribbon h2 {
	margin: 0; color: var(--rt-heading-color, #fff);
	font-size: var(--rt-heading-size, 38px); font-weight: 600; line-height: 1.1; letter-spacing: -1px;
}

.rt-experience .rt-desktop-description {
	flex: 0 0 auto; margin: 22px 22px 24px;
	color: var(--rt-body-color, #fff);
	font-size: var(--rt-body-size, 23px); line-height: 1.34; font-weight: 400; letter-spacing: -.45px;
}

/* Botones (comunes) ----------------------------------------------------- */

.rt-actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 0 22px; }

.rt-experience .rt-btn {
	display: inline-flex; align-items: center; justify-content: center; width: 100%;
	padding: 14px 24px; border: 0; border-radius: var(--rt-button-radius, 50px);
	font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer;
	transition: background .25s, color .25s, transform .25s, filter .25s;
}
.rt-experience .rt-btn:hover { transform: translateY(-2px); }
.rt-experience .rt-btn:active { transform: scale(.98); }

/* Primario (Reservar) y secundario (Ver más info) en desktop. */
.rt-experience .rt-btn--book {
	background: var(--rt-button-bg, #fff); color: var(--rt-button-text, #161616);
}
.rt-experience .rt-btn--book:hover { background: var(--rt-button-bg, #fff); color: var(--rt-button-text, #161616); filter: brightness(.9); }

.rt-experience .rt-btn--more {
	background: transparent; color: var(--rt-morebtn-text, #fff);
	border: 1.5px solid var(--rt-morebtn-text, #fff);
}
.rt-experience .rt-btn--more:hover { background: rgba(255,255,255,.12); color: var(--rt-morebtn-text, #fff); }

/* Tarjeta de precio ----------------------------------------------------- */

.rt-price-card {
	position: absolute; right: 45px; bottom: 45px; padding: 22px 35px;
	background: rgba(0,0,0,.65); border: 1px solid rgba(255,255,255,.7); border-radius: 20px; color: #fff;
}
.rt-from { font-size: 16px; margin-bottom: 5px; }
.rt-price { font-size: 48px; font-weight: 700; line-height: 1; }
.rt-price span { font-size: 17px; font-weight: 400; margin-left: 4px; }

.rt-mobile-card { display: none; }

/* Mobile ---------------------------------------------------------------- */

@media (max-width: 700px) {
	.rt-experience {
		min-height: 0; height: auto; padding: 22px 16px 30px;
		margin: 0 0 var(--rt-mobile-gap, 20px); border-radius: var(--rt-mobile-radius, 30px);
		background: var(--rt-outer-bg, #f5f5f5); overflow: hidden;
	}
	.rt-experience .rt-hero,
	.rt-experience .rt-popular,
	.rt-experience .rt-desktop-card,
	.rt-experience .rt-price-card { display: none !important; }

	.rt-mobile-card {
		display: block; width: 100%; max-width: 420px; margin: 0 auto; padding: 12px;
		background: var(--rt-card-bg, #fff); border-radius: var(--rt-card-radius, 35px);
		box-shadow: 0 8px 30px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04); overflow: hidden;
	}
	.rt-mobile-image {
		width: 100%; height: 310px; border-radius: var(--rt-mobile-image-radius, 23px);
		background: var(--rt-photo) center / cover no-repeat;
	}
	.rt-mobile-content { padding: 24px 16px 16px; }
	.rt-mobile-category {
		display: inline-block; margin-bottom: 13px; color: #929292;
		font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
	}
	.rt-experience .rt-mobile-title {
		margin: 0 0 10px; color: var(--rt-mobile-heading-color, #151515);
		font-size: var(--rt-mobile-heading-size, 39px); font-weight: 700; line-height: 1.08; letter-spacing: -1.5px;
	}
	.rt-experience .rt-mobile-description {
		margin: 0 0 25px; color: var(--rt-mobile-body-color, #929292);
		font-size: var(--rt-mobile-body-size, 15px); font-weight: 400; line-height: 1.5; letter-spacing: 0;
	}
	.rt-mobile-details { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; padding-top: 3px; }
	.rt-mobile-price { display: flex; align-items: baseline; gap: 5px; color: #161616; }
	.rt-mobile-from { font-size: 15px; color: #919191; margin-right: 5px; }
	.rt-mobile-price strong { font-size: 28px; font-weight: 700; letter-spacing: -.7px; line-height: 1; }
	.rt-mobile-pp { font-size: 15px; color: #929292; }

	.rt-actions--mobile { padding: 0; gap: 10px; }
	.rt-experience .rt-mobile-card .rt-btn {
		min-height: 61px; border-radius: var(--rt-mobile-button-radius, 50px);
		box-shadow: inset 0 2px 3px rgba(255,255,255,.15);
	}
	.rt-experience .rt-mobile-card .rt-btn--book {
		background: var(--rt-mobile-button-bg, #171717); color: var(--rt-mobile-button-text, #fff);
	}
	.rt-experience .rt-mobile-card .rt-btn--book:hover { background: var(--rt-mobile-button-bg, #171717); color: var(--rt-mobile-button-text, #fff); filter: brightness(1.2); }
	.rt-experience .rt-mobile-card .rt-btn--more {
		background: transparent; color: var(--rt-mobile-morebtn-text, #171717);
		border: 1.5px solid var(--rt-mobile-morebtn-text, #171717); box-shadow: none;
	}
	.rt-experience .rt-mobile-card .rt-btn--more:hover { background: rgba(0,0,0,.05); color: var(--rt-mobile-morebtn-text, #171717); }
}

@media (max-width: 380px) {
	.rt-experience { padding: 15px 12px 25px; }
	.rt-mobile-card { border-radius: 28px; padding: 10px; }
	.rt-mobile-image { height: 260px; border-radius: 22px; }
	.rt-mobile-content { padding: 20px 12px 12px; }
	.rt-experience .rt-mobile-title { font-size: 34px; }
	.rt-experience .rt-mobile-description { font-size: 14px; }
	.rt-experience .rt-mobile-card .rt-btn { min-height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
	.rt-experience .rt-btn { transition: none; }
	.rt-experience .rt-btn:hover { transform: none; }
}
