@font-face {
  font-family: "TV2 Sans Display";
  src: url("./../fonts/TV2SansDisplay/TV2SansDisplay-Thin.woff2")
      format("woff2"),
    url("./../fonts/TV2SansDisplay/TV2SansDisplay-Thin.woff") format("woff"),
    url("./../fonts/TV2SansDisplay/TV2SansDisplay-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TV2 Sans Display";
  src: url("./../fonts/TV2SansDisplay/TV2SansDisplay-ExtraLight.woff2")
      format("woff2"),
    url("./../fonts/TV2SansDisplay/TV2SansDisplay-ExtraLight.woff")
      format("woff"),
    url("./../fonts/TV2SansDisplay/TV2SansDisplay-ExtraLight.ttf")
      format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TV2 Sans Display";
  src: url("./../fonts/TV2SansDisplay/TV2SansDisplay-Light.woff2")
      format("woff2"),
    url("./../fonts/TV2SansDisplay/TV2SansDisplay-Light.woff") format("woff"),
    url("./../fonts/TV2SansDisplay/TV2SansDisplay-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TV2 Sans Display";
  src: url("./../fonts/TV2SansDisplay/TV2SansDisplay-Medium.woff2")
      format("woff2"),
    url("./../fonts/TV2SansDisplay/TV2SansDisplay-Medium.woff") format("woff"),
    url("./../fonts/TV2SansDisplay/TV2SansDisplay-Medium.ttf")
      format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* FONTT Signifier */

@font-face {
  font-family: "Signifier";
  src: url("./../fonts/TestSignifier/TestSignifier-Thin.woff2") format("woff2"),
    url("./../fonts/TestSignifier/TestSignifier-Thin.woff") format("woff"),
    url("./../fonts/TestSignifier/TestSignifier-Thin.otf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Signifier";
  src: url("./../fonts/TestSignifier/TestSignifier-Extralight.woff2")
      format("woff2"),
    url("./../fonts/TestSignifier/TestSignifier-Extralight.woff") format("woff"),
    url("./../fonts/TestSignifier/TestSignifier-Extralight.otf")
      format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Signifier";
  src: url("./../fonts/TestSignifier/TestSignifier-Light.woff2") format("woff2"),
    url("./../fonts/TestSignifier/TestSignifier-Light.woff") format("woff"),
    url("./../fonts/TestSignifier/TestSignifier-Light.otf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Signifier";
  src: url("./../fonts/TestSignifier/TestSignifier-Regular.woff2")
      format("woff2"),
    url("./../fonts/TestSignifier/TestSignifier-Regular.woff") format("woff"),
    url("./../fonts/TestSignifier/TestSignifier-Regular.otf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Signifier";
  src: url("./../fonts/TestSignifier/TestSignifier-Medium.woff2")
      format("woff2"),
    url("./../fonts/TestSignifier/TestSignifier-Medium.woff") format("woff"),
    url("./../fonts/TestSignifier/TestSignifier-Medium.otf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Signifier";
  src: url("./../fonts/TestSignifier/TestSignifier-Bold.woff2") format("woff2"),
    url("./../fonts/TestSignifier/TestSignifier-Bold.woff") format("woff"),
    url("./../fonts/TestSignifier/TestSignifier-Bold.otf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Signifier";
  src: url("./../fonts/TestSignifier/TestSignifier-Black.woff2") format("woff2"),
    url("./../fonts/TestSignifier/TestSignifier-Black.woff") format("woff"),
    url("./../fonts/TestSignifier/TestSignifier-Black.otf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Signifier";
  src: url("./../fonts/TestSignifier/TestSignifier-ThinItalic.woff2")
      format("woff2"),
    url("./../fonts/TestSignifier/TestSignifier-ThinItalic.woff") format("woff"),
    url("./../fonts/TestSignifier/TestSignifier-ThinItalic.otf")
      format("truetype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Signifier";
  src: url("./../fonts/TestSignifier/TestSignifier-ExtralightItalic.woff2")
      format("woff2"),
    url("./../fonts/TestSignifier/TestSignifier-ExtralightItalic.woff")
      format("woff"),
    url("./../fonts/TestSignifier/TestSignifier-ExtralightItalic.otf")
      format("truetype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Signifier";
  src: url("./../fonts/TestSignifier/TestSignifier-LightItalic.woff2")
      format("woff2"),
    url("./../fonts/TestSignifier/TestSignifier-LightItalic.woff")
      format("woff"),
    url("./../fonts/TestSignifier/TestSignifier-LightItalic.otf")
      format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Signifier";
  src: url("./../fonts/TestSignifier/TestSignifier-RegularItalic.woff2")
      format("woff2"),
    url("./../fonts/TestSignifier/TestSignifier-RegularItalic.woff")
      format("woff"),
    url("./../fonts/TestSignifier/TestSignifier-RegularItalic.otf")
      format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Signifier";
  src: url("./../fonts/TestSignifier/TestSignifier-MediumItalic.woff2")
      format("woff2"),
    url("./../fonts/TestSignifier/TestSignifier-MediumItalic.woff")
      format("woff"),
    url("./../fonts/TestSignifier/TestSignifier-MediumItalic.otf")
      format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Signifier";
  src: url("./../fonts/TestSignifier/TestSignifier-BoldItalic.woff2")
      format("woff2"),
    url("./../fonts/TestSignifier/TestSignifier-BoldItalic.woff") format("woff"),
    url("./../fonts/TestSignifier/TestSignifier-BoldItalic.otf")
      format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Signifier";
  src: url("./../fonts/TestSignifier/TestSignifier-BlackItalic.woff2")
      format("woff2"),
    url("./../fonts/TestSignifier/TestSignifier-BlackItalic.woff")
      format("woff"),
    url("./../fonts/TestSignifier/TestSignifier-BlackItalic.otf")
      format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* END FONTS Signifier */

/* FONT FOUNDERS GROTESK */
@font-face {
  font-family: "Founders Grotesk";
  src: url("./../fonts/FoundersGrotesk/FoundersGrotesk-Light.woff2")
      format("woff2"),
    url("./../fonts/FoundersGrotesk/FoundersGrotesk-Light.woff") format("woff"),
    url("./../fonts/FoundersGrotesk/FoundersGrotesk-Light.otf")
      format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Founders Grotesk";
  src: url("./../fonts/FoundersGrotesk/FoundersGrotesk-LightItalic.woff2")
      format("woff2"),
    url("./../fonts/FoundersGrotesk/FoundersGrotesk-LightItalic.woff")
      format("woff"),
    url("./../fonts/FoundersGrotesk/FoundersGrotesk-LightItalic.otf")
      format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Founders Grotesk";
  src: url("./../fonts/FoundersGrotesk/FoundersGrotesk-Regular.woff2")
      format("woff2"),
    url("./../fonts/FoundersGrotesk/FoundersGrotesk-Regular.woff")
      format("woff"),
    url("./../fonts/FoundersGrotesk/FoundersGrotesk-Regular.otf")
      format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Founders Grotesk";
  src: url("./../fonts/FoundersGrotesk/FoundersGrotesk-RegularItalic.woff2")
      format("woff2"),
    url("./../fonts/FoundersGrotesk/FoundersGrotesk-RegularItalic.woff")
      format("woff"),
    url("./../fonts/FoundersGrotesk/FoundersGrotesk-RegularItalic.otf")
      format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Founders Grotesk";
  src: url("./../fonts/FoundersGrotesk/FoundersGrotesk-Medium.woff2")
      format("woff2"),
    url("./../fonts/FoundersGrotesk/FoundersGrotesk-Medium.woff") format("woff"),
    url("./../fonts/FoundersGrotesk/FoundersGrotesk-Medium.otf")
      format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Founders Grotesk";
  src: url("./../fonts/FoundersGrotesk/FoundersGrotesk-MediumItalic.woff2")
      format("woff2"),
    url("./../fonts/FoundersGrotesk/FoundersGrotesk-MediumItalic.woff")
      format("woff"),
    url("./../fonts/FoundersGrotesk/FoundersGrotesk-MediumItalic.otf")
      format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Founders Grotesk";
  src: url("./../fonts/FoundersGrotesk/FoundersGrotesk-Semibold.woff2")
      format("woff2"),
    url("./../fonts/FoundersGrotesk/FoundersGrotesk-Semibold.woff")
      format("woff"),
    url("./../fonts/FoundersGrotesk/FoundersGrotesk-Semibold.otf")
      format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Founders Grotesk";
  src: url("./../fonts/FoundersGrotesk/FoundersGrotesk-SemiboldItalic.woff2")
      format("woff2"),
    url("./../fonts/FoundersGrotesk/FoundersGrotesk-SemiboldItalic.woff")
      format("woff"),
    url("./../fonts/FoundersGrotesk/FoundersGrotesk-SemiboldItalic.otf")
      format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Founders Grotesk";
  src: url("./../fonts/FoundersGrotesk/FoundersGrotesk-Bold.woff2")
      format("woff2"),
    url("./../fonts/FoundersGrotesk/FoundersGrotesk-Bold.woff") format("woff"),
    url("./../fonts/FoundersGrotesk/FoundersGrotesk-Bold.otf")
      format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Founders Grotesk";
  src: url("./../fonts/FoundersGrotesk/FoundersGrotesk-BoldItalic.woff2")
      format("woff2"),
    url("./../fonts/FoundersGrotesk/FoundersGrotesk-BoldItalic.woff")
      format("woff"),
    url("./../fonts/FoundersGrotesk/FoundersGrotesk-BoldItalic.otf")
      format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

html {
  scroll-behavior: smooth;
}

p {
  text-wrap: pretty;
}

@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* END FONT FOUNDERS GROTESK */
.btn-book-call {
  background: linear-gradient(90deg, #3dc7fc 6%, #249fce 100%);
}

/* GLOBAL CSS  */
.text-gradient {
  background: linear-gradient(90deg, #3dc7fc 6%, #249fce 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Estilos personalizados si son necesarios en el futuro */
.swiper-gradient-creative {
  background: linear-gradient(
    0deg,
    rgba(227, 231, 233, 1) 50%,
    rgba(244, 244, 244, 1) 50%
  );
}

.gradient-banner-transform {
  background: linear-gradient(to right, #4c00b0, #8a2be2, #ff00ff);
}

/* Oculta los pseudo-elementos ::after de los botones de Swiper */
.swiper-button-next::after,
.swiper-button-prev::after {
  content: none;
}

.transform-banner {
  background-image: url("./../images/121-CTA-Background-Mobile.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /* object-fit: cover;
    object-position: top center; */
}

.lmtWIHO_gkbTeeyuvoJC.sbRR5Vj9cBntcZ6P4tOo._JUGVkfTgXeaar9RpzRk {
  justify-content: center;
}

/* Estilos para los slides del carrusel */

.swiper-pagination.margin-bottom {
  bottom: -40px;
}

.swiper-pagination.testimonials-bottom {
  bottom: 40px;
}

.swiper-pagination-bullet-active {
  background: #000000;
}

.swiper-pagination.white > .swiper-pagination-bullet-active {
  background: #ffffff;
}

.swiper-button-prev,
.swiper-button-next {
  width: 32px;
  height: 32px;
}

.swiper-button-prev svg,
.swiper-button-next svg {
  width: 28px;
  height: 28px;
}

/* Selecciona la primera celda del encabezado (th) y del cuerpo (td) */
th:first-child,
td:first-child {
  position: sticky;
  left: 0;
  background-color: #151516;
}

.logo-carousel .swiper-wrapper {
  transition-timing-function: linear;
}

.swiper-slide-logos {
  justify-items: center;
  width: auto;
}

/* CREATIVE SLIDE  */
.swiper-creative {
  padding-left: 30px;
}

.swiper-slide-creative {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* .swiper-slide-creative.swiper-slide {
    max-width: 401px;
} */

.swiper-slide-creative img {
  display: block;
  width: 100%;
  object-fit: cover;
  background-color: #f0f0f0;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: "TV2 Sans Display", sans-serif;
}

.card-content .brand {
  color: #29292b;
  font-size: 16px;
  font-style: normal;
  font-weight: 100;
  line-height: 120%;
}

.card-content h4 {
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  color: #29292b;
  line-height: 120%;
  /* 24px */
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.tags span {
  background-color: #ddd;
  padding: 6px 10px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 300;
  line-height: 100%;
  letter-spacing: 0.12px;
}

.swiper-pagination-bullet {
  background: #ccc;
}

.swiper-pagination-bullet-active {
  background: #000;
}

/* Estilos para la paginación de Swiper */
.swiper-pagination-packs,
.swiper-pagination-bigLeague {
  position: static;
  margin-top: 2rem;
}

.bigLeagueCarusel .swiper-wrapper {
  align-items: stretch;
}

.packsCarusel .swiper-wrapper {
  justify-content: flex-start;
}

.swiper-pagination-packs .swiper-pagination-bullet,
.swiper-pagination-bigLeague .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background-color: #4a4a4a;
  opacity: 1;
}

.swiper-pagination-packs .swiper-pagination-bullet-active,
.swiper-pagination-bigLeague .swiper-pagination-bullet-active {
  background-color: #ffffff;
}

.slide-bigleague {
  height: auto !important;
}

.swiper-slide.swiper-slide-creative {
  transform: scale(0.78);
}

.swiper-slide.swiper-slide-creative.swiper-slide-active {
  transform: scale(0.9);
}

/* Thank you page */
.image-panel {
  background-image: url("../images/left-background.jpg");
}

.thank-you-panel > * {
  font-family: "TV2 Sans Display";
  font-weight: 300;
}

/* Medias */
@media (min-width: 768px) {
  .transform-banner {
    background-image: url("./../images/121-CTA-Background-Desktop.jpg");
  }

  .swiper-pagination.testimonials-bottom {
    bottom: 40px;
  }

  .swiper-pagination.white > .swiper-pagination-bullet-active {
    background: #ffffff;
  }

  #testimonials-prev,
  #testimonials-next {
    width: 48px;
    height: 48px;
  }

  #testimonials-prev svg,
  #testimonials-next svg {
    width: 24px;
    height: 24px;
  }

  #testimonials-prev {
    left: 80px;
  }

  #testimonials-next {
    right: 80px;
  }

  .swiper-creative {
    padding-left: 0px;
  }

  .card-content .brand {
    font-size: 18px;
  }

  .card-content h4 {
    font-size: 25px;
  }
}

@media (min-width: 1920px) {
  .swiper-slide.swiper-slide-creative {
    transform: scale(0.7);
  }

  .swiper-slide.swiper-slide-creative.swiper-slide-active {
    transform: scale(0.85);
  }
}

/* Slide Menu */
.side-menu {
  width: 15em;
  height: fit-content;
  position: fixed;
  top: 40%;
  bottom: 0;
  right: -10.7em;
}
.side-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.side-menu ul li {
  display: block;
  position: relative;
  -webkit-transition: -webkit-transform 0.5s, background-color 0.5s, color 0.5s;
  transition: transform 0.5s, background-color 0.5s, color 0.5s;
  border-bottom: 1px solid #efefef;
  background: #fff;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.1607843137);
}

.side-menu ul li a {
  display: block;
  padding: 1em 1em 1em 1em !important;
}

/*the colors of the different columns*/
.side-menu ul li:nth-child(1) {
  border-radius: 6px 6px 0 0;
}
.side-menu ul li:nth-child(2) {
  border-radius: 0px;
}
.side-menu ul li:nth-child(3) {
  border-radius: 0px;
}
.side-menu ul li:nth-child(4) {
  border-radius: 0 0 6px 6px;
  border-bottom: 0;
}

.side-menu ul li:hover {
  -webkit-transform: translateX(-8em);
  transform: translateX(-8em);
}