/* Piezas reutilizables: marquesina, botones y barra de progreso.
   Parte de styles/ — se cargan en orden desde index.html. */

.marquee {
  overflow: hidden; border-block: 1px solid var(--hueso-08);
  padding: .9rem 0; background: rgb(7 8 15 / .3);
}
.marquee__track {
  display: flex; gap: 3rem; width: max-content; will-change: transform;
  font-family: var(--display); font-variation-settings: 'wdth' 125;
  font-weight: 900; font-size: clamp(1.4rem, 4vw, 2.6rem);
  text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap;
}
.marquee__track span { color: var(--hueso); }
/* Se dimensiona con em para que siga al tamaño del texto de la marquesina. */
.marquee__estrella {
  width: .62em; height: .62em;
  flex: none; align-self: center;
  fill: var(--oro);
}



.boton {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none;
  padding: .85rem 1.6rem; border-radius: 100px;
  border: 1px solid var(--hueso-16);
  transition: background-color .3s, color .3s, border-color .3s;
  will-change: transform;
}
.boton:hover { background: var(--oro); color: var(--noche); border-color: var(--oro); }
.boton--solido { background: var(--oro); color: var(--noche); border-color: var(--oro); }
.boton--solido:hover { background: var(--brasa); border-color: var(--brasa); color: var(--hueso); }



.progreso {
  position: fixed; inset: auto 0 0 0; height: 2px; z-index: 80;
  background: var(--hueso-08);
}
.progreso span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--brasa), var(--oro));
  transform: scaleX(0); transform-origin: left;
}