/* ===========================
   TOPBAR ANIMADO (ticker)
   - Fijo arriba, con pausa inicial y loop continuo sin cortes
   =========================== */

   :root{
    --topbar-h: 36px;
    --stack-h: 120px;      /* se recalcula por JS (topbar + navbar) */
    --topbar-bg: #E95C27;
    --topbar-fg: #fff;
    --tb-gap: 40px;     /* espacio entre items */
    --tb-speed: 10s;    /* mayor = más lento */
    --tb-delay: 1s;   /* pausa inicial para que aparezca "fijo" */
    

  }
  /* El stack que contiene topbar + navbar, fijo y animable */
.nav-stack{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1100;
    transform: translateY(0);
    transition: transform .35s ease;
    will-change: transform;
  }
  /* Estados de scroll */
.nav-stack.show-on-scroll{ transform: translateY(0); }
.nav-stack.hide-on-scroll{ transform: translateY(calc(-1 * var(--stack-h))); }

/* Asegura que topbar y navbar fluyan dentro del stack */
.topbar{ position: relative; z-index: 1; }
.custom-navbar{ position: relative; z-index: 2; }

/* Empuja el contenido para que no quede debajo del stack */
body{ padding-top: var(--stack-h); }

/* (Si aún tienes alguna clase fija en el nav) */
.fixed-top, .fixed-top-custom{ position: static !important; }
  
  /* Barra superior */
  .topbar{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--topbar-h);
    background: var(--topbar-bg);
    color: var(--topbar-fg);
    z-index: 1050;
    overflow: hidden;
    display: flex;
    align-items: center;
    font-size: 14px;
  }
  
  /* Ventana (recorta el track) */
  .topbar-viewport{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  /* La pista que se mueve; contiene 2 grupos duplicados */
  .topbar-track{
    display: flex;
    align-items: center;
    white-space: nowrap;
    /* Pausa inicial + loop continuo sin cortes (mueve justo -50%) */
    animation: tb-marquee var(--tb-speed) linear infinite;
    animation-delay: var(--tb-delay);
  }
  
  /* Cada grupo (duplicado) */
  .topbar-items{
    display: inline-flex;
    align-items: center;
    gap: var(--tb-gap);
    padding: .5px var(--tb-gap);
    /* Nada de padding/margin extra que cree un “salto” al mitad del loop */
  }
  
  /* Ítem individual */
  .tb-item{
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  
  .topbar .icon{
    width: 16px; height: 16px;
    display: inline-block;
    filter: brightness(0) invert(1); /* iconos oscuros -> blancos */
  }
  
  /* Loop perfecto: de 0 a -50% (hay 2 grupos idénticos) */
  @keyframes tb-marquee{
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  
  /* Pausar al pasar el mouse (opcional) */
  .topbar:hover .topbar-track{
    animation-play-state: paused;
  }
  
  /* Respeto a usuarios que prefieren menos movimiento */
  @media (prefers-reduced-motion: reduce){
    .topbar-track{ animation: none; }
  }
  
  /* Responsive */
  @media (max-width: 600px){
    :root{
      --topbar-h: 32px;
      --tb-gap: 24px;
      --tb-speed: 5s;
      --tb-delay: 1s;
    }
    .topbar{ font-size: 12px; }
    .topbar .icon{ width: 14px; height: 14px; }
  }
  
  /* (Opcional) Si tu navbar es fixed-top, empújalo debajo del topbar */
  .navbar.fixed-top,
  .custom-navbar{
    top: var(--topbar-h);
  }
  
  /* (Opcional) Empuja el contenido del body para que nada quede tapado.
     Ajusta 84px al alto real de tu navbar. */
  body{
    padding-top: calc(var(--topbar-h) + 84px);
  }