/* ==========================================================================
   SINGLE TOUR - Template Premium
   ========================================================================== */

/* Fondo azul que cubre toda el área debajo del hero, incluyendo márgenes */
body.single-tour-premium {
	background-color: var(--color-blue);
}

/* ── Hero ── */
.tour-hero {
	position: relative;
	width: 100%;
	height: 100dvh;
	min-height: 50rem;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 8rem;
	background: #0d0d0d;


	&::before {
		content: "";
		background: url(../images/clouds-blue-soft.png) repeat-x center;
		height: 25rem;
		width: 100%;
		position: absolute;
		left: 0;
		bottom: -1px;
		z-index: 2;
		background-size: auto 25rem;
		animation: animatedBackground 500s linear infinite;
	}  


	@keyframes animatedBackground {
		    from {background-position: 0 0;}
		  /*use negative width if you want it to flow right to left else and positive for left to right*/
		    to {background-position: -10000px 0;}
	}

	& .tour-hero__video,
	& .tour-hero__image {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	& .tour-hero__image {
		background-size: cover;
		background-position: center;
	}
	& .tour-hero__image--placeholder {
		background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
	}

	& .tour-hero__preloader {
		position: absolute;
		inset: 0;
		background: #0d0d0d no-repeat center / cover;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 2;
		transition: opacity 0.5s ease;

		&.is-hidden {
			opacity: 0;
			pointer-events: none;
		}
	}

	& .tour-hero__overlay {
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to top,
			rgba(0, 0, 0, 0.75) 0%,
			rgba(0, 0, 0, 0.3) 50%,
			rgba(0, 0, 0, 0.15) 100%
		);
		z-index: 1;
	}

	& .tour-hero__title-wrap {
		position: relative;
		z-index: 2;
		text-align: center;
		padding: 0 2rem;
		width: 100%;
		max-width: 90rem;
	}

	& .tour-hero__title {
		font-family: var(--font-display);
		font-size: clamp(2.8rem, 5vw, 4.4rem);
		font-weight: 400;
		color: var(--colorBrandColor05);
		line-height: 1.2;
		position: relative;
		display: inline-block;
		padding: 2.2rem 4.4rem;
		margin: 0;
	}

	& .tour-hero__title-marco {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}
}

/* ── Layout principal ── */
.tour-layout {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 40rem;
	gap: 4rem;
	align-items: stretch; /* sidebar ocupa toda la altura de la fila */
	padding-top: 6rem;
	padding-bottom: 18rem;

	/* Extiende el fondo azul al ancho completo ignorando el container */
	width: 100%;
	max-width: 100%;
	padding-left: max(2rem, calc((100% - 120rem) / 2));
	padding-right: max(2rem, calc((100% - 120rem) / 2));
	box-sizing: border-box;

	&::before {
		content: "";
		background: url(../images/clouds-bottom-brandColor02.png) repeat-x center;
		height: 25rem;
		width: 100%;
		position: absolute;
		left: 0;
		bottom: -1px;
		z-index: 0;
		background-size: auto 25rem;
		animation: animatedBackground 500s linear infinite;
	}  

	&::after {
		content: '';
		position: absolute;
		top: 0rem;
		right:10rem;
		width: 182.8rem;
		height: 95rem;
		background: url(../images/cloud-back03.webp) no-repeat center;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: var(--radius-lg);
		transform: translateX(var(--parallax-after-x, 0px));
		pointer-events: none;
		z-index: -1;
		will-change: transform;
	}
	

	@media (max-width: 1024px) {
		grid-template-columns: 1fr;
	}
}

/* ── Contenido (WP the_content) ── */
.tour-content {
	position: relative;
	color: var(--colorBrandColor01);
	
	&::before {
		content: '';
		position: absolute;
		top: 30%;
		right:10rem;
		width: 182.8rem;
		height: 95rem;
		background: url(../images/cloud-back03.webp) no-repeat center;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: var(--radius-lg);
		transform: translateX(var(--parallax-x-right, 0px));
		pointer-events: none;
		z-index: -1;
		will-change: transform;
	}

	&::after {
		content: '';
		position: absolute;
		top: 70%;
		left: 90%;
		width: 182.8rem;
		height: 95rem;
		background: url(../images/cloud-back03.webp) no-repeat center;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: var(--radius-lg);
		transform: translateX(var(--parallax-after-x, 0px));
		pointer-events: none;
		z-index: -1;
		will-change: transform;
	}
	
	& pre {
		color: var(--colorBrandColor01);
		font-family: var(--font-body);
		font-size: 1.4rem;
		font-weight: 400;
		line-height: 5.2rem;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		display: block;
		margin-bottom: -1rem;
		background: none;
		padding: 0;
		white-space: normal;
		word-break: normal;
		margin-top: 5rem
	}

	& h2 {
		color: var(--colorBrandColor05);
		font-family: var(--font-display);
		font-size: clamp(2.8rem, 3.5vw, 4rem);
		font-weight: 100;
		font-style: italic;
		line-height: 1.2;
		position: relative;
		padding-bottom: 2.8rem;
		margin-top: 0;
		margin-bottom: 2rem;


		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 11.8rem;
			height: 1.8rem;
			background: url('../images/underline-gold.svg') no-repeat left center / contain;
		}
	}

	& h3 {
		color: var(--colorBrandColor03);
		font-family: var(--font-body);
		font-size: 1.8rem;
		font-weight: 400;
		line-height: normal;
		margin-top: 5rem;
		margin-bottom: 1.2rem;
		text-transform: uppercase;
	}

	& p {
		color: var(--colorBrandColor01);
		font-family: var(--font-body);
		font-size: 1.8rem;
		font-weight: 100;
		line-height: normal;
		margin-bottom: 1.6rem;
	}

	& ul,
	& ol {
		color: var(--colorBrandColor01);
		font-family: var(--font-body);
		font-size: 1.8rem;
		font-weight: 100;
		line-height: 1.7;
		padding-left: 2rem;
		margin-bottom: 1.6rem;
	}

	& figure.wp-block-gallery {
	    figure {
	        padding: 1.5rem;
	        border-radius: var(--radius-md);
	        border: 1px solid var(--colorBrandColor05);
	        & img {
	            border-radius: var(--radius-md);
	        }
	    }
	}
	
	/* Bloques de columnas de Gutenberg */
	& .wp-block-columns {
		gap: 0;
		& h3 {
			margin-top: 0;
		}
	}

	& .wp-block-column {
		border: 1px solid var(--colorBrandColor03);
		border-radius: var(--radius-md);
		padding: 2.4rem;

		/* Separación entre columnas: borde derecho de todas excepto la última */
		&:not(:last-child) {
			border-right: none;
			border-radius: var(--radius-md) 0 0 var(--radius-md);
		}

		&:not(:first-child) {
			border-radius: 0 var(--radius-md) var(--radius-md) 0;
		}

		/* Si hay solo una columna (sin hermanos) restaura radius completo */
		&:only-child {
			border-right: 1px solid var(--colorBrandColor03);
			border-radius: var(--radius-md);
		}
	}

	/* Bloque acordeón de Gutenberg (wp-block-accordion) */
	& .wp-block-accordion {
		display: flex;
		flex-direction: column;
		margin-bottom: 4rem;
	}

	& .wp-block-accordion-item {
		border: 1px solid var(--colorBrandColor03);
		border-radius: var(--radius-md);
		background: transparent;

		& h3 {
			margin: 0;
		}

		/* Colapsar bordes entre ítems consecutivos */
		&:not(:last-child) {
			border-bottom: none;
			border-radius: var(--radius-md) var(--radius-md) 0 0;
		}

		&:not(:first-child) {
			border-radius: 0 0 var(--radius-md) var(--radius-md);
		}

		&:not(:first-child):not(:last-child) {
			border-radius: 0;
		}

		&:only-child {
			border-bottom: 1px solid var(--colorBrandColor03);
			border-radius: var(--radius-md);
		}

		/* Sin separador interno cuando está abierto */
		&.is-open .wp-block-accordion-heading {
			border-bottom: none;
		}
	}

	& .wp-block-accordion-heading__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 1.8rem 2rem;
		background: transparent;
		border: none;
		cursor: pointer;
		color: var(--colorBrandColor01);
		font-family: var(--font-body);
		font-size: 1.8rem;
		font-weight: 300;
		line-height: normal;
		text-align: left;
		gap: 1.2rem;
		transition: background 0.2s ease;
		text-transform: none;

		&:hover {
			background: rgba(255, 255, 255, 0.04);
		}
	}

	& .wp-block-accordion-heading__toggle-title {
		flex: 1;
	}

	& .wp-block-accordion-heading__toggle-icon {
		flex-shrink: 0;
		font-size: 0;
		width: 2.4rem;
		height: 2.4rem;
		display: inline-block;
		background: url('../images/plus.svg') no-repeat center / contain;
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	& .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
		transform: rotate(45deg);
	}

	& .wp-block-accordion-panel {
		padding: 1.6rem 2rem;

		& p {
			margin-bottom: 0;
		}
	}
}

body.single-tour-normal {
	background-color: var(--colorBrandColor02);
	
	& .tour-hero::before {
		background: url(../images/clouds-bottom-brandColor02.png);
	}

	& .tour-layout::after {
		background: url(../images/cloud-back02.webp);
	}
	
	& .tour-content {
		& p, span, pre, h3, h4, h5, li {
			color: var(--colorGrayGray10);
		}
		
		& .wp-block-accordion-item, .wp-block-column {
			border-color: var(--colorGrayGray06);
		}

		&::before, &::after {
			background: url(../images/cloud-back02.webp);	
		}
	}

	& .tour-departures-card, .tour-booking-card {
		background: rgba(255, 255, 255, 0.50);

		& .tour-departures-card__day, .tour-booking-card__category, .tour-booking-card__excerpt, .tour-booking-card__desde, .tour-booking-card__info-value {
			color: var(--colorGrayGray10);
		}

		& .tour-booking-card__cta {
			color: var(--colorBrandColor01);
		}
	}
	& .tour-share__label {
		color: var(--colorGrayGray10);
	}
}

body.single-tour-clasico {
	background-color: var(--colorBrandColor02);
	
	& .tour-hero{
		height: 60vh;
		&::before {
			background: none;
		}
	}

	& .tour-layout {
		padding-bottom: 3rem;
		
		&::after, &::before {
			background: none;
		}
	}
	
	& .tour-content {

		& h1 {
			font-size: var(--text-5xl);
			margin-bottom: 1rem;
		}
		
		& p, span, pre, h3, h4, h5, li {
			color: var(--colorGrayGray10);
			font-family: var(--font-body);
		}

		& p, strong, span, li, ul {
			font-size: var(--text-md);
			line-height: var(--text-xl);
		}

		& .sd-tab-accordion__tabbar {
			
			.sd-tab-accordion__tab {

				&.is-active {
					
				}
			}
		}
		
		& .wp-block-accordion-item, .wp-block-column {
			border-color: var(--colorGrayGray06);
		}

		&::before, &::after {
			background: none;	
		}
	}

	& .tour-departures-card, .tour-booking-card {
		background: rgba(255, 255, 255, 0.50);

		& .tour-departures-card__day, .tour-booking-card__category, .tour-booking-card__excerpt, .tour-booking-card__desde, .tour-booking-card__info-value {
			color: var(--colorGrayGray10);
		}

		& .tour-booking-card__cta {
			color: var(--colorBrandColor01);
		}
	}
	
	& .tour-share__label {
		color: var(--colorGrayGray10);
	}
	
	& .tour-sidebar__sticky {
		& .tour-booking-card__price-before {
			color: var(--colorGrayGray03);
			font-weight: 100;
		}

		& .tour-booking-card__divider--short {
			border-color: var(--colorGrayGray03);
		}
		
		&::after {
			content: none;
		}
	}


}

/* ── Sidebar ── */
.tour-sidebar {
	/* aside ocupa toda la altura del grid gracias a align-items: stretch en tour-layout */
}

/* Card salidas programadas (no sticky) */
.tour-departures-card {
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(3.5px);
	-webkit-backdrop-filter: blur(3.5px);
	border-radius: 1.2rem;
	padding: 2.5rem 2rem 2.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5rem;
	margin-bottom: 2rem;

	& .tour-departures-card__title {
		color: var(--colorBrandColor05);
		font-family: var(--font-display);
		font-size: 3rem;
		font-weight: 400;
		line-height: 1.2;
		text-transform: uppercase;
		text-align: center;
		margin: 0;
	}

	& .tour-departures-card__days {
		display: flex;
		align-items: center;
		width: 100%;
		border: 1px solid var(--colorBrandColor05);
		border-radius: 1.2rem;
		overflow: hidden;
		min-height: 6rem;
	}

	& .tour-departures-card__day {
		flex: 1;
		text-align: center;
		color: var(--colorBrandColor01);
		font-family: var(--font-body);
		font-size: 1.6rem;
		font-weight: 300;
		line-height: normal;
		padding: 1.4rem 0.6rem;
	}

	& .tour-departures-card__divider {
		width: 1px;
		align-self: stretch;
		background: var(--colorBrandColor05);
		flex-shrink: 0;
	}
}

/* Badge experiencia privada */
.tour-private-badge {
	color: var(--colorBrandColor05);
	font-family: var(--font-display);
	font-size: 3rem;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
	text-align: center;
	margin: 0 0 2rem;
}

/* Sticky: solo booking-card + compartir */
.tour-sidebar__sticky {
	position: sticky;
	top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	overflow: visible;

	&::after {
		content: '';
		position: absolute;
		bottom: -12rem;
		right: -6rem;
		width: 28rem;
		height: 36rem;
		background: url('../images/globo-victoria.webp') no-repeat center / contain;
		pointer-events: none;
		z-index: -1;
		animation: globo-float 5s ease-in-out infinite;
	}

	@media (max-width: 1024px) {
		position: static;

		&::after {
			display: none;
		}
	}
}

@keyframes globo-float {
	0%   { transform: translateY(0); }
	50%  { transform: translateY(-1.6rem); }
	100% { transform: translateY(0); }
}

/* ── Card de reserva ── */
.tour-booking-card {
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 1.2rem;
	padding: 3rem 2.4rem 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	text-transform: none;

	& .tour-booking-card__category {
		color: var(--colorBrandColor01);
		font-family: var(--font-body);
		font-size: 1.3rem;
		text-align: center;
		font-weight: 300;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		display: block;
	}

	& .tour-booking-card__title {
		color: var(--colorBrandColor05);
		text-align: center;
		font-family: var(--font-display);
		font-size: 3rem;
		font-weight: 400;
		line-height: 1.2;
		margin: 0;
		text-transform: none;
	}

	& .tour-booking-card__divider {
		border: none;
		border-top: 1px solid var(--colorBrandColor05);
		margin: 1rem 0;
	}
	
	& .tour-booking-card__divider--short {
		border-top: 1px solid var(--colorGrayGray05);
		width: 55%;
		width: 60%;
		margin: 0 auto;
	}

	& .tour-booking-card__excerpt {
		color: var(--colorBrandColor01);
		font-family: var(--font-body);
		font-size: 1.3rem;
		font-weight: 100;
		line-height: 1.6;
		text-align: center;
		margin: 0;
	}

	& .tour-booking-card__pricing {
		display: flex;
		flex-direction: column;
		/* gap: 0.4rem; */
	}

	& .tour-booking-card__desde {
		color: var(--colorBrandColor01);
		font-family: var(--font-body);
		font-size: 1.6rem;
		font-weight: 300;
		text-align: center;
	}

	& .tour-booking-card__price-current {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		gap: 0.4rem;
	}

	& .tour-booking-card__currency {
		color: var(--colorBrandColor05);
		font-family: var(--font-display);
		font-size: 2.5rem;
		font-weight: 400;
	}

	& .tour-booking-card__amount {
		color: var(--colorBrandColor05);
		font-family: var(--font-display);
		font-size: 6.4rem;
		font-weight: 400;
		line-height: 1;
	}

	& .tour-booking-card__price-before {
		color: var(--colorGraygray06, #7b7d84);
		font-family: var(--font-body);
		font-size: 1.4rem;
		font-weight: 500;
		letter-spacing: 0.1em;
		text-decoration: line-through;
		text-align: center;
	}

	& .tour-booking-card__payments {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.8rem;
		flex-wrap: wrap;
		margin-bottom: 1rem;
	}

	& .tour-booking-card__info {
		display: flex;
		flex-direction: column;
		gap: 1.3rem;
	}

	& .tour-booking-card__info-item {
		display: flex;
		align-items: flex-start;
		gap: .5rem;

		& img {
			flex-shrink: 0;
			margin-top: 0.2rem;
		}

		& div {
			display: flex;
			flex-direction: column;
			gap: 0.2rem;
		}
	}

	& .tour-booking-card__info-label {
		color: var(--colorGraygray06, #7b7d84);
		font-family: var(--font-body);
		font-size: 1.3rem;
		font-weight: 300;
		display: block;
	}

	& .tour-booking-card__info-value {
		color: var(--colorBrandColor01);
		font-family: var(--font-body);
		font-size: 1.6rem;
		font-weight: 100;
		display: block;
		line-height: 1.9rem;
		margin-top: -0.6rem;
	}

	& .tour-booking-card__cta {
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: center;
		padding: 1.2rem 3.6rem;
		background: var(--colorBrandColor05);
		border-radius: 1.2rem;
		color: var(--colorGraygray10, #20222a);
		font-family: var(--font-display);
		font-size: 2rem;
		font-weight: 650;
		line-height: normal;
		letter-spacing: 0.2em;
		font-style: italic;
		text-transform: uppercase;
		text-decoration: none;
		transition: opacity 0.2s ease, transform 0.2s ease;

		&:hover {
			opacity: 0.88;
			transform: translateY(-1px);
		}

		& .tour-booking-card__cta--secondary {
			
		}
	}
}

/* ── Compartir ── */
.tour-share {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	flex-direction: column;

	& .tour-share__label {
		color: var(--colorGraygray03, #bfc1c7);
		font-family: var(--font-body);
		font-size: 1.4rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}

	& .tour-share__icons {
		display: flex;
		align-items: center;
		gap: 1.2rem;
	}

	& .tour-share__link {
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0.85;
		transition: opacity 0.2s ease, transform 0.2s ease;

		&:hover {
			opacity: 1;
			transform: translateY(-2px);
		}
	}
}

.site-footer--tour::before {
	content: none;
}

/* ── Booking card: botón secundario (WhatsApp) y cotizar ── */
.tour-booking-card__cta--secondary {
	display:         block;
	margin-top:      1rem;
	text-align:      center;
	padding:         1.2rem 2rem  1rem !important;
	border:          2px solid var(--color-whatsapp);
	border-radius:   var(--radius-md, 4px);
	color: var(--color-whatsapp) !important;
	font-family: var(--font-body) !important;
	font-style: normal !important;
	font-size:       1.4rem  !important;
	font-weight:     500 !important;
	letter-spacing:  0.08em  !important;
	background:      none !important;
	transition:      opacity 0.2s;
}

.tour-booking-card__cta--secondary:hover {
	opacity: 1;
}

/* ── Hero Clásico: Swiper ocupa todo el hero ── */
.tour-hero--clasico .tour-hero-swiper {
	position: absolute;
	inset:    0;
	width:    100%;
	height:   100%;
	z-index:  0;
}

.tour-hero--clasico .swiper-wrapper,
.tour-hero--clasico .swiper-slide {
	width:  100%;
	height: 100%;
}

.tour-hero--clasico .tour-hero__image {
	width:               100%;
	height:              100%;
	background-size:     cover;
	background-position: center;
}

@media (max-width: 768px) {
	.tour-hero {
		padding-bottom: 6rem;

		& .tour-hero__title {
			font-size: clamp(2rem, 6vw, 3rem);
			padding: 1.6rem 2.8rem;
		}
	}

	.tour-layout {
		padding-top: 4rem;
		padding-bottom: 6rem;
	}

	.tour-content {
		& h2 { font-size: 2.8rem; }
		& p, & ul, & ol, & h3 { font-size: 1.6rem; }
	}
}