@font-face {
  font-family: Garet-Book;
  src: url("fonts/Garet-Book.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Garet-Heavy;
  src: url("fonts/Garet-Heavy.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body,
html {
  font-family: Garet-Book, sans-serif;
  scroll-behavior: smooth;
  letter-spacing: -0.06em;
  overflow-x: hidden;
  background: #f7f7f7;
}

.bg-alcance {
  background-image: url("/img/mundo-banner.webp");
}

.bg-alcance::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

.bg-marcas {
  background: #e7f2f3;
}

.logo-item {
  height: 60px;
  width: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
  opacity: 0.9;
}

.logo-item:hover {
  transform: scale(1.08);
  opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .logo-item {
    height: 40px;
  }
}

.brandsWrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* contenedor */
.brandsCarousel {
  max-width: 100%;
  overflow: hidden;
  position: relative;
}

/* fade laterales */
.brandsCarousel::before,
.brandsCarousel::after {
  content: "";
  width: 120px;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 2;
  pointer-events: none;
}

.brandsCarousel::before {
  left: 0;
  background: linear-gradient(to right, #e7f2f3, transparent);
}

.brandsCarousel::after {
  right: 0;
  background: linear-gradient(to left, #e7f2f3, transparent);
}

/* track */
.carouselTrack {
  display: flex;
  gap: 40px;
  width: max-content;
  align-items: center;
}

/* logos */
.brandLogo {
  flex: 0 0 auto;
  width: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.brandLogo img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* animaciones */
.scroll-left {
  animation: scrollLeft 25s linear infinite;
}

.scroll-right {
  animation: scrollRight 25s linear infinite;
}

@keyframes scrollLeft {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(calc(-50% - 20px), 0, 0);
  }
}

@keyframes scrollRight {
  0% {
    transform: translate3d(calc(-50% - 20px), 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* FORMA CURVA */
.curve-shape {
  position: relative;
  overflow: hidden;
  background: #edf9f8;
}

/* CURVA */
.curve-shape {
  position: relative;
  background: #ffffff;
  overflow: hidden;

  /* CURVA ORGÁNICA */
  mask:
    radial-gradient(34.99px at 48px 50%, #000 99%, #0000 101%) 0
      calc(50% - 60px) / 100% 120px,
    radial-gradient(34.99px at -18px 50%, #0000 99%, #000 101%) 30px 50%/100%
      120px repeat-y;

  -webkit-mask:
    radial-gradient(34.99px at 48px 50%, #000 99%, #0000 101%) 0
      calc(50% - 60px) / 100% 120px,
    radial-gradient(34.99px at -18px 50%, #0000 99%, #000 101%) 30px 50%/100%
      120px repeat-y;
}

@media (max-width: 1024px) {
  .curve-shape {
    -webkit-mask: none;
    mask: none;
  }
}

.dog-shadow {
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.3));
}

.dog-shadow2 {
  filter: drop-shadow(10px 5px 5px rgba(0, 0, 0, 0.5));
}

.dog-image {
  display: none;
}

@media (max-width: 1024px) {
  .dog-image {
    display: block;
  }

  .dog-responsive {
    display: none;
  }
  .container-dog-responsive {
    display: none;
  }
}

.animate__animated.animate__backInRight {
  --animate-duration: 2.5s;
  --animate-delay: 1.5s;
}

.animate__animated.animate__backInUp {
  --animate-duration: 5s;
  --animate-delay: 2s;
}

.animate__animated.animate__fadeInRight {
  --animate-duration: 1.5s;
  --animate-delay: 1s;
}