/* Carrusel General - Responsive */
.carousel {
    position: relative;
    width: clamp(280px, 90%, 1300px);
    max-width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: clamp(0.75rem, 2vw, 1.25rem);
    margin-block: clamp(1.5rem, 5vw, 2.5rem);
    margin-inline: auto;
    background-color: transparent;
}

.carousel-images {
    display: flex;
    width: 100%;
    height: 100%;
    -webkit-transition: transform 1s ease-in-out;
    transition: transform 1s ease-in-out;
}

.carousel-images img {
    min-width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: transparent;
}

.arrow {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: clamp(1rem, 3vw, 1.5rem);
    color: #fff;
    cursor: pointer;
    z-index: 2;
    border: none;
    background: transparent;
    border-radius: 50%;
    width: clamp(1.75rem, 5vw, 2.25rem);
    height: clamp(1.75rem, 5vw, 2.25rem);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 0;
    padding: 0;
    padding-bottom: 0.2em;
    font-family: Arial, sans-serif;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: background-color 0.3s ease, color 0.3s ease;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.arrow:hover {
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
}

.arrow.left {
    left: clamp(0.5rem, 2vw, 1rem);
    padding-right: 0.1em;
}

.arrow.right {
    right: clamp(0.5rem, 2vw, 1rem);
    padding-left: 0.1em;
}

.indicators {
    position: absolute;
    bottom: clamp(0.75rem, 3vw, 1.25rem);
    right: clamp(0.75rem, 3vw, 1.25rem);
    display: flex;
    gap: clamp(0.5rem, 1.5vw, 0.75rem);
}

.indicator {
    width: clamp(0.625rem, 2vw, 0.75rem);
    height: clamp(0.625rem, 2vw, 0.75rem);
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
    -webkit-transition: background 0.3s ease, transform 0.2s ease;
    transition: background 0.3s ease, transform 0.2s ease;
}

.indicator:hover {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
}

.indicator.active {
    background: #333;
}

@media (min-width: 768px) {
    .carousel {
        width: clamp(600px, 70%, 1300px);
    }
}

@media (min-width: 1024px) {
    .carousel {
        width: clamp(700px, 60%, 1300px);
    }
}

/* Carrusel Logos - Responsive */
.brand-carousel {
  position: relative;
  width: clamp(280px, 90%, 750px);
  max-width: 100%;
  overflow: hidden;
  margin-block: clamp(1.5rem, 5vw, 2.5rem);
  margin-inline: auto;
  background-color: #e0e0e0;
  border-radius: clamp(3rem, 10vw, 6.25rem);
  height: clamp(3.5rem, 10vw, 4.375rem);
}

.brand-carousel-container {
  display: flex;
  overflow: hidden;
  align-items: center;
  height: 100%;
}

.brand-carousel-track {
    display: flex;
    -webkit-transition: transform 1s ease-in-out;
    transition: transform 1s ease-in-out;
    will-change: transform;
    height: 100%;
}

.brand-slide {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-inline: clamp(0.25rem, 1vw, 0.5rem);
  box-sizing: border-box;
  height: 100%;
  gap: clamp(0.5rem, 2vw, 1rem);
}

.brand-arrow {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: clamp(0.875rem, 2.5vw, 1.125rem);
    color: #333;
    cursor: pointer;
    z-index: 2;
    background: transparent;
    border-radius: 50%;
    width: clamp(1.5rem, 4vw, 2rem);
    height: clamp(1.5rem, 4vw, 2rem);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: none;
    line-height: 0;
    padding: 0;
    padding-bottom: 0.2em;
    font-family: Arial, sans-serif;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: background-color 0.3s ease, color 0.3s ease;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.brand-arrow.left {
  left: clamp(0.5rem, 2vw, 1.25rem);
  padding-right: 0.1em;
}

.brand-arrow.right {
  right: clamp(0.5rem, 2vw, 1.25rem);
  padding-left: 0.1em;
}

.brand-arrow:hover {
  background-color: rgba(255, 255, 255, 0.9);
  color: #000;
}

.brand-carousel img {
  max-width: 100%;
  max-height: clamp(2.5rem, 8vw, 3.4375rem);
  height: auto;
  object-fit: contain;
  background-color: transparent;
  padding: clamp(0.25rem, 1vw, 0.3125rem);
}

@media (min-width: 768px) {
  .brand-carousel {
    width: clamp(500px, 70%, 750px);
  }
}

@media (min-width: 1024px) {
  .brand-carousel {
    width: clamp(600px, 65%, 750px);
  }
}