.bloque-productos-modulares {
  display: flex;
  width: calc(100% - 3.76rem);
  margin: 1.88rem;
  flex-direction: column;
  align-items: center;
  background: var(--Neutral-White, #FFF);
  border-radius: 1.25rem;
  position: relative;
  overflow: clip;
  height: 46.25rem;
}

.bloque-productos-modulares .bloque-productos-modulares-titulo {
  position: absolute;
  top: 3.75rem;
  color: #000;
  text-align: center;
  font-family: "Residenz Grotesk SemiBold";
  font-size: 4.5rem;
  line-height: 100%; /* 4.5rem */
  width: 50rem;
  z-index: 99;
}

.bloque-productos-modulares .bloque-productos-modulares-boton {
  position: absolute;
  padding: 0.625rem 1.5rem;
  gap: 0.625rem;
  border-radius: 18.75rem;
  background: var(--Brand-D4EB34, #D4EB34);
  color: var(--Neutral-1A1A1A, #1A1A1A);
  text-align: center;
  font-family: "Residenz Grotesk SemiBold";
  font-size: 0.875rem;
  line-height: 112%; /* 0.98rem */
  letter-spacing: 0.00875rem;
  bottom: 3.75rem;
  z-index: 9999;
}

.bloque-productos-modulares a.bloque-productos-modulares-boton, .bloque-productos-modulares a.bloque-productos-modulares-boton:visited, .bloque-productos-modulares a.bloque-productos-modulares-boton:hover, .bloque-productos-modulares a.bloque-productos-modulares-boton:active {
  color: var(--Neutral-1A1A1A, #1A1A1A);
  text-decoration: none;
}

.bloque-productos-modulares img {
  position: absolute;
  width: 15.43863rem;
  z-index: 999;
}

.bloque-productos-modulares .bloque-productos-modulares-imagen-central {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bloque-productos-modulares .bloque-productos-modulares-imagen-top {
  top: -15%;
  left: 50%;
  transform: translate(-50%, 0) scaleX(-1);
}

.bloque-productos-modulares .bloque-productos-modulares-imagen-top-right {
  top: -15%;
  right: -5%;
  transform: scaleX(-1);
}

.bloque-productos-modulares .bloque-productos-modulares-imagen-bottom-right {
  bottom: -15%;
  right: -5%;
  transform: scaleX(-1);
}

.bloque-productos-modulares .bloque-productos-modulares-imagen-bottom {
  bottom: -15%;
  left: 50%;
  transform: translate(-50%, 0) scaleX(-1);
}

.bloque-productos-modulares .bloque-productos-modulares-imagen-bottom-left {
  bottom: -15%;
  left: -5%;
}

.bloque-productos-modulares .bloque-productos-modulares-imagen-top-left {
  top: -15%;
  left: -5%;
}

.bloque-productos-modulares .bloque-productos-modulares-imagen-top.animate {
  animation: imagen-top-animation 2s ease-in-out forwards;
}

.bloque-productos-modulares .bloque-productos-modulares-imagen-bottom.animate {
  animation: imagen-bottom-animation 2s ease-in-out forwards;
}

@media screen and (min-width: 960px) and (max-width: 1920px) {

  .bloque-productos-modulares .bloque-productos-modulares-imagen-top-right.animate {
    animation: imagen-top-right-animation 2s ease-in-out forwards;
  }

  .bloque-productos-modulares .bloque-productos-modulares-imagen-bottom-right.animate {
    animation: imagen-bottom-right-animation 2s ease-in-out forwards;
  }

  .bloque-productos-modulares .bloque-productos-modulares-imagen-bottom-left.animate {
    animation: imagen-bottom-left-animation 2s ease-in-out forwards;
  }

  .bloque-productos-modulares .bloque-productos-modulares-imagen-top-left.animate {
    animation: imagen-top-left-animation 2s ease-in-out forwards;
  }
}

@media screen and (min-width: 1921px) and (max-width: 2100px) {

  .bloque-productos-modulares .bloque-productos-modulares-imagen-top-right.animate {
    animation: imagen-top-right-animation-ultrawide-2100 2s ease-in-out forwards;
  }

  .bloque-productos-modulares .bloque-productos-modulares-imagen-bottom-right.animate {
    animation: imagen-bottom-right-animation-ultrawide-2100 2s ease-in-out forwards;
  }

  .bloque-productos-modulares .bloque-productos-modulares-imagen-bottom-left.animate {
    animation: imagen-bottom-left-animation-ultrawide-2100 2s ease-in-out forwards;
  }

  .bloque-productos-modulares .bloque-productos-modulares-imagen-top-left.animate {
    animation: imagen-top-left-animation-ultrawide-2100 2s ease-in-out forwards;
  }
}

@media screen and (min-width: 2101px) and (max-width: 2350px) {

  .bloque-productos-modulares .bloque-productos-modulares-imagen-top-right.animate {
    animation: imagen-top-right-animation-ultrawide-2350 2s ease-in-out forwards;
  }

  .bloque-productos-modulares .bloque-productos-modulares-imagen-bottom-right.animate {
    animation: imagen-bottom-right-animation-ultrawide-2350 2s ease-in-out forwards;
  }

  .bloque-productos-modulares .bloque-productos-modulares-imagen-bottom-left.animate {
    animation: imagen-bottom-left-animation-ultrawide-2350 2s ease-in-out forwards;
  }

  .bloque-productos-modulares .bloque-productos-modulares-imagen-top-left.animate {
    animation: imagen-top-left-animation-ultrawide-2350 2s ease-in-out forwards;
  }
}

@media screen and (min-width: 2351px) and (max-width: 2500px) {

  .bloque-productos-modulares .bloque-productos-modulares-imagen-top-right.animate {
    animation: imagen-top-right-animation-ultrawide-2500 2s ease-in-out forwards;
  }

  .bloque-productos-modulares .bloque-productos-modulares-imagen-bottom-right.animate {
    animation: imagen-bottom-right-animation-ultrawide-2500 2s ease-in-out forwards;
  }

  .bloque-productos-modulares .bloque-productos-modulares-imagen-bottom-left.animate {
    animation: imagen-bottom-left-animation-ultrawide-2500 2s ease-in-out forwards;
  }

  .bloque-productos-modulares .bloque-productos-modulares-imagen-top-left.animate {
    animation: imagen-top-left-animation-ultrawide-2500 2s ease-in-out forwards;
  }
}

@media screen and (min-width: 2501px) {

  .bloque-productos-modulares .bloque-productos-modulares-imagen-top-right.animate {
    animation: imagen-top-right-animation-ultrawide-max 2s ease-in-out forwards;
  }

  .bloque-productos-modulares .bloque-productos-modulares-imagen-bottom-right.animate {
    animation: imagen-bottom-right-animation-ultrawide-max 2s ease-in-out forwards;
  }

  .bloque-productos-modulares .bloque-productos-modulares-imagen-bottom-left.animate {
    animation: imagen-bottom-left-animation-ultrawide-max 2s ease-in-out forwards;
  }

  .bloque-productos-modulares .bloque-productos-modulares-imagen-top-left.animate {
    animation: imagen-top-left-animation-ultrawide-max 2s ease-in-out forwards;
  }
}

@media screen and (max-width: 959px) {
  .bloque-productos-modulares {
    width: calc(100% - 1.5rem);
    margin: 0.75rem !important;
  }

  .bloque-productos-modulares .bloque-productos-modulares-titulo {
    font-size: 1.5rem;
    width: 15.2rem;
  }

  .bloque-productos-modulares .bloque-productos-modulares-boton {
    padding: 0.5rem 1.125rem;
    font-size: 0.625rem;
  }

  .bloque-productos-modulares img {
    width: 7.00994rem;
  }

  .bloque-productos-modulares {
    height: 36.6875rem;
  }

  .bloque-productos-modulares .bloque-productos-modulares-imagen-top.animate {
    animation: imagen-top-animation-mobile 2s ease-in-out forwards;
  }

  .bloque-productos-modulares .bloque-productos-modulares-imagen-bottom.animate {
    animation: imagen-bottom-animation-mobile 2s ease-in-out forwards;
  }

  .bloque-productos-modulares .bloque-productos-modulares-imagen-top-right.animate {
    animation: imagen-top-right-animation-mobile 2s ease-in-out forwards;
  }

  .bloque-productos-modulares .bloque-productos-modulares-imagen-bottom-right.animate {
    animation: imagen-bottom-right-animation-mobile 2s ease-in-out forwards;
  }

  .bloque-productos-modulares .bloque-productos-modulares-imagen-bottom-left.animate {
    animation: imagen-bottom-left-animation-mobile 2s ease-in-out forwards;
  }

  .bloque-productos-modulares .bloque-productos-modulares-imagen-top-left.animate {
    animation: imagen-top-left-animation-mobile 2s ease-in-out forwards;
  }

  .bloque-productos-modulares .bloque-productos-modulares-imagen-top {
    top: -11%;
    left: 50%;
    transform: translate(-50%, 0) scaleX(-1);
  }

  .bloque-productos-modulares .bloque-productos-modulares-imagen-top-right {
    top: -10%;
    right: -5%;
    transform: scaleX(-1);
  }

  .bloque-productos-modulares .bloque-productos-modulares-imagen-bottom-right {
    bottom: -10%;
    right: -5%;
    transform: scaleX(-1);
  }

  .bloque-productos-modulares .bloque-productos-modulares-imagen-bottom {
    bottom: -11%;
    left: 50%;
    transform: translate(-50%, 0) scaleX(-1);
  }

  .bloque-productos-modulares .bloque-productos-modulares-imagen-bottom-left {
    bottom: -10%;
    left: -5%;
  }

  .bloque-productos-modulares .bloque-productos-modulares-imagen-top-left {
    top: -10%;
    left: -5%;
  }
}


@keyframes imagen-top-animation {
  from {
    top: -15%;
  }
  to {
    top: 5%;
  }
}

@keyframes imagen-top-right-animation {
  from {
    top: -15%;
    right: -5%;
  }
  to {
    top: 20%;
    right: 33%;
  }
}

@keyframes imagen-bottom-right-animation {
  from {
    bottom: -15%;
    right: -5%;
  }
  to {
    bottom: 21%;
    right: 33%;
  }
}

@keyframes imagen-bottom-animation {
  from {
    bottom: -15%;
  }
  to {
    bottom: 5%;
  }
}

@keyframes imagen-bottom-left-animation {
  from {
    bottom: -15%;
    left: -5%;
  }
  to {
    bottom: 21%;
    left: 33%;
  }
}

@keyframes imagen-top-left-animation {
  from {
    top: -15%;
    left: -5%;
  }
  to {
    top: 20%;
    left: 33%;
  }
}


@keyframes imagen-top-right-animation-ultrawide-max {
  from {
    top: -15%;
    right: -5%;
  }
  to {
    top: 20%;
    right: 37%;
  }
}

@keyframes imagen-bottom-right-animation-ultrawide-max {
  from {
    bottom: -15%;
    right: -5%;
  }
  to {
    bottom: 21%;
    right: 37%;
  }
}

@keyframes imagen-bottom-left-animation-ultrawide-max {
  from {
    bottom: -15%;
    left: -5%;
  }
  to {
    bottom: 21%;
    left: 37%;
  }
}

@keyframes imagen-top-left-animation-ultrawide-max {
  from {
    top: -15%;
    left: -5%;
  }
  to {
    top: 20%;
    left: 37%;
  }
}

@keyframes imagen-top-right-animation-ultrawide-2500 {
  from {
    top: -15%;
    right: -5%;
  }
  to {
    top: 20%;
    right: 36%;
  }
}

@keyframes imagen-bottom-right-animation-ultrawide-2500 {
  from {
    bottom: -15%;
    right: -5%;
  }
  to {
    bottom: 21%;
    right: 36%;
  }
}

@keyframes imagen-bottom-left-animation-ultrawide-2500 {
  from {
    bottom: -15%;
    left: -5%;
  }
  to {
    bottom: 21%;
    left: 36%;
  }
}

@keyframes imagen-top-left-animation-ultrawide-2500 {
  from {
    top: -15%;
    left: -5%;
  }
  to {
    top: 20%;
    left: 36%;
  }
}


@keyframes imagen-top-right-animation-ultrawide-2350 {
  from {
    top: -15%;
    right: -5%;
  }
  to {
    top: 20%;
    right: 34.5%;
  }
}

@keyframes imagen-bottom-right-animation-ultrawide-2350 {
  from {
    bottom: -15%;
    right: -5%;
  }
  to {
    bottom: 21%;
    right: 34.5%;
  }
}

@keyframes imagen-bottom-left-animation-ultrawide-2350 {
  from {
    bottom: -15%;
    left: -5%;
  }
  to {
    bottom: 21%;
    left: 34.5%;
  }
}

@keyframes imagen-top-left-animation-ultrawide-2350 {
  from {
    top: -15%;
    left: -5%;
  }
  to {
    top: 20%;
    left: 34.5%;
  }
}


@keyframes imagen-top-right-animation-ultrawide-2100 {
  from {
    top: -15%;
    right: -5%;
  }
  to {
    top: 20%;
    right: 33%;
  }
}

@keyframes imagen-bottom-right-animation-ultrawide-2100 {
  from {
    bottom: -15%;
    right: -5%;
  }
  to {
    bottom: 21%;
    right: 33%;
  }
}

@keyframes imagen-bottom-left-animation-ultrawide-2100 {
  from {
    bottom: -15%;
    left: -5%;
  }
  to {
    bottom: 21%;
    left: 33%;
  }
}

@keyframes imagen-top-left-animation-ultrawide-2100 {
  from {
    top: -15%;
    left: -5%;
  }
  to {
    top: 20%;
    left: 33%;
  }
}

@keyframes imagen-top-animation-mobile {
  from {
    top: -11%;
  }
  to {
    top: 24%;
  }
}

@keyframes imagen-top-right-animation-mobile {
  from {
    top: -10%;
    right: -5%;
  }
  to {
    top: 33%;
    right: 3%;
  }
}

@keyframes imagen-bottom-right-animation-mobile {
  from {
    bottom: -10%;
    right: -5%;
  }
  to {
    bottom: 33%;
    right: 3%;
  }
}

@keyframes imagen-bottom-animation-mobile {
  from {
    bottom: -11%;
  }
  to {
    bottom: 24%;
  }
}

@keyframes imagen-bottom-left-animation-mobile {
  from {
    bottom: -10%;
    left: -5%;
  }
  to {
    bottom: 33%;
    left: 3%;
  }
}

@keyframes imagen-top-left-animation-mobile {
  from {
    top: -10%;
    left: -5%;
  }
  to {
    top: 33%;
    left: 3%;
  }
}
