/* XERPA home: editorial scroll cue + opening statement */
body.home.page-id-8 .elementor-element-000003f6 {
	position: relative;
	isolation: isolate;
}

body.home.page-id-8 #problema {
	scroll-margin-top: 20px;
}

.xerpa-scroll-cue {
	--xerpa-cue-accent: #b7dc72;
	position: absolute;
	right: max(32px, calc((100vw - 1180px) / 2));
	bottom: 25px;
	z-index: 8;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	min-width: 48px;
	min-height: 96px;
	padding: 7px 10px 5px;
	color: rgba(246, 244, 249, 0.68);
	text-decoration: none;
	opacity: 0;
	transform: translate3d(0, 10px, 0);
	transition:
		opacity 0.55s ease,
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		color 0.25s ease;
}

.xerpa-scroll-cue--page {
	top: calc(100svh - 121px);
	bottom: auto;
}

.xerpa-scroll-cue.is-ready {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.xerpa-scroll-cue.is-dismissed {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate3d(0, 10px, 0);
	transition:
		opacity 0.24s ease,
		transform 0.3s ease,
		visibility 0s linear 0.3s;
}

.xerpa-scroll-cue--autoplay {
	animation: xerpa-cue-enter 0.7s cubic-bezier(0.22, 1, 0.36, 1) 3.35s both;
}

.xerpa-scroll-cue__track {
	position: relative;
	display: block;
	width: 1px;
	height: 48px;
	overflow: hidden;
	background: rgba(246, 244, 249, 0.22);
}

.xerpa-scroll-cue__runner {
	position: absolute;
	inset: 0;
	display: block;
	background: linear-gradient(
		to bottom,
		rgba(183, 220, 114, 0) 0%,
		var(--xerpa-cue-accent) 42%,
		var(--xerpa-cue-accent) 100%
	);
	transform: translate3d(0, -115%, 0);
	animation: xerpa-cue-travel 2.15s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.xerpa-scroll-cue__arrow {
	display: block;
	width: 9px;
	height: 9px;
	margin-top: -6px;
	border-right: 1.5px solid var(--xerpa-cue-accent);
	border-bottom: 1.5px solid var(--xerpa-cue-accent);
	transform: rotate(45deg);
}

.xerpa-scroll-cue__label {
	margin-top: 13px;
	font-family: Inter, "Helvetica Neue", sans-serif;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.23em;
	text-indent: 0.23em;
	text-transform: uppercase;
}

.xerpa-scroll-cue:hover {
	color: #f6f4f9;
}

.xerpa-scroll-cue:focus-visible {
	border-radius: 8px;
	outline: 2px solid var(--xerpa-cue-accent);
	outline-offset: 4px;
	color: #f6f4f9;
}

@keyframes xerpa-cue-enter {
	from {
		opacity: 0;
		transform: translate3d(0, 10px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes xerpa-cue-travel {
	0% {
		transform: translate3d(0, -115%, 0);
	}
	52%,
	100% {
		transform: translate3d(0, 115%, 0);
	}
}

/* Hero eyebrow: clean left edge, no blinking markers, 20% larger. */
body.home.page-id-8 .elementor-element-000003eb {
	width: 100%;
	align-self: flex-start;
	text-align: left;
}

body.home.page-id-8 .elementor-element-000003eb .elementor-widget-container,
body.home.page-id-8 .elementor-element-000003eb p {
	margin-left: 0 !important;
	padding-left: 0 !important;
	text-align: left !important;
}

body.home.page-id-8 .elementor-element-000003eb p {
	font-size: 1.2em !important;
}

body.home.page-id-8 .elementor-element-000003eb .xerpa-signal,
body.home.page-id-8 .elementor-element-000003eb .xerpa-audience::after {
	display: none !important;
	content: none !important;
	animation: none !important;
}

/* Hero title: pure opacity fade after the welcome cover clears. */
body.home.page-id-8.xerpa-intro-active .elementor-element-000003f6 h1 {
	opacity: 0;
}

body.home.page-id-8.xerpa-intro-revealing .elementor-element-000003f6 h1 {
	animation: xerpa-hero-title-fade 0.68s ease-out 0.18s both;
	will-change: opacity;
}

@keyframes xerpa-hero-title-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Opening statement */
.xerpa-intro {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: grid;
	place-items: center;
	padding: clamp(28px, 6vw, 96px);
	overflow: hidden;
	isolation: isolate;
	background: #07070b;
	color: #f6f4f9;
	pointer-events: none;
	opacity: 1;
	visibility: visible;
	transition:
		opacity 0.18s ease,
		visibility 0s linear 0.18s;
}

.xerpa-intro--autoplay {
	animation: xerpa-intro-dismiss 0.52s cubic-bezier(0.22, 1, 0.36, 1) 3.35s forwards;
}

.xerpa-intro::before {
	content: "";
	position: absolute;
	inset: -3%;
	z-index: 0;
	pointer-events: none;
	background: url("https://xerpadigital.com/wp-content/uploads/2026/10/Montana-%E2%80%94-animacion-de-entrada-XERPA.webp") 62% 54% / cover no-repeat;
	opacity: 0.4;
	filter: grayscale(1) saturate(0.35) contrast(0.9) brightness(0.78);
	transform: scale(1.02);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 72%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 72%, transparent 100%);
}

.xerpa-intro::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(7, 7, 11, 0.82) 0%, rgba(7, 7, 11, 0.58) 42%, rgba(7, 7, 11, 0.18) 72%, rgba(7, 7, 11, 0.48) 100%),
		linear-gradient(180deg, rgba(7, 7, 11, 0.44) 0%, rgba(7, 7, 11, 0.04) 42%, rgba(7, 7, 11, 0.76) 100%),
		radial-gradient(circle at 72% 46%, rgba(169, 150, 255, 0.05), transparent 34%);
}

.xerpa-intro.is-leaving {
	opacity: 0;
	visibility: hidden;
}

.xerpa-intro__card {
	width: 100%;
	visibility: hidden;
}

.xerpa-intro__card[hidden] {
	display: none !important;
}

.xerpa-intro.is-ready .xerpa-intro__card.is-active {
	visibility: visible;
}

.xerpa-intro__frame {
	position: relative;
	z-index: 2;
	width: min(1180px, 100%);
	margin-inline: auto;
}

.xerpa-intro__break--mobile {
	display: none;
}

.xerpa-intro__card--training .xerpa-intro__line--search {
	max-width: 36ch;
	font-size: clamp(1.25rem, 2.55vw, 2.6rem);
	line-height: 1.12;
}

.xerpa-intro__card--training .xerpa-intro__line--build {
	max-width: 100%;
	font-size: clamp(2.5rem, 4.75vw, 5.25rem);
	line-height: 0.94;
	letter-spacing: -0.05em;
}

.xerpa-intro__card--training .xerpa-intro__line--build > span {
	white-space: nowrap;
}

.xerpa-intro__card--continue .xerpa-intro__line--search {
	max-width: 44ch;
	font-size: clamp(1.15rem, 2.3vw, 2.35rem);
	line-height: 1.14;
}

.xerpa-intro__card--continue .xerpa-intro__line--build {
	max-width: 100%;
	font-size: clamp(2.4rem, 4.55vw, 5.05rem);
	line-height: 0.95;
	letter-spacing: -0.048em;
}

.xerpa-intro__card--continue .xerpa-intro__line--build > span {
	white-space: nowrap;
}

.xerpa-intro__kicker {
	margin: 0 0 clamp(22px, 3vw, 42px);
	font-family: Inter, "Helvetica Neue", sans-serif;
	font-size: clamp(10px, 0.8vw, 12px);
	font-weight: 650;
	line-height: 1;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: #b7dc72;
	opacity: 0;
	transform: translate3d(0, 10px, 0);
}

.xerpa-intro__line {
	display: block;
	margin: 0;
	overflow: hidden;
	font-family: Inter, "Helvetica Neue", sans-serif;
	letter-spacing: -0.055em;
}

.xerpa-intro__line > span {
	display: block;
	opacity: 0;
	transform: translate3d(0, 115%, 0);
	will-change: transform, opacity;
}

.xerpa-intro__line--search {
	font-size: clamp(1.45rem, 3.1vw, 3.05rem);
	font-weight: 500;
	line-height: 1.06;
	color: rgba(246, 244, 249, 0.62);
}

.xerpa-intro__line--build {
	margin-top: 0.12em;
	font-size: clamp(2.65rem, 6vw, 6.6rem);
	font-weight: 750;
	line-height: 0.98;
	color: #f6f4f9;
}

.xerpa-intro__line--build em {
	font-style: normal;
	color: #b7dc72;
}

.xerpa-intro__rule {
	display: block;
	width: min(270px, 34vw);
	height: 2px;
	margin-top: clamp(28px, 4vw, 54px);
	margin-inline: auto;
	overflow: hidden;
	background: rgba(159, 185, 106, 0.18);
	transform-origin: left center;
}

/* Sistema XERPA: align both editorial columns from the same top edge. */
@media (min-width: 768px) {
	body.home.page-id-8 .elementor-element-0000040f {
		align-items: flex-start;
	}

	body.home.page-id-8 .elementor-element-0000040c p:first-child {
		margin-top: 0;
	}
}

.xerpa-intro__rule::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: #9fb96a;
	transform: translate3d(-102%, 0, 0);
}

.xerpa-intro.is-playing .xerpa-intro__kicker {
	animation: xerpa-intro-kicker 0.45s ease 0.08s forwards;
}

.xerpa-intro.is-playing .xerpa-intro__line--search > span {
	animation: xerpa-intro-line 0.68s cubic-bezier(0.16, 1, 0.3, 1) 0.28s forwards;
}

.xerpa-intro.is-playing .xerpa-intro__line--build > span {
	animation: xerpa-intro-line 1.26s cubic-bezier(0.16, 1, 0.3, 1) 0.78s forwards;
}

.xerpa-intro.is-playing .xerpa-intro__rule::after {
	animation: xerpa-intro-rule 1.22s cubic-bezier(0.65, 0, 0.35, 1) 1.92s forwards;
}

@keyframes xerpa-intro-kicker {
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes xerpa-intro-line {
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes xerpa-intro-rule {
	to {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes xerpa-intro-dismiss {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

body.wpvibe-preview-active .xerpa-scroll-cue--page {
	top: calc(100svh - 178px);
}

@media (max-width: 767px) {
	.xerpa-scroll-cue {
		right: 15px;
		bottom: 12px;
		min-width: 44px;
		min-height: 76px;
		padding-inline: 7px;
	}

	.xerpa-scroll-cue--page {
		top: calc(100svh - 94px);
		bottom: auto;
	}

	body.wpvibe-preview-active .xerpa-scroll-cue--page {
		top: calc(100svh - 250px);
	}

	.xerpa-scroll-cue__track {
		height: 34px;
	}

	.xerpa-scroll-cue__label {
		display: none;
	}

	.xerpa-intro {
		place-items: center start;
		padding: 28px 24px;
	}

	.xerpa-intro::before {
		inset: -2%;
		background-position: 67% 52%;
		opacity: 0.34;
		filter: grayscale(1) saturate(0.3) contrast(0.88) brightness(0.72);
	}

	.xerpa-intro::after {
		background:
			linear-gradient(90deg, rgba(7, 7, 11, 0.88) 0%, rgba(7, 7, 11, 0.6) 66%, rgba(7, 7, 11, 0.4) 100%),
			linear-gradient(180deg, rgba(7, 7, 11, 0.5) 0%, transparent 38%, rgba(7, 7, 11, 0.8) 100%);
	}

	.xerpa-intro__line--search {
		max-width: 18ch;
		font-size: clamp(1.28rem, 6vw, 1.7rem);
		line-height: 1.15;
	}

	.xerpa-intro__line--build {
		max-width: 10ch;
		font-size: clamp(2.45rem, 12vw, 4.1rem);
		line-height: 0.96;
	}

	.xerpa-intro__rule {
		width: 42vw;
	}

	.xerpa-intro__break--mobile {
		display: initial;
	}

	.xerpa-intro__card--training .xerpa-intro__line--search {
		max-width: 30ch;
		font-size: clamp(1.05rem, 4.6vw, 1.3rem);
		line-height: 1.2;
	}

	.xerpa-intro__card--training .xerpa-intro__line--build {
		max-width: 100%;
		font-size: clamp(1.25rem, 6.8vw, 2.8rem);
		line-height: 0.98;
		letter-spacing: -0.045em;
	}

	.xerpa-intro__card--continue .xerpa-intro__line--search {
		max-width: 30ch;
		font-size: clamp(1rem, 4.4vw, 1.25rem);
		line-height: 1.16;
	}

	.xerpa-intro__card--continue .xerpa-intro__line--build {
		max-width: 100%;
		font-size: clamp(1.25rem, 6.6vw, 2.7rem);
		line-height: 0.98;
		letter-spacing: -0.045em;
	}
}

@media (max-height: 650px) and (min-width: 768px) {
	.xerpa-scroll-cue {
		bottom: 10px;
		transform: translate3d(0, 6px, 0) scale(0.86);
		transform-origin: bottom center;
	}

	.xerpa-scroll-cue--page {
		top: calc(100svh - 98px);
		bottom: auto;
	}

	.xerpa-scroll-cue.is-ready {
		transform: translate3d(0, 0, 0) scale(0.86);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.home.page-id-8.xerpa-intro-active .elementor-element-000003f6 h1,
	body.home.page-id-8.xerpa-intro-revealing .elementor-element-000003f6 h1 {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.xerpa-intro {
		display: none !important;
	}

	.xerpa-intro::before,
	.xerpa-intro::after {
		content: none;
		background-image: none;
	}

	.xerpa-scroll-cue,
	.xerpa-scroll-cue--autoplay,
	.xerpa-scroll-cue.is-dismissed {
		transition: none;
		animation: none;
	}

	.xerpa-scroll-cue__runner {
		height: 100%;
		animation: none;
		transform: none;
		opacity: 0.82;
	}
}

/* Opening statement — variant 4: value that lasts. */
.xerpa-intro__card--value .xerpa-intro__line--search {
	max-width: 42ch;
	font-size: clamp(1.15rem, 2.3vw, 2.35rem);
	line-height: 1.14;
}

.xerpa-intro__card--value .xerpa-intro__line--build {
	max-width: 100%;
	font-size: clamp(2.25rem, 4.4vw, 4.9rem);
	line-height: 0.97;
	letter-spacing: -0.048em;
}

@media (max-width: 767px) {
	.xerpa-intro__card--value .xerpa-intro__line--search {
		max-width: 30ch;
		font-size: clamp(1rem, 4.4vw, 1.25rem);
		line-height: 1.16;
	}

	.xerpa-intro__card--value .xerpa-intro__line--build {
		max-width: 100%;
		font-size: clamp(1.35rem, 7vw, 2.6rem);
		line-height: 0.98;
		letter-spacing: -0.045em;
	}
}

