:root{
  --offset: 0px;
  --move-initial: calc(-45% + var(--offset));
  --move-final: calc(-25% + var(--offset));
}

.marquee {
  transition: all 0.5s;
  text-transform: uppercase;
  overflow: hidden;
  display:flex;
}

.marquee-inner {
  width: fit-content;
   display: flex;
 
  align-items:center;
  position: relative;
  transform: translate3d(var(--move-initial), 0, 0);
  animation: marquee 10s linear infinite;
  animation-play-state: running;
  
}

.marquee-inner span{ 
  padding: 0 15px;
    white-space: nowrap;
 
}



.espacio{ 
   width:30px;
  height:15px;
  display:inline-block;
}

@keyframes marquee {
    0% {
        transform: translateX(var(--move-initial))
    }
    100% {
        transform: translateX(var(--move-final))
    }
}






a{
text-decoration: none;
}




.barra:hover{
  
  box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2), 0px -8px 12px rgba(0, 0, 0, 0.2);
}



.copycta
{
  text-align: center;
  margin: auto 0;
}
  
}