/* Humand GSAP Effects: estilos base. El CSS que oculta los elementos antes de animar se genera en PHP (hgsap_hide_css). */

/* Estado inicial hasta que el motor arranca: pasos de pin-steps (solo escritorio) y barra de progreso. */
html.hgsap-js.hgsap-desktop:not(.hgsap-ready):not(.hgsap-fail) [data-gsap-step]:not(:first-child) {
	opacity: 0;
}

html.hgsap-js:not(.hgsap-ready):not(.hgsap-fail) :is(.hgsap-progress-bar, [data-gsap="progress-bar"]) {
	transform: scaleX(0);
	transform-origin: 0 50%;
}

/* Scroll horizontal: la pista en fila y cada panel del ancho de la pantalla (solo escritorio). */
.hgsap-desktop :is(.hgsap-horizontal, [data-gsap="horizontal"]) {
	overflow: hidden;
}

.hgsap-desktop :is(.hgsap-horizontal, [data-gsap="horizontal"]) .hgsap-track {
	display: flex !important;
	flex-wrap: nowrap !important;
	flex-direction: row !important;
	width: max-content !important;
	max-width: none !important;
}

.hgsap-desktop :is(.hgsap-horizontal, [data-gsap="horizontal"]) .hgsap-panel {
	flex: 0 0 100vw !important;
	max-width: 100vw !important;
	width: 100vw !important;
}

/* ScrollSmoother (solo si está activado en los ajustes). */
#hgsap-smooth-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* Contadores: los dígitos con el mismo ancho para que no tiemble el texto. */
:is(.hgsap-counter, [data-gsap="counter"]) {
	font-variant-numeric: tabular-nums;
}

/* Carrusel arrastrable: la pista en fila, recortada por el contenedor. */
:is(.hgsap-drag-carousel, [data-gsap="drag-carousel"]) {
	overflow: hidden;
}

:is(.hgsap-drag-carousel, [data-gsap="drag-carousel"]) .hgsap-track {
	display: flex !important;
	flex-wrap: nowrap !important;
	flex-direction: row !important;
	width: max-content !important;
	max-width: none !important;
	cursor: grab;
}

:is(.hgsap-drag-carousel, [data-gsap="drag-carousel"]) .hgsap-track > * {
	flex: 0 0 auto;
}

/* Imágenes propias del efecto cursor-flair: ocultas hasta que el motor las usa. */
html.hgsap-js:not(.hgsap-ready):not(.hgsap-fail) [data-gsap-flair] {
	position: fixed;
	opacity: 0;
	pointer-events: none;
}

/* Pantalla que crece al scrollear: sección, escenario (mide lo que mida la imagen) y tarjetas flotantes alrededor. */
.hgsap-screen {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	overflow-x: clip;
}

/* --hg-vh: el alto de la ventana ya descontado el zoom del sitio (el sitio hace body{zoom:1.15} desde 2000px y 1.6 desde 3000px, y ahí
   100vh queda más alto que la ventana). Lo calcula el efecto; sin JS vale 100vh. */
/* ScrollTrigger fija al alto que midió al cargar; si la ventana cambia de alto después (barra de herramientas, devtools, rotar), la
   sección fija quedaba más alta o más baja que la pantalla. El alto lo manda siempre el CSS (min-height). */
.hgsap-screen[data-gsap="screen-reveal"] {
	height: auto !important;
	max-height: none !important;
}

.hgsap-screen__stage {
	position: relative;
	width: min(1100px, 92vw);
	/* La separación de arriba y abajo va como margen del escenario (no como padding de la sección): ScrollTrigger fija la altura de la
	   sección al fijarla, y un padding se sumaba a esa altura y la dejaba más alta que la ventana. */
	margin: var(--hg-edge-t, 0px) 0 var(--hg-edge-b, 0px);
	padding: 0;
	perspective: 1400px;
}

.hgsap-screen__screen {
	overflow: hidden;
	border-radius: 20px;
	line-height: 0;
	will-change: transform;
}

.hgsap-screen__screen :is(img, video, .hgsap-screen__lottie) {
	display: block;
	width: 100%;
	height: auto;
}

/* En pantallas anchas, con la pantalla al 100% del ancho, la imagen o el video pueden ser más altos que la ventana: se limitan al alto de
   la pantalla, descontando la separación de arriba y abajo (sin deformarse), para que la sección no se pase del alto de la ventana. */
.hgsap-screen__screen :is(img, video) {
	max-height: calc(var(--hg-vh, 100vh) - var(--hg-edge-t, 0px) - var(--hg-edge-b, 0px));
	object-fit: contain;
}

.hgsap-screen__screen .hgsap-screen__lottie {
	max-height: calc(var(--hg-vh, 100vh) - var(--hg-edge-t, 0px) - var(--hg-edge-b, 0px));
}

.hgsap-screen__atom {
	position: absolute;
	z-index: 2;
	width: 240px;
	line-height: 0;
}

.hgsap-screen__atom img {
	display: block;
	width: 100%;
	height: auto;
}

@keyframes hgsap-floaty {
	50% {
		translate: 0 -8px;
	}
}

.hgsap-screen--float .hgsap-screen__atom-in {
	animation: hgsap-floaty 5s ease-in-out infinite;
}

.hgsap-screen--float .hgsap-screen__atom:nth-child(even) .hgsap-screen__atom-in {
	animation-duration: 6.2s;
	animation-delay: -2s;
}

@media (prefers-reduced-motion: reduce) {
	.hgsap-screen--float .hgsap-screen__atom-in {
		animation: none;
	}
}

/* Elementos fijados con ScrollTrigger en pantallas con zoom del sitio (body{zoom}): el efecto calcula el ancho y la posición reales. */
.hgsap-zpin[style*="position: fixed"] {
	width: var(--hg-pw) !important;
	max-width: var(--hg-pw) !important;
	height: var(--hg-ph) !important;
	max-height: var(--hg-ph) !important;
	left: var(--hg-pl) !important;
	top: var(--hg-pt, 0px) !important;
}

/* Con el zoom del sitio, el espaciador y el desplazamiento al soltar un elemento fijado se corrigen a px de CSS (ver zoomFix en el JS). */
.pin-spacer.hgsap-zspacer {
	height: var(--hg-sh) !important;
	padding-bottom: var(--hg-pd) !important;
}

.hgsap-zpin.hgsap-zend {
	transform: translate(0px, var(--hg-pd)) !important;
}


/* ---------- Dibujo con zoom: información de cada parte ----------
   Sin el motor (movimiento reducido, editor) la información se ve como una lista debajo del dibujo.
   Con el motor (clase hgsap-zs--live) cada una aparece pegada a su parte al pasar el mouse. */
.hgsap-zs__infos {
	display: grid;
	flex: 0 0 100%;
	gap: 14px;
	width: 100%;
	margin-top: 16px;
}

.hgsap-zs__info {
	--hg-zs-ic: 56px;
	--hg-zs-w: 200px;
	--hg-zs-line: 22px;
}

.hgsap-zs__in {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.hgsap-zs__ic {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	overflow: hidden;
	border: 3px solid transparent;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 3px 8px rgba(20, 28, 60, 0.18);
	color: #2a2f3d;
}

.hgsap-zs__ic[hidden] {
	display: none;
}

.hgsap-zs__ic svg,
.hgsap-zs__ic i,
.hgsap-zs__ic img {
	width: 55%;
	height: 55%;
}

.hgsap-zs__ic svg:not([fill]) {
	fill: currentColor;
}

.hgsap-zs__ic img {
	object-fit: contain;
}

.hgsap-zs__dots {
	display: none;
}

.hgsap-zs__tx {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.hgsap-zs__t {
	color: #2a2f3d;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.25;
}

.hgsap-zs__d {
	margin-top: 2px;
	color: #606060;
	font-size: 0.9rem;
	line-height: 1.4;
}

.hgsap-zs--live {
	position: relative;
	padding-block: 100px;
}

.hgsap-zs--live .hgsap-zs__infos {
	position: absolute;
	inset: 0;
	display: block;
	width: auto;
	margin: 0;
	pointer-events: none;
}

.hgsap-zs--live .hgsap-zs__info {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--hg-zs-w);
	transform: translate(-50%, calc(var(--hg-zs-ic) / -2));
}

.hgsap-zs--live .hgsap-zs__info.is-up {
	transform: translate(-50%, calc(-100% + var(--hg-zs-ic) / 2));
}

.hgsap-zs--live .hgsap-zs__in {
	flex-direction: column;
	align-items: center;
	gap: 0;
	text-align: center;
	opacity: 0;
	visibility: hidden;
}

.hgsap-zs--live .is-up .hgsap-zs__in {
	flex-direction: column-reverse;
}

.hgsap-zs--live .hgsap-zs__ic {
	width: var(--hg-zs-ic);
	height: var(--hg-zs-ic);
	border-color: #8aa5f2;
}

.hgsap-zs--live .hgsap-zs__dots {
	display: block;
	width: 0;
	height: var(--hg-zs-line);
	margin: 6px 0;
	border-left: 2px dotted #3a3f4d;
}

.hgsap-zs--live .hgsap-zs__tx {
	align-items: center;
}

/* Zona sensible más alta: una columna transparente por parte (la crea el motor). */
.hgsap-zs__hit {
	position: absolute;
	top: 0;
	z-index: 3;
	cursor: pointer;
}

/* A los costados (dibujos redondos, como un rompecabezas): la información va a la izquierda o a la derecha, con una línea horizontal que sale
   del borde de afuera de la parte y termina en un punto, junto al texto. El ícono de la lista no se usa acá (ya va dentro de la pieza). */
.hgsap-zs--live.hgsap-zs--sides {
	padding-block: 24px;
	padding-inline: 240px;
}

.hgsap-zs--sides .hgsap-zs__info {
	--hg-zs-line: 70px;
	--hg-zs-w: 220px;
}

.hgsap-zs--live .hgsap-zs__info.is-right {
	transform: translate(0, -50%);
}

.hgsap-zs--live .hgsap-zs__info.is-left {
	transform: translate(-100%, -50%);
}

.hgsap-zs--live .is-right .hgsap-zs__in,
.hgsap-zs--live .is-left .hgsap-zs__in {
	align-items: center;
}

.hgsap-zs--live .is-right .hgsap-zs__in {
	flex-direction: row;
	text-align: left;
}

.hgsap-zs--live .is-left .hgsap-zs__in {
	flex-direction: row-reverse;
	text-align: right;
}

.hgsap-zs--live .is-right .hgsap-zs__ic,
.hgsap-zs--live .is-left .hgsap-zs__ic {
	display: none;
}

.hgsap-zs--live .is-right .hgsap-zs__dots,
.hgsap-zs--live .is-left .hgsap-zs__dots {
	position: relative;
	flex: none;
	width: var(--hg-zs-line);
	height: 0;
	margin: 0 16px 0 0;
	border: 0;
	border-top: 3px solid;
	color: #a8d5c9;
}

.hgsap-zs--live .is-left .hgsap-zs__dots {
	margin: 0 0 0 16px;
}

.hgsap-zs--live .is-right .hgsap-zs__dots::after,
.hgsap-zs--live .is-left .hgsap-zs__dots::after {
	position: absolute;
	top: -7px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: currentColor;
	content: "";
}

.hgsap-zs--live .is-right .hgsap-zs__dots::after {
	right: -5px;
}

.hgsap-zs--live .is-left .hgsap-zs__dots::after {
	left: -5px;
}

.hgsap-zs--live .is-right .hgsap-zs__tx {
	align-items: flex-start;
}

.hgsap-zs--live .is-left .hgsap-zs__tx {
	align-items: flex-end;
}

/* Pantallas angostas (celular y tablet vertical): no hay lugar a los costados, así que el dibujo ocupa todo el ancho y la información de la
   parte activa aparece debajo, en el mismo lugar para todas (se apilan en una celda y solo se ve la activa). */
@media (max-width: 900px) {
	.hgsap-zs--live.hgsap-zs--sides {
		padding-block: 0;
		padding-inline: 0;
	}

	.hgsap-zs--live.hgsap-zs--sides .hgsap-zs__infos {
		position: relative;
		inset: auto;
		display: grid;
		margin-top: 16px;
	}

	.hgsap-zs--live.hgsap-zs--sides .hgsap-zs__info {
		position: static;
		grid-area: 1 / 1;
		width: 100% !important;
		left: auto !important;
		top: auto !important;
		transform: none !important;
	}

	.hgsap-zs--live.hgsap-zs--sides .hgsap-zs__info .hgsap-zs__in {
		width: 100%;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.hgsap-zs--live.hgsap-zs--sides .hgsap-zs__dots {
		display: none;
	}

	.hgsap-zs--live.hgsap-zs--sides .hgsap-zs__info .hgsap-zs__tx {
		align-items: center;
	}
}

/* Opción «Popup en tablet y celular» (data-gsap-popup="yes"): en tablet y celular la información sale en un popup en el centro del dibujo (en una ruleta, el hueco del medio).
   En escritorio no cambia nada: es el cartelito de siempre. */
@media (max-width: 1100px) {
	[data-gsap-popup="yes"].hgsap-zs--live {
		padding: 0 !important;
	}

	[data-gsap-popup="yes"].hgsap-zs--live .hgsap-zs__infos {
		position: absolute;
		inset: 0;
		display: grid;
		place-items: center;
		margin: 0;
		pointer-events: none;
	}

	[data-gsap-popup="yes"].hgsap-zs--live .hgsap-zs__info {
		position: static;
		grid-area: 1 / 1;
		width: var(--hgp-w, min(54%, 260px)) !important;
		left: auto !important;
		top: auto !important;
		transform: none !important;
	}

	[data-gsap-popup="yes"].hgsap-zs--live .hgsap-zs__info .hgsap-zs__in {
		flex-direction: column;
		align-items: center;
		gap: 0;
		padding: var(--hgp-pad, 16px 18px);
		border: var(--hgp-bw, 0px) solid var(--hgp-bc, transparent);
		border-radius: var(--hgp-r, 18px);
		background: var(--hgp-bg, #fff);
		box-shadow: 0 var(--hgp-sy, 12px) var(--hgp-sb, 36px) var(--hgp-ss, 0px) var(--hgp-sc, rgba(20, 28, 60, 0.22));
		text-align: center;
	}

	[data-gsap-popup="yes"].hgsap-zs--live .hgsap-zs__dots {
		display: none;
	}

	[data-gsap-popup="yes"].hgsap-zs--live .hgsap-zs__ic:not([hidden]) {
		display: inline-flex;
		width: var(--hgp-ic, 44px);
		height: var(--hgp-ic, 44px);
		margin-bottom: 8px;
	}

	[data-gsap-popup="yes"][data-gsap-popup-icon="no"].hgsap-zs--live .hgsap-zs__ic {
		display: none !important;
	}

	[data-gsap-popup="yes"].hgsap-zs--live .hgsap-zs__t {
		color: var(--hgp-tc, var(--hgsap-tc, #2a2f3d));
		font-size: var(--hgp-ts, 1.05rem);
		font-weight: var(--hgp-tw, 700);
	}

	[data-gsap-popup="yes"].hgsap-zs--live .hgsap-zs__d {
		color: var(--hgp-dc, var(--hgsap-dc, #606060));
		font-size: var(--hgp-ds, 0.9rem);
		font-weight: var(--hgp-dw, 400);
	}

	[data-gsap-popup="yes"].hgsap-zs--live .hgsap-zs__tx {
		align-items: center;
	}
}

@media (max-width: 767px) {
	[data-gsap-popup="yes"].hgsap-zs--live .hgsap-zs__info .hgsap-zs__in {
		padding: var(--hgp-pad, 12px 14px);
	}

	[data-gsap-popup="yes"].hgsap-zs--live .hgsap-zs__info {
		width: var(--hgp-w, 46%) !important;
	}

	[data-gsap-popup="yes"].hgsap-zs--live .hgsap-zs__t {
		font-size: var(--hgp-ts, 0.95rem);
	}

	[data-gsap-popup="yes"].hgsap-zs--live .hgsap-zs__d {
		font-size: var(--hgp-ds, 0.8rem);
		line-height: 1.35;
	}
}

/* Giro manual (tablet o celular): el dibujo girado queda angosto y centrado, para que no se estire a todo el ancho. */
[data-gsap-rot="yes"] > svg {
	display: block;
	width: min(100%, 45vw, 260px) !important;
	height: auto !important;
	margin-inline: auto;
}

/* Número de cada parte detectada (solo en la vista del editor de Elementor). */
.hgsap-zs__n {
	position: absolute;
	z-index: 6;
	width: 22px;
	height: 22px;
	margin: -11px 0 0 -11px;
	border-radius: 50%;
	background: #1d2c75;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	color: #fff;
	font: 700 12px/22px system-ui, sans-serif;
	text-align: center;
	pointer-events: none;
}