.horizontal-blue-card__wrapper {
display: flex;
padding: 5rem;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: stretch;
position: relative;
}

.white-100 {
color: #fff !important;
}

.horizontal-bc__stripe {
  position: absolute;
  width: 100%;
  max-width: 80rem;
  height: 12.5rem;
  border-radius: 1.5rem 1.5rem 0 0;
  z-index: 1;
  bottom: 0;
}

.horizontal-bc__inner {
display: flex;
width: 100%;
max-width: 1062px;
gap; 2rem;
border-radius: 1.5rem;
position: relative;
z-index: 3;
overflow: hidden;  
}

.hbc__text {
display: flex;
  flex-direction: column;
  padding: 1.5rem;
  align-items: flex-start;
  gap: 1.25rem;
  width: 50%;
  position: relative;
  z-index: 5;
  justify-content: center;
}

.hbc__image {
  display: flex;
  width: 50%;
  align-self: stretch;
  position: relative;
  z-index: 5;
}

.hbc__image img {
display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hbc__stripe1 {
width: 100%;
height: 240px;
border-radius: 1.5rem 1.5rem 0 0;
position: absolute;
z-index: 1;
bottom: 0;  
}

.hbc__stripe2 {
width: 100%;
height: 160px;
border-radius: 1.5rem 1.5rem 0 0;
position: absolute;
z-index: 2;
bottom: 0;  
}

.hbc__stripe3 {
width: 100%;
height: 80px;
border-radius: 1.5rem 1.5rem 0 0;
position: absolute;
z-index: 3;
bottom: 0;  
}

@media (max-width: 1024px) {

  .horizontal-blue-card__wrapper {
    padding: 3rem 2rem;
  }

  .horizontal-bc__inner {
    flex-direction: column;
    max-width: 100%;
    gap: 1.5rem;
  }

  .hbc__text,
  .hbc__image {
    width: 100%;
  }

  .hbc__image {
    height: 260px; /* Ajustable */
  }

  .hbc__image img {
    height: 100%;
  }


  .hbc__stripe1,
  .hbc__stripe2,
  .hbc__stripe3 {
    display: none;
  }
}

@media (max-width: 767px) {

  .horizontal-blue-card__wrapper {
    padding: 3rem 1.5rem;
    margin: 0 1.5rem;
  }

  .horizontal-bc__inner {
    gap: 1rem;
    border-radius: 1.5rem;
  }

  .hbc__text {
    padding: 1.25rem;
    gap: 1rem;
  }

  .hbc__image {
    height: 280px; /* Ajustable */
  }

  .hbc__image img {
    height: 100%;
  }

  /* stripes pequeñas siguen ocultas */
  .hbc__stripe1,
  .hbc__stripe2,
  .hbc__stripe3 {
    display: none;
  }
}