/**
 * SK Capacitación - Hero Banner
 * Desktop first. Posiciones fijas a propósito (no editables vía ACF).
 */

.sk-hero {
	position: relative;
	width: 100%;
	min-height: var(--sk-hero-min-height, 820px);
	overflow: hidden;
	background: #111;
	isolation: isolate;
}

/* ==========================================================================
   FULL-BLEED AUTOMÁTICO
   ========================================================================== */

/*
 * WPBakery mete la fila/columna del Hero dentro del contenedor
 * angosto de la página (.content), aunque no se le haya configurado
 * "Stretch row". Estas reglas rompen ese contenedor automáticamente
 * en CUALQUIER página donde se use el Hero, sin depender de que el
 * editor recuerde marcar "Stretch row and content" ni agregar una
 * clase CSS extra cada vez.
 */

.vc_row:has(.sk-hero),
.wpb_column:has(.sk-hero) {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

.wpb_column:has(.sk-hero) {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.wpb_column:has(.sk-hero) > .vc_column-inner {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ==========================================================================
   SLIDES (slider)
   ========================================================================== */

.sk-hero__slides {
	position: absolute;
	inset: 0;
}

.sk-hero__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 900ms ease;
}

.sk-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 1;
}

.sk-hero__background {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.sk-hero__background picture {
	display: block;
	width: 100%;
	height: 100%;
}

.sk-hero__background-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	user-select: none;
}

.sk-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.32) 0%,
		rgba(0, 0, 0, 0.12) 35%,
		rgba(0, 0, 0, 0.05) 65%,
		rgba(0, 0, 0, 0.16) 100%
	);
	pointer-events: none;
}

.sk-hero__inner {
	position: relative;
	z-index: 2;
	width: min(100%, 1816px);
	min-height: var(--sk-hero-min-height, 820px);
	margin: 0 auto;
}

.sk-hero__content {
	position: absolute;
	z-index: 10;
	left: 5.2%;
	top: 50%;
	width: min(56vw, 1060px);
	transform: translateY(-39%);
}

.sk-hero__title {
	margin: 0;
	max-width: 100%;
	color: #fff;
	font-family: inherit;
	font-size: clamp(3.25rem, 4.15vw, 5rem);
	font-weight: 700;
	line-height: 0.96;
	letter-spacing: -0.04em;
	text-wrap: balance;
}

.sk-hero__small-arrows {
	display: block;
	width: clamp(78px, 5.5vw, 112px);
	margin-top: 18px;
	margin-bottom: 6px;
}

.sk-hero__small-arrows-image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.sk-hero__description {
	margin: 0;
	color: #fff;
	font-family: inherit;
	font-size: clamp(1.25rem, 1.65vw, 1.95rem);
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.sk-hero__cta-wrapper {
	margin-top: 28px;
}

.sk-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 7px 34px;
	border: 2px solid #1770ac;
	border-radius: 4px;
	background: #1770ac;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	transition: background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.sk-hero__cta:hover,
.sk-hero__cta:focus-visible {
	background: #125a89;
	border-color: #125a89;
	color: #fff;
	transform: translateY(-2px);
}

.sk-hero__visuals {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.sk-hero__person {
	position: absolute;
	z-index: 6;
	left: 50.2%;
	bottom: -2%;
	width: min(31vw, 565px);
}

.sk-hero__person-image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: bottom center;
	filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.08));
}

.sk-hero__arrows-top {
	position: absolute;
	z-index: 4;
	left: 49.3%;
	top: 25.6%;
	width: min(34vw, 625px);
}

.sk-hero__arrows-top-image {
	display: block;
	width: 100%;
	height: auto;
}

.sk-hero__arrows-bottom {
	position: absolute;
	z-index: 5;
	left: 35.5%;
	bottom: 6.8%;
	width: min(13vw, 235px);
}

.sk-hero__arrows-bottom-image {
	display: block;
	width: 100%;
	height: auto;
}

/* Estado inicial de animaciones */

.sk-hero--animated .sk-hero__animate {
	opacity: 0;
}

.sk-hero--animated .sk-hero__title {
	transform: translate3d(0, -40px, 0);
	transition: opacity 850ms cubic-bezier(0.22, 1, 0.36, 1), transform 850ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sk-hero--animated .sk-hero__small-arrows {
	transform: translate3d(-30px, 0, 0);
	transition: opacity 750ms ease, transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: 240ms;
}

.sk-hero--animated .sk-hero__description {
	transform: translate3d(0, 20px, 0);
	transition: opacity 750ms ease, transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: 340ms;
}

.sk-hero--animated .sk-hero__cta-wrapper {
	transform: translate3d(0, 20px, 0);
	transition: opacity 750ms ease, transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: 430ms;
}

.sk-hero--animated .sk-hero__arrows-top {
	transform: translate3d(-50px, 0, 0);
	transition: opacity 950ms ease, transform 950ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: 280ms;
}

.sk-hero--animated .sk-hero__arrows-bottom {
	transform: translate3d(-35px, 0, 0);
	transition: opacity 900ms ease, transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: 390ms;
}

/*
 * is-ready / is-animation-complete se aplican al .sk-hero__slide
 * activo (no al .sk-hero completo), para que cada slide dispare su
 * propia animación de entrada al activarse, en vez de quedar
 * "gastada" después del primer slide.
 */

.sk-hero--animated .sk-hero__slide.is-ready .sk-hero__animate {
	opacity: 1;
}

.sk-hero--animated .sk-hero__slide.is-ready .sk-hero__title,
.sk-hero--animated .sk-hero__slide.is-ready .sk-hero__small-arrows,
.sk-hero--animated .sk-hero__slide.is-ready .sk-hero__description,
.sk-hero--animated .sk-hero__slide.is-ready .sk-hero__cta-wrapper,
.sk-hero--animated .sk-hero__slide.is-ready .sk-hero__arrows-top,
.sk-hero--animated .sk-hero__slide.is-ready .sk-hero__arrows-bottom {
	transform: translate3d(0, 0, 0) scale(1);
}

/* ==========================================================================
   PARALLAX CON MOUSE + FLOTACIÓN CONTINUA
   ========================================================================== */

/*
 * Cada capa decorativa tiene 3 dueños independientes de "transform"
 * para no pelear entre sí por la misma propiedad CSS:
 *   1) wrapper (.sk-hero__arrows-top, etc.) → entrada (fade/slide inicial)
 *   2) .sk-hero__float                       → flotación continua (CSS keyframes)
 *   3) .sk-hero__parallax                    → seguimiento del mouse (JS)
 */

.sk-hero__float {
	display: block;
}

.sk-hero__parallax {
	display: block;
	transform: translate3d(0, 0, 0);
	transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

/* Movimiento continuo */

.sk-hero__slide.is-animation-complete .sk-hero__arrows-top .sk-hero__float {
	animation: skHeroArrowTop 4.8s ease-in-out infinite alternate;
}

.sk-hero__slide.is-animation-complete .sk-hero__arrows-bottom .sk-hero__float {
	animation: skHeroArrowBottom 4.1s ease-in-out infinite alternate;
}

.sk-hero__slide.is-animation-complete .sk-hero__small-arrows .sk-hero__float {
	animation: skHeroArrowSmall 2.8s ease-in-out infinite alternate;
}

@keyframes skHeroArrowTop {
	from { transform: translate3d(-10px, 0, 0); }
	to { transform: translate3d(14px, 0, 0); }
}

@keyframes skHeroArrowBottom {
	from { transform: translate3d(-8px, 0, 0); }
	to { transform: translate3d(12px, 0, 0); }
}

@keyframes skHeroArrowSmall {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(8px, 0, 0); }
}

/* ==========================================================================
   NAVEGACIÓN DEL SLIDER
   ========================================================================== */

.sk-hero__nav {
	position: absolute;
	z-index: 20;
	right: 28px;
	bottom: 28px;

	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
}

.sk-hero__arrows-group {
	display: flex;
	align-items: center;
	gap: 4px;
}

.sk-hero__arrow-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 46px;
	height: 46px;

	padding: 0;
	border: 0;
	border-radius: 4px;
	background: rgba(23, 112, 172, 0.55);

	color: #fff;
	cursor: pointer;

	transition: background-color 200ms ease, opacity 200ms ease, transform 200ms ease;
}

.sk-hero__arrow-btn svg {
	width: 22px;
	height: 22px;
}

.sk-hero__arrow-btn:hover,
.sk-hero__arrow-btn:focus-visible {
	background: rgba(23, 112, 172, 0.85);
	transform: translateX(2px);
}

.sk-hero__arrow-btn--prev:hover,
.sk-hero__arrow-btn--prev:focus-visible {
	transform: translateX(-2px);
}

.sk-hero--single .sk-hero__nav {
	display: none;
}


/* Pantallas intermedias */

@media (max-width: 1400px) {
	.sk-hero__content { left: 5%; width: 52vw; }
	.sk-hero__person { left: 50%; width: 34vw; }
	.sk-hero__arrows-top { left: 49%; width: 37vw; }
}

/* Tablet */

@media (max-width: 1024px) {
	.sk-hero { min-height: 720px; }
	.sk-hero__inner { min-height: 720px; }

	.sk-hero__content {
		left: 6%;
		top: 46%;
		width: 45%;
		transform: translateY(-35%);
	}

	.sk-hero__title { font-size: clamp(2.8rem, 6vw, 4.25rem); }
	.sk-hero__description { font-size: clamp(1.15rem, 2.6vw, 1.6rem); }

	.sk-hero__person { left: 54%; bottom: 0; width: 44vw; }
	.sk-hero__arrows-top { left: 49%; top: 28%; width: 45vw; }
	.sk-hero__arrows-bottom { left: 42%; bottom: 8%; width: 18vw; }
}

/* Mobile */

@media (max-width: 767px) {
	.sk-hero {
		min-height: var(--sk-hero-mobile-min-height, 720px);
		align-items: flex-start;
	}

	.sk-hero__inner { min-height: var(--sk-hero-mobile-min-height, 720px); }

	.sk-hero__background-image { object-position: center center; }

	.sk-hero__overlay {
		background: linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.25) 0%,
			rgba(0, 0, 0, 0.10) 38%,
			rgba(0, 0, 0, 0.30) 100%
		);
	}

	.sk-hero__content {
		left: 7%;
		right: 7%;
		top: 110px;
		width: auto;
		transform: none;
	}

	.sk-hero__title {
		max-width: 92%;
		font-size: clamp(2.75rem, 12vw, 4.1rem);
		line-height: 0.95;
	}

	.sk-hero__small-arrows { width: 105px; margin-top: 18px; margin-bottom: 8px; }

	.sk-hero__description {
		max-width: 88%;
		font-size: clamp(1.15rem, 5vw, 1.5rem);
		line-height: 1.18;
	}

	.sk-hero__person { left: auto; right: -14%; bottom: -1%; width: min(88vw, 560px); }
	.sk-hero__arrows-top { left: auto; right: -20%; top: 48%; width: 76vw; opacity: 0.8; }
	.sk-hero__arrows-bottom { left: 5%; bottom: 4%; width: 31vw; }
}

@media (max-width: 480px) {
	.sk-hero__content { top: 95px; }
	.sk-hero__title { font-size: clamp(2.45rem, 11.5vw, 3.2rem); }
	.sk-hero__description { font-size: 1.1rem; }
	.sk-hero__person { right: -22%; width: 95vw; }
}

@media (prefers-reduced-motion: reduce) {
	.sk-hero *,
	.sk-hero *::before,
	.sk-hero *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.sk-hero__animate {
		opacity: 1 !important;
		transform: none !important;
	}
}