/* ==========================================================================
   SkyDreams Peru - Main Stylesheet
   Sistema: 1rem = 10px (font-size-base: 62.5%)
   Uso: 14px → 1.4rem | 16px → 1.6rem | 24px → 2.4rem
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variables / Design Tokens
   -------------------------------------------------------------------------- */
:root {
	--colorBrandColor01: #e8e5e2;
	--colorBrandColor02: #ece5e2;
	--colorBrandColor03: #c5ba9f;
	--colorBrandColor04: #9b897b;
	--colorBrandColor05: #db9600;
	--colorBrandColor06: #cb6120;
	--colorBrandColor07: #bf0811;
	--colorBrandColor08: #ba007c;
	--colorBrandColor09: #76aadb;
	--colorBrandColor10: #08144c;
	--colorGrayGray01: #edeef4;
	--colorGrayGray02: #d6d7de;
	--colorGrayGray03: #bfc1c7;
	--colorGrayGray04: #a9aab1;
	--colorGrayGray05: #92939a;
	--colorGrayGray06: #7b7d84;
	--colorGrayGray07: #64666d;
	--colorGrayGray08: #4e4f57;
	--colorGrayGray09: #373940;
	--colorGrayGray10: #20222a;

	--color-white: #ffffff;
	--color-blue: #062443;
	--color-whatsapp: #25D366;
	--color-black: #000000;

	/* Tipografía */
	--font-display: 'swear-display', serif;
	--font-body:    'museo-sans', sans-serif;

	/* Tamaños base: 62.5% → 1rem = 10px */
	--font-size-base: 62.5%;

	/* Escala tipográfica */
	--text-xs:   1.1rem;  /* 11px */
	--text-sm:   1.2rem;  /* 12px */
	--text-base: 1.4rem;  /* 14px */
	--text-md:   1.6rem;  /* 16px */
	--text-lg:   1.8rem;  /* 18px */
	--text-xl:   2.0rem;  /* 20px */
	--text-2xl:  2.4rem;  /* 24px */
	--text-3xl:  3.0rem;  /* 30px */
	--text-4xl:  3.6rem;  /* 36px */
	--text-5xl:  4.8rem;  /* 48px */
	--text-6xl:  6.0rem;  /* 60px */

	/* Layout */
	--container-width:   120rem;
	--container-padding: 2.4rem;

	/* Alturas */
	--top-bar-height:     4.0rem;
	--main-header-height: 10.0rem;
	--header-total:       14.0rem;

	/* Radios */
	--radius-sm: 0.8rem;
	--radius-md: 1.2rem;
	--radius-lg: 1.8rem;
	--radius-xl: 2.6rem;

	/* Sombras */
	--shadow-sm: 0 0.1rem 0.2rem rgba(0,0,0,0.06);
	--shadow-md: 0 0.4rem 1.2rem rgba(0,0,0,0.12);
	--shadow-lg: 0 1.0rem 3.0rem rgba(0,0,0,0.18);

	/* Transiciones */
	--transition-fast: 0.15s ease;
	--transition-base: 0.25s ease;
	--transition-slow: 0.4s ease;

	/* Carrusel */
	--logos-carousel-duration: 30s;
}


/* --------------------------------------------------------------------------
   Reset y Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: var(--font-size-base);
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-body);
	font-size: var(--text-md);
	line-height: 1.6;
	color: var(--colorBrandColor02);
	background-color: var(--color-white);
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

ul, ol {/* list-style: none; */}

button {
	cursor: pointer;
	border: none;
	background: none;
	font-family: inherit;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	line-height: 1.15;
	color: var(--colorBrandColor10);
}

p {
	font-family: var(--font-body);
	color: var(--colorGrayGray10);
	line-height: 2rem;
	font-weight: 100;
}

.container {
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}


/* ==========================================================================
   HEADER
   ========================================================================== */

/* --------------------------------------------------------------------------
   Barra Superior
   -------------------------------------------------------------------------- */
.top-bar {
	/* position: absolute; */
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	height: var(--top-bar-height);
	background-color: var(--colorBrandColor10);
	font-size: var(--text-sm);
	color: rgba(255,255,255,0.85);


	& .top-bar__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100%;
	}

	& .top-bar__left,
	& .top-bar__right {
		display: flex;
		align-items: center;
		gap: 1.6rem;
	}

	& .widget {
		display: flex;
		align-items: center;
		gap: 1.2rem;

		& p,
		& span,
		& a {
			font-size: var(--text-sm);
			font-weight: 300;
			color: rgba(255,255,255,0.85);
			display: flex;
			align-items: center;
			gap: 0.4rem;
		}

		& a:hover {
			color: var(--color-white);
		}

		& nav ul,
		& ul {
			display: flex;
			gap: 1.6rem;
			list-style: none;
		}
	}

	& svg {
		width: 1.8rem;
		height: 1.8rem;
		flex-shrink: 0;
	}

	& .top-bar__right .widget a svg {
		width: 2.4rem;
		height: 2.4rem;
	}
}


/* --------------------------------------------------------------------------
   Header Principal
   -------------------------------------------------------------------------- */
.site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 190;
	/* background: transparent; */
	/* transition: background var(--transition-base), box-shadow var(--transition-base); */

	&.is-scrolled {
		/* background: rgba(8,20,76,0.92); */
		/* backdrop-filter: blur(0.8rem); */
		/* box-shadow: var(--shadow-md); */

		& .main-navigation .nav-menu {
			& li a {
				/* color: var(--colorBrandColor02); */
				justify-content: center;
				
				&:hover {
					color: var(--colorBrandColor05);
				}
			}

			& li.current-menu-item > a {
				color: var(--colorBrandColor05);
			}
		}

		& .menu-toggle {
			border-color: var(--colorGrayGray02);

			& .menu-toggle__bar {
				background: var(--colorBrandColor01);
			}
		}
	}
}

.main-header {
	height: var(--main-header-height);
	position: fixed;
	top: calc(var(--top-bar-height) + 1rem);
	left: 0;
	right: 0;
	z-index: 999;
	transform: translateY(0);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
	            top 0.3s ease,
	            background 0.3s ease,
	            box-shadow 0.3s ease;

	&.is-hidden {
		transform: translateY(calc(-100% - var(--top-bar-height) - 2rem));
	}

	#masthead.top-bar-gone & {
		top: 1rem;
	}

	& .main-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100%;
		gap: 2.4rem;

		border-radius: var(--radius-md);
		background: rgba(3, 6, 22, 0.70);
		backdrop-filter: blur(6px);
	}
}

.site-branding {
	flex-shrink: 0;
}

.site-logo-link {
	display: block;

	& img {
		height: 8.2rem;
		width: auto;
		display: block;
	}
}

.site-name {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: 700;
	color: var(--color-white);
}

.main-navigation {
	flex: 1;
	display: flex;
	justify-content: flex-end;

	& .nav-menu {
		display: flex;
		align-items: center;
		gap: 0;
		list-style: none;

		& li {
			& a {
				display: flex;
				align-items: center;
				padding: 1.4rem 1.6rem;
				font-family: var(--font-body);
				font-size: var(--text-base);
				font-weight: 500;
				color: var(--color-white);
				letter-spacing: 0.03em;
				transition: color var(--transition-fast);
				white-space: nowrap;

				&:hover {
					color: var(--colorBrandColor05);
				}
			}

			&.current-menu-item > a {
				color: var(--colorBrandColor05);
			}

			&.menu-item-destacado > a {
				background-color: #00000000;
				color: var(--color-whatsapp);
				border: .2rem solid var(--color-whatsapp);
				border-radius: var(--radius-md);
				padding: 1.0rem 2.0rem;
				font-weight: 700;
				margin-left: 0.8rem;
				transition: background var(--transition-fast), transform var(--transition-fast);

				&:hover {
					background-color: var(--color-whatsapp);
					color: var(--colorBrandColor02) !important;
					transform: translateY(-0.1rem);
				}
			}
		}
	}
}

.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	width: 4.0rem;
	height: 4.0rem;
	padding: 0.8rem;
	background: transparent;
	border: 0.2rem solid rgba(255,255,255,0.5);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition-fast);

	&.is-active {
		& .menu-toggle__bar:nth-child(1) { transform: translateY(0.7rem) rotate(45deg); }
		& .menu-toggle__bar:nth-child(2) { opacity: 0; }
		& .menu-toggle__bar:nth-child(3) { transform: translateY(-0.7rem) rotate(-45deg); }
	}
}

.menu-toggle__bar {
	display: block;
	width: 2.2rem;
	height: 0.2rem;
	background: var(--color-white);
	border-radius: 0.1rem;
	transition: transform var(--transition-base), opacity var(--transition-base);
}


/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero-section {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 60rem;
	overflow: hidden;
	display: flex;
	align-items: center;
	z-index: 0;
	

	&::before {
		content: "";
		background: url(../images/clouds-bottom-brandColor02.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;}
}

.hero-preloader {
	position: absolute;
	inset: 0;
	z-index: 10;
	background-color: var(--colorBrandColor10);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.6s ease, visibility 0.6s ease;

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

	& .hero-preloader__spinner {
		color: var(--color-white);
		opacity: 0.7;
		animation: spin 1s linear infinite;
	}
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

.hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 1;
}

.hero-video-placeholder {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--colorBrandColor10);
}

.hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	/** background: linear-gradient(
		to bottom,
		rgba(0,0,0,0.35) 0%,
		rgba(0,0,0,0.2) 50%,
		rgba(0,0,0,0.5) 100%
	); **/
}

.hero-content {
	position: relative;
	z-index: 3;
	width: 100%;
	padding-top: var(--header-total);
}

.hero-text {
	max-width: 67.0rem;
}

.hero-subtitle {
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--colorBrandColor05);
	margin-bottom: 1.2rem;
}

.hero-title {
	font-family: var(--font-display);
	font-size: var(--text-5xl);
	font-weight: 700;
	color: var(--color-white);
	line-height: 1.1;
	margin-bottom: 2.0rem;
}

.hero-description {
	font-size: var(--text-lg);
	color: rgba(255,255,255,0.85);
	line-height: 1.7;
	margin-bottom: 3.2rem;
	max-width: 55rem;
}


/* ==========================================================================
   SECCIONES DE TOURS - FONDO CLARO
   ========================================================================== */
.tours-section {
	padding: 8.0rem 0;

	&.tours-section--light {
		background-color: var(--color-white);

		&:nth-of-type(even) {
			background-color: var(--colorBrandColor02);
		}
	}

	& .tours-section__layout {
		display: grid;
		grid-template-columns: 3fr 2fr;
		gap: 0;
		align-items: start;
	}

	& .tours-section__info {
		display: flex;
		flex-direction: column;
		gap: 2.6rem;
		z-index: 2;
		
		& h2 {
			font-size: calc(var(--text-5xl) + 0.4rem);
			font-weight: 400;
			line-height: 5.2rem;
		}
	}

	& .tours-section__mini-title {
		display: inline-block;
		font-family: var(--font-body);
		font-size: var(--text-xs);
		font-weight: 600;
		letter-spacing: .1rem;
		text-transform: uppercase;
		color: var(--colorGrayGray06);
	}

	& .tours-section__description {
		font-size: var(--text-md);
		color: var(--colorGrayGray06);
		line-height: 1.5;

		> p {
			margin-top: 1rem;
		}
	}

	& .tours-section__cards {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2.4rem;
		height: 100%;
	}

}

/* Imagen decorativa de categoría en .tours-section__cards::before */
.tours-section__cards {
	position: relative;
	overflow: visible;

	&::before {
		content: '';
		position: absolute;
		top: -4rem;
		right: -25rem;
		width: 120rem;
		height: 110%;
		background-image: var(--section-img, none);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: var(--radius-lg);
		transform: translateY(var(--parallax-y, 0px));
		pointer-events: none;
		z-index: 1;
		will-change: transform;
	}

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

	& > * { position: relative; z-index: 1; }
}


/* ==========================================================================
   CARD DE TOUR
   ========================================================================== */
.tour-card {
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--colorGrayGray10);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition-base), box-shadow var(--transition-base);
	width: 28rem;


	&:hover {
		transform: translateY(-0.4rem);
		box-shadow: var(--shadow-lg);

		& .tour-card__image img {
			transform: scale(1.04);
		}

		& .tour-card__cta {
			background: var(--colorBrandColor05);
			color: var(--color-white);
		}
	}

	& .tour-card__link {
		display: flex;
		flex-direction: column;
		height: 100%;
		color: inherit;
		
	}

	& .tour-card__image {
		position: relative;
		aspect-ratio: 4/5;
		overflow: hidden;
		padding: 1.5rem;
		overflow: hidden;

		& img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform var(--transition-slow);
			border-radius: var(--radius-md);
			
		}

		& .tour-card__image-placeholder {
			width: 100%;
			height: 100%;
			background: var(--colorBrandColor01);
		}

		& .tour-card__badge {
			position: absolute;
			top: 2.2rem;
			left: 2.2rem;
			display: inline-flex;
			align-items: center;
			gap: 0.6rem;
			font-family: var(--font-body);
			font-size: var(--text-sm);
			font-weight: 300;
			letter-spacing: 0.05em;
			padding: 0.8rem 1.2rem 0.8rem 0.8rem;
			border-radius: var(--radius-md);
			backdrop-filter: blur(0.7rem);
			
			

			& img {
				width: 1.6rem;
				height: 1.6rem;
				flex-shrink: 0;
				padding: 0;
			}

			&.tour-card__badge--compartido {
				background: rgba(255,255,255,0.85);
				color: var(--colorBrandColor10);
			}

			&.tour-card__badge--privado {
				background: rgba(32, 34, 42, 0.70);
				color: var(--colorBrandColor05);
				border: 1px solid rgba(219,150,0,0.6);
			}
		}
	}

	& .tour-card__body {
		position: relative;
		display: flex;
		justify-content: space-evenly;
		gap: 1.0rem;
		padding: 1.6rem 2.5rem;
		flex: 1;
		background: var(--colorBrandColor05);
		overflow: hidden;
		
		

		&::after {
			content: '';
			position: absolute;
			bottom: -2rem;
			left: -6rem;
			width: 27.8rem;
			height: 14.8rem;
			background: url('../images/cloud-button.svg') no-repeat center / contain;
			opacity: 1;
			pointer-events: none;
			z-index: 0;
		}
	}

	& .tour-card__name {
		padding: 0 1.5rem 1rem;
		
		& .tour-card__title {
		font-family: var(--font-doby);
		font-size: var(--text-xl);
		font-weight: 700;
		color: var(--colorBrandColor02);
		line-height: 1.3;
		text-transform: uppercase;
		}
	}

	& .tour-card__pricing {
		display: flex;
		flex-direction: column;
		gap: 0;
		z-index: 1;
		
		

		& .tour-card__price-before {
			font-size: var(--text-sm);
			font-weight: 300;
			color: var(--colorBrandColor02);
			text-decoration: line-through;
			line-height: 1rem;
		}

		& .tour-card__price-current {
			display: flex;
			align-items: flex-start;
			gap: 0.4rem;
			color: var(--colorBrandColor10);
		}

		& .tour-card__price-currency {
			font-family: var(--font-body);
			font-size: calc(var(--text-xl) + 0.2rem);
			font-weight: 900;
			line-height: 2.8rem;
		}

		& .tour-card__price-amount {
			font-family: var(--font-body);
			font-size: var(--text-4xl);
			font-weight: 900;
			line-height: 1;
			color: var(--colorBrandColor10);
		}

		& .tour-card__price-label {
			font-size: var(--text-xs);
			color: var(--colorBrandColor10);
			text-transform: uppercase;
			font-weight: 300;
			margin-top: -.6rem;
		}
	}

	& .tour-card__cta {
		display: flex;
		align-items: center;
		gap: 0.8rem;
		height: fit-content;
		/* margin-top: auto; */
		font-family: var(--font-body);
		font-size: var(--text-md);
		font-weight: 600;
		color: var(--colorBrandColor01);
		padding: 1rem 1rem;
		background: var(--colorBrandColor05);
		border-radius: var(--radius-md);
		transition: background var(--transition-fast), color var(--transition-fast);
		text-align: center;
		justify-content: center;
		border: .2rem solid var(--colorBrandColor01);
		z-index: 1;

		& svg {
			width: 2.4rem;
			height: 2.4rem;
			flex-shrink: 0;
		}
	}

	/* Variante: destacada */
	&.tour-card--featured .tour-card__image {
		aspect-ratio: 3/4;
		/* padding: 1.5rem; */
		/* border-radius: var(--radius-md); */
	}

	/* Variante: premium */
	&.tour-card--premium {
		background: var(--colorGrayGray10);
		/* border: 0.1rem solid rgba(255,255,255,0.1); */
		

		& .tour-card__title          { color: var(--color-white); }
		& .tour-card__price-before   {/* color: rgba(255,255,255,0.5); */}
		& .tour-card__price-amount   {/* color: var(--colorBrandColor05); */}
		& .tour-card__price-label    {/* color: rgba(255,255,255,0.5); */}
		& .tour-card__price-currency {/* color: var(--color-white); */}

		& .tour-card__cta {
			background: rgba(255,255,255,0.1);
			color: var(--color-white);
		}

		&:hover .tour-card__cta {
			background: var(--colorGrayGray10);
			color: var(--colorBrandColor01);
			border-color: var(--colorGrayGray10);
		}
	}
}


/* ==========================================================================
   SECCIÓN PREMIUM (fondo oscuro)
   ========================================================================== */
.premium-section {
	position: relative;
	padding: 12rem 0 8rem;
	background-color: var(--color-blue);
	color: var(--color-white);
	z-index: 0;


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

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

	& .premium-section__header {
		text-align: center;
		margin-bottom: 6.4rem;
	}

	& .premium-section__label {
		display: block;
		font-family: var(--font-body);
		font-size: var(--text-xs);
		letter-spacing: 0.3em;
		color: var(--colorBrandColor05);
		margin-bottom: 0.8rem;
	}

	& .premium-section__title {
		font-family: var(--font-display);
		font-size: calc(var(--text-5xl) + 1rem);
		font-weight: 400;
		color: var(--colorBrandColor05);
		letter-spacing: 1.1rem;
		position: relative;
		display: inline-block;
		padding: 2.2rem 4.4rem;

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

.premium-category {
	position: relative;
	margin-bottom: 6.4rem;
	z-index: 2;

	&:last-child { margin-bottom: 0; }

	/* Zigzag: impares → visual-space col-1, content col-2 (orden natural HTML) */
	/* Pares   → content col-1, visual-space col-2                             */
	&:nth-child(odd) {
		& .premium-category__visual-space {
			grid-column: 2;
			grid-row: 1;
		}
		& .premium-category__content      { grid-column: 1; grid-row: 1; }

		& .premium-category__mini-title,
		& .premium-category__title,
		& .premium-category__description { text-align: left; }
	}

	&:nth-child(even) {
		& .premium-category__visual-space {
			&::before {
				/* right: -35rem; */
				width: 110rem;
			}
		}
		
		& .premium-category__layout {grid-template-columns: 2fr 3fr;}
		& .premium-category__content {align-items: end;}
		
		& .premium-category__mini-title,
		& .premium-category__title,
		& .premium-category__description { text-align: right; }
	}

	& .premium-category__layout {
		display: grid;
		grid-template-columns: 3fr 2fr;
		/* gap: 4.8rem; */
		align-items: start;
	}

	& .premium-category__visual-space {
		position: relative;
		min-height: 20rem;
		height: 100%;
		border-radius: var(--radius-lg);
		z-index: 1;

		&::before {
			content: '';
			position: absolute;
			top: -4rem;
			right: -34rem;
			width: 130rem;
			height: 120%;
			background-image: var(--section-img, none);
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			transform: translateY(var(--parallax-y, 0px));
			pointer-events: none;
			z-index: 1;
			will-change: transform;
		}
		
		&::after {
			content: '';
			position: absolute;
			top: 10rem;
			right: -10rem;
			width: 170rem;
			height: 120%;
			background: url(../images/cloud-back02.webp) no-repeat center;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			border-radius: var(--radius-lg);
			transform: translateX(var(--parallax-after-x, 0px)) translateY(var(--parallax-after-y, 0px));
			pointer-events: none;
			z-index: 0;
			will-change: transform;
		}
	}

	& .premium-category__content {
		display: flex;
		flex-direction: column;
		gap: 3.2rem;
		width: 100%;
		align-items: start;
		z-index: 2;
	}

	& .premium-category__info-inner {
		display: flex;
		flex-direction: column;
		gap: .2rem;
	}

	& .premium-category__mini-title {
		font-family: var(--font-body);
		font-size: var(--text-xs);
		font-weight: 600;
		letter-spacing: 0.1rem;
		text-transform: uppercase;
		color: var(--colorGrayGray03);
	}

	& .premium-category__title {
		font-family: var(--font-display);
		font-size: var(--text-4xl);
		font-weight: 700;
		color: var(--color-white);
		line-height: 1.15;
	}

	& .premium-category__description {
		font-size: var(--text-base);
		color: rgba(255,255,255,0.7);
		line-height: 1.7;
		text-align: right;

		& h2 {
			color: var(--colorBrandColor05);
			font-weight: 400;
			font-size: calc(var(--text-5xl) + 0.6rem);
			line-height: 5.2rem;
		}

		& p {
			color: var(--colorBrandColor01);
			margin-top: 1.5rem;
			font-size: var(--text-md);
		}
	}

	& .premium-category__cards {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2.0rem;
		width: fit-content;
	}
}

#premium-propuesta-de-matrimonio-en-globo-aerostatico .premium-category__visual-space::after {
	top: 10rem;
	right: -90rem;
	height: 135%;
	background: url(../images/cloud-back01.webp) no-repeat center;
	transform: translateX(var(--parallax-x-right, 0px)) translateY(var(--parallax-after-y, 0px));
}

/* ==========================================================================
   SECCIÓN TESTIMONIOS
   ========================================================================== */
.testimonials-section {
	padding: 8.0rem 0;
	/* background-color: var(--colorBrandColor01); */
	

	& .testimonials-section__inner {
		width: 100%;
	}

	& .trustindex-widget,
	& > * {
		width: 100%;
	}
}


/* ==========================================================================
   SECCIÓN ABOUT
   ========================================================================== */
.about-section {
	padding: 8.0rem 0;
	background-color: var(--color-white);

	& .about-section__inner {
		
		& .wp-block-columns {
			align-items: center;
			gap: 4.0rem;
		}

		& .wp-block-image img {
			max-width: 25.0rem;
			height: auto;
		}

		& h1 {
			font-family: var(--font-display);
			font-size: calc(var(--text-5xl) + 0.4rem);
			color: var(--colorBrandColor10);
			margin-bottom: 1.6rem;
			font-weight: 400;
		}

		& p {
			/* font-size: var(--text-base); */
			/* color: var(--colorGrayGray10); */
			/* line-height: 1.8; */
		}
	}
}

@media (min-width: 1024px) {
    .about-section__inner {
		width: 90%;
		margin: 0 auto;
	}
}

/* ==========================================================================
   CARRUSEL DE LOGOS
   ========================================================================== */
.logos-carousel-section {
	position: relative;
	padding: 10rem 0 6rem;
	/* background-color: var(--colorBrandColor01); */
	overflow: hidden;
	/* border-top: 0.1rem solid var(--colorGrayGray02); */
	/* border-bottom: 0.1rem solid var(--colorGrayGray02); */
	z-index: 2;

	&:hover .logos-carousel-track {
		animation-play-state: paused;
	}

	& .logos-carousel-track-wrapper {
		overflow: hidden;
		width: 100%;
	}

	& .logos-carousel-track {
		display: flex;
		align-items: center;
		width: max-content;
		animation: logoScroll var(--logos-carousel-duration) linear infinite;
	}

	& .logos-carousel-item {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		margin-right: 6.4rem;

		& img {
			height: 5.0rem;
			width: auto;
			min-width: 8rem;
			max-width: 16rem;
			object-fit: contain;
			/* filter: grayscale(1); */
			/* opacity: 0.65; */
			/* transition: filter var(--transition-base), opacity var(--transition-base); */
			
			
			
			
			

			&:hover {
				filter: grayscale(0);
				opacity: 1;
			}
		}
	}
}

@keyframes logoScroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}


/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
	position: relative;
	background-color: var(--colorBrandColor02);
	color: var(--color-white);
	
	&::before {
		content: "";
		background: url(../images/clouds-top-White.png) repeat-x center;
		height: 25rem;
		width: 100%;
		position: absolute;
		left: 0;
		top: -1px;
		z-index: 0;
		background-size: auto 25rem;
		animation: animatedBackground 500s linear infinite;
	}

	& .widget {
		& h2 {
			font: 700 1.8rem/2rem var(--font-body);
			text-transform: uppercase;
			color: var(--colorGrayGray10);
			margin-bottom: 1.7rem;
		}
		& ul {
			flex-direction: column;
			gap: 0.5rem;
			padding-inline-start: 0;

			& li {
				list-style-position: inside;
				list-style-type: disc;
				color: var(--colorGrayGray10);

				& a {
					font-family: var(--font-body);
					font-size: var(--text-md);
					color: var(--colorGrayGray10);
					transition: color var(--transition-fast);
					
					&:hover { color: var(--colorBrandColor05); }

					& svg {
						width: 2.4rem;
						height: 2.4rem;
						flex-shrink: 0;
						opacity: 0.7;
					}
				}

				& svg {
					width: 2.4rem;
					height: 2.4rem;
					flex-shrink: 0;
					opacity: 0.7;
				}
			}
		}

		& p {
			display: inline-flex;
			align-items: center;
			gap: .7rem;
			font: 300 1.6rem/1.8rem var(--font-body);
			color: var(--colorGrayGray10);
			line-height: 1.7;
		}

		& a {
			font: 300 1.6rem/1.8rem var(--font-body);
			color: var(--colorGrayGray10);
			transition: color var(--transition-fast);

			&:hover { color: var(--colorBrandColor05); }
		}
	}
}

.footer-widgets-area {
	padding: 6.4rem 0 5.8rem;

	& .footer-widgets-grid {
		display: grid;
		grid-template-columns: 17rem 1fr 1fr 1fr;
		gap: 3rem;
	}
}

.footer-col {
	display: flex;
	flex-direction: column;

	/* Corrige width: NaN que WordPress genera en SVGs sin dimensiones declaradas */
	& img {
		/* width: auto !important; */
		max-width: 100%;
		height: auto;
	}

	& .wp-block-image img {
		max-width: 16rem;
		height: auto;
	}
}

.footer-widget-title {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--color-white);
	margin-bottom: 2.0rem;
	padding-bottom: 1.2rem;
	border-bottom: 0.2rem solid var(--colorBrandColor05);
	line-height: 1.3;
}

.footer-social-icons {
	display: flex;
	gap: 1.2rem;
	margin-top: 1.6rem;

	& a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 3.6rem;
		height: 3.6rem;
		border-radius: 50%;
		background: rgba(255,255,255,0.1);
		color: var(--color-white);
		transition: background var(--transition-fast);

		&:hover {
			background: var(--colorBrandColor05);
			color: var(--colorBrandColor10);
		}

		& svg {
			width: 2.0rem;
			height: 2.0rem;
		}
	}
}

.footer-divider {
	& .container {
		padding-top: 0;
		padding-bottom: 0;
	}
}

.footer-hr {
	border: none;
	border-top: 0.1rem solid rgba(255,255,255,0.1);
	margin: 0;
}

.footer-copyright {
	padding: 2.4rem 0;

	& .footer-copyright__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 2.4rem;
		flex-wrap: wrap;
	}

	& .footer-copyright__logo img {
		height: 6.0rem;
		width: auto;
		filter: brightness(0) invert(1);
		opacity: 0.7;
	}

	& .footer-copyright__text p {
		font-family: var(--font-body);
		font-size: var(--text-md);
		color: var(--colorBrandColor03);
	}

	& .footer-copyright__payments {
		display: flex;
		align-items: center;
		gap: 0.8rem;
		flex-wrap: wrap;

		& svg {
			opacity: 0.75;
			transition: opacity var(--transition-fast);
			border-radius: 0.4rem;

			&:hover { opacity: 1; }
		}
	}
}


/* ==========================================================================
   PÁGINAS INTERIORES
   ========================================================================== */
#content {
	margin-top: var(--header-total);
	padding: 4.0rem 0;
}

.entry-title {
	font-family: var(--font-display);
	font-size: var(--text-4xl);
	margin-bottom: 2.4rem;
}

.entry-content {
	font-size: var(--text-md);
	line-height: 1.8;

	& h2 { font-size: var(--text-3xl); margin: 3.2rem 0 1.6rem; }
	& h3 { font-size: var(--text-2xl); margin: 2.4rem 0 1.2rem; }
	& p  { margin-bottom: 1.6rem; }

	& ul, & ol {
		padding-left: 2.4rem;
		margin-bottom: 1.6rem;
	}

	& li { margin-bottom: 0.8rem; }

	& a {
		color: var(--colorBrandColor05);

		&:hover { text-decoration: underline; }
	}
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
	.footer-widgets-area .footer-widgets-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.tours-section {
		& .tours-section__layout {
			grid-template-columns: 1fr;
			gap: 3.2rem;
		}

		& .tours-section__cards {
			grid-template-columns: repeat(2, 1fr);
			
		}
	}

	.premium-section .premium-section__title {
		font-size: var(--text-4xl);
	}

	.premium-category .premium-category__layout {
		grid-template-columns: 1fr;
		gap: 3.2rem;
	}

	.hero-title { font-size: var(--text-4xl); }
}

@media (max-width: 768px) {
	.site-header {
	    top: 0;
	}
	.top-bar { display: none; }
	.main-header {
		padding: 0 1.5rem;
	    top: 1rem;
	}
	.main-navigation {
		display: none;
		position: fixed;
		top: var(--header-total);
		left: 0;
		right: 0;
		background: var(--colorGrayGray10);
		padding: 2.0rem var(--container-padding);
		flex-direction: column;
		z-index: 180;
		box-shadow: var(--shadow-lg);
		border-radius: var(--radius-md);

		&.is-open { display: flex; }

		& .nav-menu {
			flex-direction: column;
			gap: 0;
			width: 100%;

			& li {
				width: 100%;
				
				& a {
					padding: 1.2rem 0;
					border-bottom: 0.1rem solid rgba(255,255,255,0.1);
					font-size: var(--text-md);
					
				}

				&.menu-item-destacado > a {
					margin-left: 0;
					margin-top: 1.2rem;
					text-align: center;
					justify-content: center;
				}
			}
		}
	}

	.menu-toggle { display: flex; }

	.hero-title       { font-size: var(--text-3xl); }
	.hero-description { font-size: var(--text-base); }

	.tours-section {
		padding: 5.6rem 0;

		& .tours-section__title   { font-size: var(--text-3xl); }
		& .tours-section__cards {
			grid-template-columns: 1fr;

			&::before {
				top: -2rem;
				right: auto;
				left: 50%;
				transform: translateX(-50%) translateY(var(--parallax-y, 0px));
				width: 90rem;
				height: 110%;
			}
		}
	}

	.premium-section {
		padding: 9.6rem 0 5.6rem;

		& .premium-section__title { font-size: var(--text-2xl); padding: 2.2rem 0.4rem;}
	}

	.premium-category, .tours-section {
		& .premium-category__layout {
			grid-template-columns: 1fr !important;

			& .premium-category__visual-space { display: none; }
			& .premium-category__content      { order: 1 !important; }
		}

		& .premium-category__mini-title,
		& .premium-category__title,
		& .premium-category__description { text-align: left; }

		& .premium-category__cards, .tours-section__info  {
			grid-template-columns: 1fr; 
			
			& .tour-card {
				width: 100%;

				& .tour-card__name h3 {
					font-size: var(--text-2xl);
					text-align: center;
				}
				
				& .tour-card__body {
			        justify-content: space-around;

					> div, > span {
						scale: 1.3;
					}
			    }
			}
		}
		& .premium-category__title  { font-size: var(--text-3xl); }
	}

	.footer-widgets-area .footer-widgets-grid {
		grid-template-columns: 1fr;
		gap: 3.2rem;
	}

	.footer-copyright .footer-copyright__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.6rem;
	}
}

@media (max-width: 480px) {
	.tours-section .tours-section__layout .tour-card{
		width: 100%;
	}
	
	:root { --container-padding: 1.6rem; }

	.top-bar { display: none; }

	.hero-title { font-size: var(--text-2xl); }

	.tours-section .tours-section__title  { font-size: var(--text-2xl); }
	.premium-category .premium-category__title { font-size: var(--text-2xl); }
	.tour-card .tour-card__pricing .tour-card__price-amount { font-size: var(--text-3xl); }
}


/* ==========================================================================
   UTILIDADES
   ========================================================================== */
.sr-only {
	position: absolute;
	width: 0.1rem;
	height: 0.1rem;
	padding: 0;
	margin: -0.1rem;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* ==========================================================================
   404
   ========================================================================== */

.page-404-main {
	min-height: 70vh;
	display: flex;
	align-items: center;
}

.page-404 {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-block: 8rem;
	padding-top: 20rem;
}

.page-404__number {
	font-family: var(--font-display);
	font-size: clamp(10rem, 20vw, 20rem);
	font-weight: 400;
	line-height: 1;
	color: var(--colorBrandColor05);
	/* opacity: 0.15; */
	margin-bottom: -2rem;
	user-select: none;
}

.page-404__title {
	font-family: var(--font-display);
	font-size: clamp(2.8rem, 5vw, 5rem);
	font-weight: 400;
	text-transform: uppercase;
	color: var(--colorBrandColor04);
	margin-bottom: 1.6rem;
}

.page-404__text {
	font-size: 1.6rem;
	color: var(--colorGraygray03, #bfc1c7);
	max-width: 48rem;
	margin-bottom: 4rem;
}

.page-404__cta {
	display: inline-block;
	padding: 1.4rem 3.2rem;
	background: var(--colorBrandColor05);
	color: var(--colorBrandColor02);
	font-family: var(--font-body);
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--radius-md);
	transition: opacity 0.2s;

	&:hover {
		opacity: 0.85;
	}
}