.c-buttons-group {
  display: flex;
  gap: 5px;
}

.o-button {
  padding: 8px 8px 8px 16px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  font-size: 14px;
  width: fit-content;
  justify-content: center;
  align-items: center;
  transition: all 0.4s ease-in-out;
  position: relative;
  overflow: hidden;
  height: fit-content;
}

.o-button span {
  font-weight: 500;
}
.o-button--primary {
  background-color: white;
  color: var(--color-body);
  border: 1px solid var(--color-blue-light);
}

.o-button--secondary {
  background-color: var(--color-body);
  color: white !important;
  width: fit-content;
}

.o-button-round {
  color: white;
  border-radius: 99px;
  padding: 0;
  background: var(--color-body);
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  position: static;
}

.o-button--primary .icon-container {
  border: transparent;
  position: relative;
  margin-left: 8px;
  background: linear-gradient(to right, var(--color-body) 40%, #2ad8f7 120%);
  background-size: 200% 100%;
  background-position: left;
  border-radius: 50px;
  width: 24px;
  height: 24px;
  transition: background-position 0.5s cubic-bezier(0.77, 0, 0.175, 1);

  flex: none;
}

.o-button-round .icon-container {
  border: transparent;
  position: relative;
  background: linear-gradient(to right, var(--color-body) 40%, #2ad8f7 120%);
  background-size: 200% 100%;
  background-position: left;
  border-radius: 50px;
  width: 24px;
  height: 24px;
  transition: background-position 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.custom-arrow .icon-container {
  border: transparent;
  position: relative;
  background: linear-gradient(to right, var(--color-body) 40%, #2ad8f7 120%);
  background-size: 200% 100%;
  background-position: left;
  border-radius: 50px;
  width: 32px;
  height: 32px;
  transition: background-position 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.custom-arrow svg {
  position: absolute;
  top: 0px;
  left: 0px;
  color: white;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  padding: 8px;
  transition: 0.4s ease-in-out;
}

.o-button-round svg {
  position: absolute;
  top: 0px;
  left: 0px;
  color: white;
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  padding: 4px;
  transition: 0.4s ease-in-out;
}
.o-button--secondary .icon-container {
  position: relative;
  margin-left: 8px;
  background: linear-gradient(to right, white 60%, #2ad8f7 110%);
  background-size: 200% 100%;
  background-position: left;
  border-radius: 50px;
  width: 24px;
  height: 24px;
  transition: background-position 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  flex: none;
}

.o-button--secondary {
  position: relative;
  background: linear-gradient(45deg, var(--color-body) 40%, #2ad8f7 110%);
  background-size: 200% 100%;
  background-position: left;
  transition: background-position 0.6s ease-out;
}
.o-button--primary .icon-container .icon-right {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  border-radius: 50%;
  padding: 6px;
  width: 24px;
  height: 24px;
  transition: all 0.4s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
}

.o-button--secondary .icon-container .icon-right {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-body);
  border-radius: 50%;
  padding: 6px;
  width: 24px;
  height: 24px;
  transition: all 0.4s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-enter {
  transform: translateX(-100%);
  opacity: 0;
  background: none;
  z-index: 1;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1),
    opacity 0.2s cubic-bezier(0.77, 0, 0.175, 1);
}

.icon-exit {
  z-index: 2;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1),
    opacity 0.2s cubic-bezier(0.77, 0, 0.175, 1);
}

.o-button:hover .icon-exit,
.c-card-square:hover .icon-exit {
  transform: translateX(100%);
  opacity: 0;
}

.o-button:hover .icon-enter,
.c-card-square:hover .icon-enter {
  transform: translateX(0%);
  opacity: 1;
}
.o-button--primary:hover .icon-container {
  background-position: right;
}
.o-button--secondary:hover {
  background-position: right;
}
.custom-arrow:hover .icon-container {
  background-position: right;
}

/* estados base con variables */
/* cada svg puede recibir su dirección */
.icon-right[data-dir],
.icon-exit[data-dir],
.icon-enter[data-dir] {
  --enter-x: -100%;
  --enter-y: 0;
  --exit-x: 100%;
  --exit-y: 0;
}

.icon-right[data-dir="down"],
.icon-exit[data-dir="down"],
.icon-enter[data-dir="down"] {
  --enter-x: 0;
  --enter-y: -100%;
  --exit-x: 0;
  --exit-y: 100%;
}

.icon-right[data-dir="ne"],
.icon-exit[data-dir="ne"],
.icon-enter[data-dir="ne"] {
  --enter-x: -100%;
  --enter-y: 100%;
  --exit-x: 100%;
  --exit-y: -100%;
}
/* animaciones usando variables con valores por defecto */
.icon-enter {
  transform: translate(
    var(--enter-x, -100%),
    /* si no hay var(--enter-x) usa -100% */ var(--enter-y, 0)
      /* si no hay var(--enter-y) usa 0 */
  );
  opacity: 0;

  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
/* animaciones usando variables con valores por defecto */
.slick-prev .icon-enter,
.pager__item--previous .icon-enter {
  transform: translate(
    var(--enter-x, 100%),
    /* si no hay var(--enter-x) usa -100% */ var(--enter-y, 0)
      /* si no hay var(--enter-y) usa 0 */
  );
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.icon-exit {
  transform: translate(0, 0);
  opacity: 1;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.o-button:hover .icon-exit,
.custom-arrow.slick-next:hover .icon-exit {
  transform: translate(
    var(--exit-x, 100%),
    /* por defecto derecha */ var(--exit-y, 0)
      /* por defecto sin movimiento vertical */
  );
  opacity: 0;
}

.o-button:hover .icon-enter,
.custom-arrow.slick-next:hover .icon-enter {
  transform: translate(0, 0);
  opacity: 1;
}

.custom-arrow.slick-prev:hover .icon-exit {
  transform: translate(
    var(--exit-x, -100%),
    /* por defecto derecha */ var(--exit-y, 0)
      /* por defecto sin movimiento vertical */
  );
  opacity: 0;
}

.custom-arrow.slick-prev:hover .icon-enter {
  transform: translate(0, 0);
  opacity: 1;
}
.o-button--cta {
  background-color: var(--color-primary);
  background-image: linear-gradient(
    90deg,
    var(--color-primary) 50%,
    var(--color-green) 100%
  );
  background-size: 200% 100%;
  background-position: left;
  transition: background-position 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  text-decoration: none;
  color: white;
  padding: 10px 20px;
  gap: 12px;
}
.o-button--cta:hover {
  background-position: right center;
}

.icon--primary {
  background-color: var(--color-body);
  color: white;
  border-radius: 50px;
  padding: 4px;
  width: 20px;
  height: 20px;
}

.button-pos--right {
  display: flex;
  gap: 1rem;
  align-items: flex-end !important;
  margin: 0 auto 80px;
}
.button-pos--bottom {
  display: flex;
  flex-direction: column;
  margin: 0 auto 48px;
  align-items: center;
}

.c-card .o-button--primary {
  border: 1px solid var(--color-border-primary);
}

@media (min-width: 1024px) {
  .button-pos--right .c-title-text-block-module__wrapper {
    margin: initial;
  }
}