[class*="swiper-controls"] {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 2.125rem; /* 34px */
}

.swiper-controls--absolute {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
}

.swiper-pagination.swiper-pagination-horizontal {
    position: relative;
    top: auto;
    bottom: auto;
    display: flex;
    justify-content: center;
    height: .75rem; /* 12px; */
}

.swiper-pagination.swiper-pagination--outlined .swiper-pagination-bullet {
  animation-duration:.3s;
  background-color:transparent;
  border-color:hsla(0,0%,100%,.502);
  border-radius:9999px;
  border-width:2px;
  height:.75rem;
  transition-duration:.15s;
  transition-duration:.3s;
  transition-property:all;
  transition-timing-function:cubic-bezier(.4, 0, .2, 1);
  width:.75rem;
}

.swiper-pagination.swiper-pagination--outlined .swiper-pagination-bullett:hover{
  border-color:hsla(0,0%,100%,.8);
}

.swiper-pagination.swiper-pagination--outlined .swiper-pagination-bullet-active {
  --tw-scale-x:1.25;
  --tw-scale-y:1.25;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity:1;
  border-color:rgb(255, 255, 255, var(--tw-border-opacity, 1));
  --tw-bg-opacity:1;
  background-color:rgb(255, 255, 255, var(--tw-bg-opacity, 1));
}

.swiper-pagination-bullet {
    --swiper-pagination-bullet-size: .75rem; /* 12px; */
    --swiper-pagination-color: hsl(var(--primary));
    --swiper-pagination-bullet-inactive-color: rgb(209 213 219 / var(--tw-bg-opacity, 1)); 
    --swiper-pagination-bullet-inactive-opacity: 1;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
	transition-timing-function: cubic-bezier(.4,0,.2,1);
	transition-duration: .15s;
}

.swiper-pagination-horizontal .swiper-pagination-bullet:first-child {
    margin-left: 0 !important;
}

.swiper-pagination-horizontal .swiper-pagination-bullet:last-child {
    margin-right: 0 !important;
}

[class*="swiper-switch"],
.swiper-button-prev,
.swiper-button-next {
    top: 0;
    bottom: 0;
    margin: auto;
    min-width: 2.125rem; /* 34px */
    width: 2.125rem; /* 34px */
    /* max-height: 2.125rem; /* 34px */
    height: 2.125rem; /* 34px */
    border-radius: 100px;
    background-color: rgb(255 255 255 / 1);
    border: 1px solid rgb(229 231 235 / 1);
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.swiper-button-prev::before,
.swiper-button-next::before {
    content: "";
    width: 1rem;
    height: 1rem;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="m15 18-6-6 6-6"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.swiper-horizontal .swiper-button-next,
.swiper-horizontal .swiper-button-prev {
    top: auto;
    margin: auto;
}

.swiper-button-next {
    transform: rotate(180deg);
}

[class*="swiper-button--arrow"]::before {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="m12 19-7-7 7-7"/%3E%3Cpath d="M19 12H5"/%3E%3C/svg%3E') !important;
}

.swiper-button--arrow:hover {
    background-color: var(--red);
}

.swiper-button--arrow:hover::before {
    filter: brightness(0) invert(1);
}

.swiper-button-prev.swiper-button-outer {
    left: -34px;
}

.swiper-button-next.swiper-button-outer {
    left: auto;
    right: -34px;
}

.swiper-button-prev.swiper-button-outer-mid {
    left: -17px;
}

.swiper-button-next.swiper-button-outer-mid {
    left: auto;
    right: -17px;
}

.swiper-navigation-icon {
    display: none;
}



[class*="swiper-button"] {
    transition-duration: .2s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
}

/* 
 * Fondo rojo bullets
 */
.swiper:has(.bg-rojo.swiper-slide-active) .swiper-pagination-bullet {
    background-color: #fff6;
}

.swiper:has(.bg-rojo.swiper-slide-active) .swiper-pagination-bullet-active {
    background-color: #fff;
}

/* 
 * Fondo rojo navigation
 */
.swiper:has(.bg-rojo.swiper-slide-active) [class*="swiper-button"] {
    background-color: #fff3;
    border-color: transparent;
}

.swiper:has(.bg-rojo.swiper-slide-active) [class*="swiper-button"]:hover {
    background-color: #ffffff4d;
}

.swiper:has(.bg-rojo.swiper-slide-active) [class*="swiper-button"]::before {
    filter: brightness(0) invert(100);
}


/* 
 * Fondo negro bullets
 */
.swiper:has(.bg-negro.swiper-slide-active) .swiper-pagination-bullet {
    background-color: #fff6;
}

.swiper:has(.bg-negro.swiper-slide-active) .swiper-pagination-bullet-active {
    background-color: #fff;
}

/* 
 * Fondo negro navigation
 */
.swiper:has(.bg-negro.swiper-slide-active) [class*="swiper-button"] {
    background-color: #fff3;
    border-color: transparent;
}

.swiper:has(.bg-negro.swiper-slide-active) [class*="swiper-button"]:hover {
    background-color: #ffffff4d;
}

.swiper:has(.bg-negro.swiper-slide-active) [class*="swiper-button"]::before {
    filter: brightness(0) invert(100);
}

/* 
 * Fondo blanco bullets
 */
.swiper:has(.bg-blanco.swiper-slide-active) .swiper-pagination-bullet {
    background-color: #0006;
}

.swiper:has(.bg-blanco.swiper-slide-active) .swiper-pagination-bullet-active {
    background-color: #000;
}

/* 
 * Fondo blanco navigation
 */
.swiper:has(.bg-blanco.swiper-slide-active) [class*="swiper-button"] {
    background-color: #0000001a;
    border-color: transparent;
}

.swiper:has(.bg-blanco.swiper-slide-active) [class*="swiper-button"]:hover {
    background-color: #0003;
}

.swiper:has(.bg-blanco.swiper-slide-active) [class*="swiper-button"]::before {
    filter: brightness(0) invert(0);
}