/* ==========================================================================
   IMPULZO STUDIO - SECCIÓN METODOLOGÍA (impulzo-seccion-metodologia)
   Cero CSS en línea - Gobernado por Variables CSS de Elementor
   ========================================================================== */

.impulzo-seccion-metodologia-container {
	/* Variables del Contenedor y Grid */
	--impulzo-met-max-width: 1240px;
	--impulzo-met-custom-width: 1180px;
	--impulzo-met-min-height: 0px;
	--impulzo-met-padding: 36px 24px;
	--impulzo-met-radius: 0px;
	--impulzo-met-cols: 4;
	--impulzo-met-rows: 1;
	--impulzo-met-gap-x: 28px;
	--impulzo-met-gap-y: 36px;

	/* Variables de Fondo */
	--impulzo-met-bg-1: #ffffff;
	--impulzo-met-bg-2: #f8fafc;
	--impulzo-met-bg-angle: 180deg;

	/* Variables de Círculo con Número y Línea Horizontal Slice */
	--impulzo-met-circle-size: 54px;
	--impulzo-met-circle-scale: 1.24;
	--impulzo-met-circle-transition: 420ms;
	--impulzo-met-circle-bg: #0084c2;
	--impulzo-met-circle-color: #ffffff;
	--impulzo-met-circle-active-bg: #000000;
	--impulzo-met-circle-active-color: #ffffff;
	--impulzo-met-circle-ring-color: rgba(0, 0, 0, 0.05);
	--impulzo-met-circle-ring-size: 12px;
	--impulzo-met-line-height: 6px;
	--impulzo-met-line-gap: 14px;
	--impulzo-met-line-bg: #ebebeb;
	--impulzo-met-line-slice-color: #000000;
	--impulzo-met-line-slice-duration: 600ms;

	/* Variables de Textos y Hover Exclusivo en Título */
	--impulzo-met-text-align: left;
	--impulzo-met-circle-mb: 22px;
	--impulzo-met-title-color: #0084c2;
	--impulzo-met-title-hover-color: #005885;
	--impulzo-met-title-line-color: #0084c2;
	--impulzo-met-title-line-h: 2.5px;
	--impulzo-met-title-mb: 16px;
	--impulzo-met-title-hover-x: 6px;
	--impulzo-met-title-hover-duration: 280ms;
	--impulzo-met-desc-color: #111827;
	--impulzo-met-text-x: 0px;
	--impulzo-met-text-y: 0px;
	--impulzo-met-text-padding: 0px 12px 0px 0px;

	/* Variables de Animación de Entrada Escalonada */
	--impulzo-met-entrance-duration: 650ms;
	--impulzo-met-entrance-stagger: 140ms;
	--impulzo-met-entrance-distance: 34px;
	--impulzo-met-entrance-scale: 0.92;

	position: relative;
	width: 100%;
	min-height: var(--impulzo-met-min-height);
	padding: var(--impulzo-met-padding);
	border-radius: var(--impulzo-met-radius);
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.impulzo-seccion-metodologia-container *,
.impulzo-seccion-metodologia-container *::before,
.impulzo-seccion-metodologia-container *::after {
	box-sizing: border-box;
}

/* Fondo On/Off (Sólido, Degradado Lineal o Radial) */
.impulzo-seccion-metodologia-container.no-section-bg {
	background: transparent;
}

.impulzo-seccion-metodologia-container.has-section-bg.bg-mode-solid {
	background: var(--impulzo-met-bg-1);
}

.impulzo-seccion-metodologia-container.has-section-bg.bg-mode-linear {
	background: linear-gradient(var(--impulzo-met-bg-angle), var(--impulzo-met-bg-1) 0%, var(--impulzo-met-bg-2) 100%);
}

.impulzo-seccion-metodologia-container.has-section-bg.bg-mode-radial {
	background: radial-gradient(circle at center, var(--impulzo-met-bg-1) 0%, var(--impulzo-met-bg-2) 100%);
}

/* Grid y Modos de Ancho */
.impulzo-seccion-metodologia-grid {
	display: grid;
	grid-template-columns: repeat(var(--impulzo-met-cols), minmax(0, 1fr));
	grid-template-rows: repeat(var(--impulzo-met-rows), auto);
	column-gap: var(--impulzo-met-gap-x);
	row-gap: var(--impulzo-met-gap-y);
	margin-left: auto;
	margin-right: auto;
}

.impulzo-seccion-metodologia-container.layout-boxed .impulzo-seccion-metodologia-grid {
	width: 100%;
	max-width: var(--impulzo-met-max-width);
}

.impulzo-seccion-metodologia-container.layout-full .impulzo-seccion-metodologia-grid {
	width: 100%;
	max-width: 100%;
}

.impulzo-seccion-metodologia-container.layout-custom .impulzo-seccion-metodologia-grid {
	width: var(--impulzo-met-custom-width);
	max-width: 100%;
}

/* ==========================================================================
   PASO DE METODOLOGÍA (CÍRCULO + LÍNEA CONECTORA SLICE)
   ========================================================================== */
.impulzo-seccion-metodologia-item {
	--impulzo-met-order-delay: 0ms;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}

.impulzo-seccion-metodologia-step-head {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: calc(var(--impulzo-met-circle-size) * var(--impulzo-met-circle-scale));
	margin-bottom: var(--impulzo-met-circle-mb);
}

.impulzo-seccion-metodologia-circle {
	position: relative;
	width: var(--impulzo-met-circle-size);
	height: var(--impulzo-met-circle-size);
	border-radius: 50%;
	background-color: var(--impulzo-met-circle-bg);
	color: var(--impulzo-met-circle-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	z-index: 2;
	transform: scale(1);
	transition: transform var(--impulzo-met-circle-transition) cubic-bezier(0.22, 1, 0.36, 1),
	            background-color var(--impulzo-met-circle-transition) ease,
	            color var(--impulzo-met-circle-transition) ease,
	            box-shadow var(--impulzo-met-circle-transition) ease;
}

.impulzo-seccion-metodologia-circle-halo {
	position: absolute;
	inset: calc(-1 * var(--impulzo-met-circle-ring-size));
	border-radius: 50%;
	background-color: var(--impulzo-met-circle-ring-color);
	opacity: 0;
	transform: scale(0.75);
	z-index: -1;
	pointer-events: none;
	transition: opacity var(--impulzo-met-circle-transition) ease,
	            transform var(--impulzo-met-circle-transition) cubic-bezier(0.22, 1, 0.36, 1);
}

.impulzo-seccion-metodologia-number {
	position: relative;
	z-index: 2;
	font-size: 1.55rem;
	font-weight: 700;
	line-height: 1;
}

/* Estado Activo en el Flujo: El círculo crece (Grow) y cambia de color */
.impulzo-seccion-metodologia-item.is-flow-active .impulzo-seccion-metodologia-circle {
	background-color: var(--impulzo-met-circle-active-bg);
	color: var(--impulzo-met-circle-active-color);
	transform: scale(var(--impulzo-met-circle-scale));
}

.impulzo-seccion-metodologia-item.is-flow-active .impulzo-seccion-metodologia-circle-halo {
	opacity: 1;
	transform: scale(1);
}

/* Línea Conectora Horizontal y Animación Slice hacia el siguiente paso */
.impulzo-seccion-metodologia-connector {
	position: relative;
	flex: 1;
	height: var(--impulzo-met-line-height);
	background-color: var(--impulzo-met-line-bg);
	margin-left: var(--impulzo-met-line-gap);
	border-radius: 99px;
	overflow: hidden;
}

.impulzo-seccion-metodologia-container.no-connector-line .impulzo-seccion-metodologia-connector {
	display: none !important;
}

.impulzo-seccion-metodologia-connector-slice {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-color: var(--impulzo-met-line-slice-color);
	border-radius: inherit;
	transform: scaleX(0);
	transform-origin: left center;
	transition: none;
}

.impulzo-seccion-metodologia-item.is-line-slicing .impulzo-seccion-metodologia-connector-slice {
	transform: scaleX(1);
	transition: transform var(--impulzo-met-line-slice-duration) cubic-bezier(0.4, 0, 0.2, 1);
}

.impulzo-seccion-metodologia-item.is-line-filled .impulzo-seccion-metodologia-connector-slice {
	transform: scaleX(1);
}

/* ==========================================================================
   CUERPO DE TEXTO (TÍTULO CON HOVER LEFT/RIGHT + LÍNEA + DESCRIPCIÓN)
   ========================================================================== */
.impulzo-seccion-metodologia-text-body {
	display: flex;
	flex-direction: column;
	text-align: var(--impulzo-met-text-align);
	padding: var(--impulzo-met-text-padding);
	transform: translate(var(--impulzo-met-text-x), var(--impulzo-met-text-y));
}

.impulzo-seccion-metodologia-title-wrap {
	display: inline-flex;
	flex-direction: column;
	align-self: flex-start;
	max-width: 100%;
	margin-bottom: var(--impulzo-met-title-mb);
}

.impulzo-seccion-metodologia-title {
	margin: 0 0 8px 0;
	color: var(--impulzo-met-title-color);
	font-size: 1.32rem;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.01em;
	cursor: default;
	transition: transform var(--impulzo-met-title-hover-duration) cubic-bezier(0.22, 1, 0.36, 1),
	            color var(--impulzo-met-title-hover-duration) ease;
}

/* Solo el título tiene hover con ligero desplazamiento left/right */
.impulzo-seccion-metodologia-container.has-title-hover .impulzo-seccion-metodologia-title:hover {
	transform: translateX(var(--impulzo-met-title-hover-x));
	color: var(--impulzo-met-title-hover-color);
}

.impulzo-seccion-metodologia-title-line {
	display: block;
	width: 100%;
	height: var(--impulzo-met-title-line-h);
	background-color: var(--impulzo-met-title-line-color);
	border-radius: 99px;
}

.impulzo-seccion-metodologia-desc {
	margin: 0;
	color: var(--impulzo-met-desc-color);
	font-size: 0.98rem;
	font-weight: 400;
	line-height: 1.48;
}

/* ==========================================================================
   ANIMACIÓN DE ENTRADA ESCALONADA POR ORDEN DE LISTA (1°, 2°, 3°, 4°...)
   ========================================================================== */
.impulzo-seccion-metodologia-container.has-entrance-anim .impulzo-seccion-metodologia-item {
	opacity: 0;
	transition: opacity var(--impulzo-met-entrance-duration) cubic-bezier(0.22, 1, 0.36, 1),
	            transform var(--impulzo-met-entrance-duration) cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--impulzo-met-order-delay, 0ms);
}

.impulzo-seccion-metodologia-container.has-entrance-anim.entrance-fade-grow-up .impulzo-seccion-metodologia-item {
	transform: translateY(var(--impulzo-met-entrance-distance)) scale(var(--impulzo-met-entrance-scale));
}

.impulzo-seccion-metodologia-container.has-entrance-anim.entrance-fade-left .impulzo-seccion-metodologia-item {
	transform: translateX(calc(-1 * var(--impulzo-met-entrance-distance)));
}

.impulzo-seccion-metodologia-container.has-entrance-anim.entrance-fade-right .impulzo-seccion-metodologia-item {
	transform: translateX(var(--impulzo-met-entrance-distance));
}

.impulzo-seccion-metodologia-container.has-entrance-anim.entrance-fade-alt .impulzo-seccion-metodologia-item.is-order-even {
	transform: translateX(calc(-1 * var(--impulzo-met-entrance-distance)));
}

.impulzo-seccion-metodologia-container.has-entrance-anim.entrance-fade-alt .impulzo-seccion-metodologia-item.is-order-odd {
	transform: translateX(var(--impulzo-met-entrance-distance));
}

.impulzo-seccion-metodologia-container.has-entrance-anim.is-in-view .impulzo-seccion-metodologia-item {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

/* ==========================================================================
   MEDIA QUERIES OBLIGATORIAS (TABLET <= 1024px Y MÓVIL <= 768px)
   ========================================================================== */
@media (max-width: 1024px) {
	.impulzo-seccion-metodologia-grid {
		grid-template-columns: repeat(var(--impulzo-met-cols, 2), minmax(0, 1fr));
	}

	.impulzo-seccion-metodologia-title {
		font-size: 1.2rem;
	}
}

@media (max-width: 768px) {
	.impulzo-seccion-metodologia-grid {
		grid-template-columns: repeat(var(--impulzo-met-cols, 1), minmax(0, 1fr));
	}

	.impulzo-seccion-metodologia-title {
		font-size: 1.15rem;
	}
}