/* Estilos personalizados de la Universidad del Deporte */
body {
  background-color: #E1F5F3;
  color: #00304A;
  font-family: 'Rokkitt', serif;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.animate-fade-in {
  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Carrusel de logos del telefono ------------------------------------------
   La pista lleva el grupo repetido tres veces (las copias las hace app.js) y
   se corre justo lo que mide un grupo, asi la vuelta no tiene costura ni deja
   hueco al final. El margen va en cada logo, incluido el ultimo, para que el
   ancho del grupo sea exacto.
   Sin la clase que pone el javascript queda como una tira que se arrastra con
   el dedo, que es tambien lo que ve quien pidio menos animacion. */
.carrusel {
  overflow-x: auto;
  scrollbar-width: none;
}

.carrusel::-webkit-scrollbar {
  display: none;
}

.carrusel-pista {
  display: flex;
  width: max-content;
}

.carrusel-grupo {
  display: flex;
  align-items: center;
}

.carrusel--desfila {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.carrusel--desfila .carrusel-pista {
  animation-name: carruselDesfile;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes carruselDesfile {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-33.3333%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .carrusel--desfila {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .carrusel--desfila .carrusel-pista {
    animation: none;
  }
}