/**
 * Sección Procedure: escenario fijo y tarjetas apiladas.
 */

html:has(.procedure) {
	scroll-behavior: auto !important;
}

.procedure {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100svh;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	background: #000;
	/* El pin de ScrollTrigger mueve esta sección con transform en cada scroll. */
	transition-property: background, border, box-shadow !important;
}

.pin-spacer:has(> .procedure) {
	background: #000;
	transition: none !important;
}

.procedure > .e-con-boxed,
.procedure > .e-con-boxed > .e-con-inner {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 100%;
}

.procedure .title-procedure {
	position: absolute;
	inset-block-start: 25%;
	inset-inline-end: 0;
	z-index: 4;
}

.procedure .procedure-1,
.procedure .procedure-2,
.procedure .procedure-3,
.procedure .procedure-4,
.procedure .procedure-5 {
	position: absolute;
	inset-block-start: 30%;
	inset-inline-end: 0;
	z-index: 3;
	visibility: hidden;
	will-change: transform, opacity;
}

.procedure .procedure-1 {
	visibility: visible;
}

/* Misma retícula para los encabezados y los tres campos de cada tarjeta. */
@media (min-width: 768px) {
	.procedure :is(.title-procedure, .procedure-1, .procedure-2, .procedure-3, .procedure-4, .procedure-5):not(:has(> .e-con-inner)) {
		display: grid;
		grid-template-columns: 11% 25% minmax(0, 1fr);
		column-gap: 3%;
	}

	.procedure :is(.title-procedure, .procedure-1, .procedure-2, .procedure-3, .procedure-4, .procedure-5) > .e-con-inner {
		display: grid;
		grid-template-columns: 11% 25% minmax(0, 1fr);
		column-gap: 3%;
	}

	.procedure :is(.title-procedure, .procedure-1, .procedure-2, .procedure-3, .procedure-4, .procedure-5) > :is(.elementor-element, .e-con-inner) > .elementor-element,
	.procedure :is(.title-procedure, .procedure-1, .procedure-2, .procedure-3, .procedure-4, .procedure-5) > .elementor-element {
		min-width: 0;
	}

	.procedure :is(.title-procedure, .procedure-1, .procedure-2, .procedure-3, .procedure-4, .procedure-5) > .elementor-element,
	.procedure :is(.title-procedure, .procedure-1, .procedure-2, .procedure-3, .procedure-4, .procedure-5) > .e-con-inner > .elementor-element {
		width: 100%;
	}
}

.procedure .p4-swimmer-stage {
	position: absolute;
	inset-inline-start: 0;
	inset-inline-end: 0;
	inset-block-end: -9%;
	z-index: 2;
	width: 100%;
	pointer-events: none;
	transform: rotate(25deg) !important;
}

.procedure .swimmer {
	position: relative;
	display: block;
	pointer-events: none;
	transform-origin: 50% 50%;
	will-change: transform;
}

@media (max-width: 767px) {
	.procedure .title-procedure {
		inset-block-start: 25%;
	}

	.procedure .procedure-1,
	.procedure .procedure-2,
	.procedure .procedure-3,
	.procedure .procedure-4,
	.procedure .procedure-5 {
		inset-block-start: 30%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.procedure {
		height: auto;
		min-height: 100vh;
		overflow: visible;
	}

	.procedure .title-procedure,
	.procedure .procedure-1,
	.procedure .procedure-2,
	.procedure .procedure-3,
	.procedure .procedure-4,
	.procedure .procedure-5,
	.procedure .p4-swimmer-stage,
	.procedure .swimmer {
		position: relative;
		inset: auto;
		visibility: visible;
		opacity: 1;
		transform: none;
	}
}