:root {
	--title-size: 50px;
}
@media (max-width: 750px) {
:root {
	--title-size: 40px;
}
}

.bloque-proceso p {margin-block-start: 0; margin-block-end: 0;}

.bloque-proceso {
	display: flex;
    flex-direction: column;
    row-gap: var( --gap-xl );
    column-gap: var( --gap-m );
	flex-wrap: wrap;
	align-items: center;
}
.bloque-proceso .contenedor {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: var( --gap-l );
    column-gap: var( --gap-xxl );
	background: linear-gradient(180deg, var(--accent-color) 0%,  var(--orange-light) 100%);
    padding: var(--space-xl) var(--space-xxl);
}
.bloque-proceso .paso {
	display: flex;
    flex-direction: column;
    flex: 1;
    row-gap: var( --gap-m );
    column-gap: var( --gap-l );
}
.bloque-proceso .paso .proceso-titulo, .bloque-proceso .paso span {
	color: var(--text-white)
}
.bloque-proceso .paso .proceso-titulo {
	background-color: var(--orange-light);
	padding: var(--space-xxs) var(--space-xxl) var(--space-xxs) calc( var(--space-xxs) + var(--title-size) );
	line-height: var(--line-height-s);
	position: relative;
	height: var(--title-size);
    display: flex;
    align-items: center;
	font-weight: var(--text-weight-500);
}
.bloque-proceso .paso > div {
    display: flex;
    align-items: center;
}
.bloque-proceso .paso .proceso-titulo:before {
    content: " ";
	font-size: var(--text-xl-size);
    color: var(--accent-color);
    background-color: var(--text-white);
    padding: var(--space-xs);
    line-height: var(--line-height-s);
    border-radius: 150px;
    position: absolute;
    top: 0;
    left: 0;
	height: var(--title-size);
    width: var(--title-size);
    display: flex;
    justify-content: center;
    align-items: center;
}
.bloque-proceso .paso:nth-child(1) .proceso-titulo:before {
    content: "1";
}
.bloque-proceso .paso:nth-child(2) .proceso-titulo:before {
    content: "2";
}
.bloque-proceso .paso:nth-child(3) .proceso-titulo:before {
    content: "3";
}


@media (max-width: 1140px) {
	.bloque-proceso .contenedor {
		column-gap: var( --gap-l );
	}
}
@media (max-width: 750px) {
	.bloque-proceso .contenedor {
		flex-direction: column;
	}
}