.impro-process-main,
.impro-process-main * {
  box-sizing: border-box !important;
}

.impro-process-main {
  --ip-yellow: #FFC72C;
  --ip-yellow-2: #EDBA2B;
  --ip-yellow-3: #E5A600;
  --ip-black: #1F1F1F;
  --ip-gray: #5A5A5A;
  --ip-light: #D6D6D2;
  --ip-paper: #F4F4F2;
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: var(--ip-black) !important;
  color: var(--ip-paper) !important;
  padding: 118px 0 126px !important;
  font-family: "Inter", system-ui, sans-serif !important;
}

.impro-process-main::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -4 !important;
  background-image: url("/5_pasos/ascensor_de_carga_improcol_para_elevacion_vertical_industrial_segura_y_eficiente_en_bogota_colombia.webp") !important;
  background-size: cover !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
  transform: scale(1.03) !important;
}

.impro-process-main::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -3 !important;
  background:
    linear-gradient(90deg, rgba(31,31,31,0.46) 0%, rgba(31,31,31,0.22) 42%, rgba(31,31,31,0.04) 70%, rgba(31,31,31,0.16) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0) 46%, rgba(0,0,0,0.26) 100%) !important;
}

.impro-process-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  opacity: 0.12 !important;
  background-image:
    linear-gradient(rgba(255,199,44,0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,199,44,0.35) 1px, transparent 1px) !important;
  background-size: 86px 86px !important;
  pointer-events: none !important;
}

.impro-process-wrap {
  position: relative !important;
  z-index: 2 !important;
  width: min(100% - 96px, 1400px) !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}

.impro-process-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.65fr) !important;
  gap: 52px !important;
  align-items: end !important;
  margin-bottom: 58px !important;
}

.impro-process-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 13px !important;
  color: var(--ip-yellow) !important;
  font-family: "JetBrains Mono", Consolas, monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
}

.impro-process-eyebrow .bar {
  display: block !important;
  width: 38px !important;
  height: 2px !important;
  background: var(--ip-yellow) !important;
}

.impro-process-titlebox h2 {
  margin: 0 !important;
  max-width: 760px !important;
  color: #fff !important;
  font-family: "Archivo", "Inter", system-ui, sans-serif !important;
  font-size: clamp(42px, 5.2vw, 78px) !important;
  font-weight: 900 !important;
  line-height: 0.94 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.impro-process-titlebox h2 em {
  color: var(--ip-yellow) !important;
  font-style: normal !important;
}

.impro-process-head p {
  position: relative !important;
  margin: 0 !important;
  max-width: 520px !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.68 !important;
  padding: 22px 0 0 28px !important;
  border-left: 2px solid rgba(255,199,44,0.72) !important;
  text-shadow: 0 2px 18px rgba(0,0,0,0.58) !important;
}

.impro-process-grid {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border: 1px solid rgba(255,199,44,0.46) !important;
  background: rgba(31,31,31,0.70) !important;
  box-shadow: 0 28px 70px rgba(0,0,0,0.48) !important;
  backdrop-filter: blur(8px) !important;
}

.impro-process-grid::before {
  content: "" !important;
  position: absolute !important;
  top: -1px !important;
  left: 0 !important;
  width: 100% !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--ip-yellow), var(--ip-yellow-3), var(--ip-yellow)) !important;
  z-index: 2 !important;
}

.impro-process-step {
  position: relative !important;
  min-height: 310px !important;
  padding: 34px 24px 28px !important;
  border-right: 1px solid rgba(214,214,210,0.16) !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0)),
    rgba(18,18,18,0.76) !important;
}

.impro-process-step:last-child {
  border-right: 0 !important;
}

.impro-process-step::before {
  content: "" !important;
  position: absolute !important;
  inset: auto 18px 18px auto !important;
  width: 44px !important;
  height: 44px !important;
  border-right: 1px solid rgba(255,199,44,0.62) !important;
  border-bottom: 1px solid rgba(255,199,44,0.62) !important;
  opacity: 0.9 !important;
}

.impro-process-step::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: 100% !important;
  background: linear-gradient(180deg, rgba(255,199,44,0.16), rgba(255,199,44,0.04)) !important;
  transition: width 0.28s ease !important;
}

.impro-process-step:hover::after {
  width: 100% !important;
}

.impro-step-top,
.impro-process-step h3,
.impro-process-step p {
  position: relative !important;
  z-index: 2 !important;
}

.impro-step-top {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 42px !important;
}

.impro-step-num {
  display: block !important;
  color: var(--ip-yellow) !important;
  font-family: "Archivo", "Inter", system-ui, sans-serif !important;
  font-size: 54px !important;
  font-weight: 900 !important;
  line-height: 0.82 !important;
  letter-spacing: 0 !important;
}

.impro-step-tag {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 26px !important;
  padding: 6px 9px !important;
  border: 1px solid rgba(255,199,44,0.46) !important;
  color: var(--ip-yellow) !important;
  background: rgba(255,199,44,0.08) !important;
  font-family: "JetBrains Mono", Consolas, monospace !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
}

.impro-process-step h3 {
  margin: 0 0 12px !important;
  color: #fff !important;
  font-family: "Archivo", "Inter", system-ui, sans-serif !important;
  font-size: 22px !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.impro-process-step p {
  margin: 0 !important;
  color: rgba(244,244,242,0.84) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.58 !important;
}

.impro-process-step-final {
  background:
    linear-gradient(180deg, rgba(255,199,44,0.18), rgba(31,31,31,0.60)),
    rgba(18,18,18,0.78) !important;
}

.impro-process-frame {
  position: absolute !important;
  z-index: 3 !important;
  width: 26px !important;
  height: 26px !important;
  pointer-events: none !important;
  border-color: rgba(244,244,242,0.84) !important;
  border-style: solid !important;
}

.impro-process-frame.tl {
  top: 34px !important;
  left: 34px !important;
  border-width: 1px 0 0 1px !important;
}

.impro-process-frame.tr {
  top: 34px !important;
  right: 34px !important;
  border-width: 1px 1px 0 0 !important;
}

.impro-process-frame.bl {
  bottom: 34px !important;
  left: 34px !important;
  border-width: 0 0 1px 1px !important;
}

.impro-process-frame.br {
  right: 34px !important;
  bottom: 34px !important;
  border-width: 0 1px 1px 0 !important;
}

@media (min-width: 1600px) {
  .impro-process-wrap {
    width: min(100% - 120px, 1500px) !important;
    max-width: 1500px !important;
  }

  .impro-process-step {
    min-height: 326px !important;
    padding: 38px 28px 30px !important;
  }
}

@media (min-width: 1367px) and (max-width: 1599px) {
  .impro-process-wrap {
    width: min(100% - 92px, 1400px) !important;
  }
}

@media (min-width: 1200px) and (max-width: 1366px) {
  .impro-process-main {
    padding: 104px 0 112px !important;
  }

  .impro-process-wrap {
    width: min(100% - 72px, 1280px) !important;
  }

  .impro-process-step {
    padding: 30px 18px 26px !important;
  }

  .impro-step-num {
    font-size: 48px !important;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .impro-process-wrap {
    width: min(100% - 56px, 1080px) !important;
  }

  .impro-process-head {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

  .impro-process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .impro-process-step:nth-child(3) {
    border-right: 0 !important;
  }

  .impro-process-step:nth-child(n+4) {
    border-top: 1px solid rgba(214,214,210,0.16) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .impro-process-main {
    padding: 96px 0 104px !important;
  }

  .impro-process-main::after {
    background:
      linear-gradient(90deg, rgba(31,31,31,0.54) 0%, rgba(31,31,31,0.24) 55%, rgba(31,31,31,0.14) 100%),
      linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 46%, rgba(0,0,0,0.30) 100%) !important;
  }

  .impro-process-wrap {
    width: min(100% - 44px, 920px) !important;
  }

  .impro-process-head {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-bottom: 42px !important;
  }

  .impro-process-titlebox h2 {
    font-size: clamp(38px, 8vw, 60px) !important;
  }

  .impro-process-head p {
    max-width: 700px !important;
  }

  .impro-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .impro-process-step {
    min-height: 260px !important;
    border-top: 1px solid rgba(214,214,210,0.16) !important;
  }

  .impro-process-step:nth-child(1),
  .impro-process-step:nth-child(2) {
    border-top: 0 !important;
  }

  .impro-process-step:nth-child(2),
  .impro-process-step:nth-child(4) {
    border-right: 0 !important;
  }

  .impro-process-step-final {
    grid-column: 1 / -1 !important;
    min-height: 230px !important;
  }
}

@media (min-width: 501px) and (max-width: 767px) {
  .impro-process-main {
    padding: 84px 0 92px !important;
  }

  .impro-process-main::before {
    background-position: 54% center !important;
  }

  .impro-process-main::after {
    background:
      linear-gradient(90deg, rgba(31,31,31,0.58) 0%, rgba(31,31,31,0.30) 58%, rgba(31,31,31,0.18) 100%),
      linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 46%, rgba(0,0,0,0.34) 100%) !important;
  }

  .impro-process-wrap {
    width: min(100% - 34px, 700px) !important;
  }

  .impro-process-head {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    margin-bottom: 34px !important;
  }

  .impro-process-titlebox h2 {
    font-size: clamp(34px, 9vw, 48px) !important;
  }

  .impro-process-head p {
    padding: 18px 0 0 20px !important;
    font-size: 15px !important;
  }

  .impro-process-grid {
    grid-template-columns: 1fr !important;
  }

  .impro-process-step {
    min-height: auto !important;
    padding: 28px 24px 26px !important;
    border-right: 0 !important;
    border-top: 1px solid rgba(214,214,210,0.16) !important;
  }

  .impro-process-step:first-child {
    border-top: 0 !important;
  }

  .impro-step-top {
    margin-bottom: 26px !important;
  }
}

@media (max-width: 500px) {
  .impro-process-main {
    padding: 72px 0 80px !important;
  }

  .impro-process-main::before {
    background-position: 55% center !important;
    transform: scale(1.02) !important;
  }

  .impro-process-main::after {
    background:
      linear-gradient(180deg, rgba(31,31,31,0.42) 0%, rgba(31,31,31,0.16) 36%, rgba(31,31,31,0.58) 100%),
      linear-gradient(90deg, rgba(31,31,31,0.42) 0%, rgba(31,31,31,0.08) 100%) !important;
  }

  .impro-process-bg {
    opacity: 0.08 !important;
    background-size: 54px 54px !important;
  }

  .impro-process-wrap {
    width: min(100% - 28px, 470px) !important;
  }

  .impro-process-head {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin-bottom: 28px !important;
  }

  .impro-process-eyebrow {
    font-size: 10px !important;
    gap: 10px !important;
    margin-bottom: 15px !important;
  }

  .impro-process-eyebrow .bar {
    width: 28px !important;
  }

  .impro-process-titlebox h2 {
    font-size: clamp(31px, 11vw, 42px) !important;
    line-height: 0.98 !important;
  }

  .impro-process-head p {
    padding: 16px 0 0 16px !important;
    font-size: 14.5px !important;
    line-height: 1.58 !important;
  }

  .impro-process-grid {
    grid-template-columns: 1fr !important;
  }

  .impro-process-step {
    min-height: auto !important;
    padding: 25px 20px 24px !important;
    border-right: 0 !important;
    border-top: 1px solid rgba(214,214,210,0.16) !important;
  }

  .impro-process-step:first-child {
    border-top: 0 !important;
  }

  .impro-step-top {
    align-items: center !important;
    margin-bottom: 22px !important;
  }

  .impro-step-num {
    font-size: 44px !important;
  }

  .impro-process-step h3 {
    font-size: 20px !important;
  }

  .impro-process-frame {
    width: 18px !important;
    height: 18px !important;
  }

  .impro-process-frame.tl {
    top: 18px !important;
    left: 18px !important;
  }

  .impro-process-frame.tr {
    top: 18px !important;
    right: 18px !important;
  }

  .impro-process-frame.bl {
    bottom: 18px !important;
    left: 18px !important;
  }

  .impro-process-frame.br {
    right: 18px !important;
    bottom: 18px !important;
  }
}