/**
 * Estilos para Pasos de Proceso Elementor
 */

.ppe-steps-wrapper {
	--ppe-gap: 16px;
	--ppe-card-bg: #ffffff;
	--ppe-card-border-color: #ebe7f1;
	--ppe-card-border-width: 1px;
	--ppe-card-radius: 14px;
	--ppe-card-padding: 20px 28px;
	--ppe-card-shadow: 0 3px 14px rgba(45, 12, 80, 0.04);
	--ppe-card-shadow-hover: 0 8px 24px rgba(45, 12, 80, 0.09);
	--ppe-number-color: #f36a07;
	--ppe-number-size: 36px;
	--ppe-number-width: 84px;
	--ppe-divider-color: #f0ecf5;
	--ppe-divider-width: 1px;
	--ppe-content-gap: 26px;
	--ppe-title-color: #3d0b66;
	--ppe-desc-color: #2f3847;

	display: flex;
	flex-direction: column;
	gap: var(--ppe-gap);
	width: 100%;
	box-sizing: border-box;
	font-family: 'Montserrat', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ppe-step-card {
	position: relative;
	display: flex;
	align-items: center;
	background-color: var(--ppe-card-bg);
	border: var(--ppe-card-border-width) solid var(--ppe-card-border-color);
	border-radius: var(--ppe-card-radius);
	padding: var(--ppe-card-padding);
	box-shadow: var(--ppe-card-shadow);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	box-sizing: border-box;
	text-decoration: none !important;
	color: inherit;
}

.ppe-step-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--ppe-card-shadow-hover);
}

/* Columna del número (01, 02, 03, 04) */
.ppe-step-number-box {
	flex-shrink: 0;
	width: var(--ppe-number-width);
	display: flex;
	align-items: center;
	justify-content: center;
	padding-right: 18px;
	border-right: var(--ppe-divider-width) solid var(--ppe-divider-color);
	box-sizing: border-box;
}

.ppe-step-number {
	color: var(--ppe-number-color);
	font-size: var(--ppe-number-size);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	display: inline-block;
}

/* Columna de contenido (Título + Descripción) */
.ppe-step-content {
	flex: 1;
	min-width: 0;
	padding-left: var(--ppe-content-gap);
}

.ppe-step-title {
	margin: 0 0 5px 0;
	padding: 0;
	color: var(--ppe-title-color);
	font-size: 19px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.ppe-step-description {
	margin: 0;
	padding: 0;
	color: var(--ppe-desc-color);
	font-size: 14.5px;
	font-weight: 400;
	line-height: 1.45;
}

/* Responsivo: Móvil */
@media (max-width: 767px) {
	.ppe-step-card {
		padding: 18px 20px;
	}

	.ppe-step-number-box {
		width: 64px;
		padding-right: 14px;
	}

	.ppe-step-number {
		font-size: 28px;
	}

	.ppe-step-content {
		padding-left: 16px;
	}

	.ppe-step-title {
		font-size: 17px;
	}

	.ppe-step-description {
		font-size: 13.5px;
	}
}