/* Top bar base */
:root{
--bg: BLACK;
--text: #ffffff;
--height: 42px;
--gap: 48px; /* espacio entre elementos */
--duration: 18s; /* duración del ciclo — ajusta según la cantidad de texto */
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial}
.topbar{
position:fixed;
inset:0 auto auto 0; /* top:0; left:0; right:0 */
height:var(--height);
background: linear-gradient(90deg, BLACK, BLACK);
color:var(--text);
display:flex;
align-items:center;
z-index:9999;
overflow:hidden;
padding:0 12px;
border-bottom:1px solid rgba(255,255,255,0.04);
}
/* contenedor del carrusel */
.marquee{
display:flex;
align-items:center;
width:100%;
/* la animación se aplica al inner para que sea suave */
}
.marquee__inner{
display:flex;
align-items:center;
/* duplicamos el contenido (2x) para bucle infinito sin salto */
animation: scroll linear infinite;
animation-duration: var(--duration);
gap: var(--gap);
will-change: transform;
}
.item{
white-space:nowrap;
font-weight:600;
letter-spacing:0.2px;
font-size:0.95rem;
padding:6px 20px;
}
.item::after{
content:"";
display:inline-block;
width:1px;
height:18px;
background:rgba(255,255,255,0.06);
margin-left:var(--gap);
vertical-align:middle;
}
/* animación: mueve hacia la izquierda el ancho del contenido duplicado */
@keyframes scroll{
0%{transform: translateX(0)}
100%{transform: translateX(-50%)}
}
/* pausa al hacer hover (útil en desktop) */
.topbar:hover .marquee__inner{ animation-play-state: paused }
/* accesibilidad: respeta preferencia de reducción de movimiento */
@media (prefers-reduced-motion: reduce){
.marquee__inner{ animation: none }
}
/* responsive: menor tamaño de fuente en pantallas pequeñas */
@media (max-width:520px){
:root{ --height:40px; --gap:28px }
.item{font-size:0.86rem}
}
/* Utilidad: si quieres cambiar la velocidad con clase */
.speed-slow{ --duration: 30s }
.speed-fast{ --duration: 12s }
