/* Contenedor principal que oculta lo que sale de los bordes */
.contenedor-franja {
  overflow: hidden;
  width: 100%;
  background: #d5d4d4;  /*  #f0f0f0; */
  padding: 3px 0px;  /* 20px 0;*/
 /* position: fixed;*/
 margin: 0 0 12px 0;
}

/* La franja interior que contiene todos los elementos juntos */
/*.franja-movil {
  display: flex;
  width: max-content;
  animation: desplazamiento 15s linear infinite;
}*/
.franja-movil {
  display: flex;
  width: max-content;
  animation: desplazamiento 26s linear infinite;
  /*animation-name: desplazamiento;*/
 /* animation-duration: 5s;*/ /* Adjust speed here */
 /* animation-timing-function: linear;
  animation-iteration-count: infinite;*/
}

/* Los elementos individuales de la franja */
.elemento-franja {
  padding: 5px 4px; /*10px 30px;*/
  margin: 0 8px; /* 0 15px; */
  background: #d5d4d4;
  /*border: 1px solid #ddd;*/
  color: #111111;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
/* Los elementos individuales de la franja */
.guion-franja {
  padding: 5px 2px; /*10px 30px;*/
  margin: 0 8px; /* 0 15px; */
  background: #d5d4d4;
  /*border: 1px solid #ddd;*/
  color: #111111;
}

/* Pausar la animación al pasar el ratón por encima (opcional) */
.franja-movil:hover {
  animation-play-state: paused;
}

/* La animación clave que genera el avance */
@keyframes desplazamiento {
   from {
    transform: translateX(0);
  } 
 to {
    transform: translateX(-28%);  /* Ajusta este porcentaje dependiendo de cuántos elementos tengas */
 } 



}