/* =========================================================
   1pit - Credenciales
   Banda horizontal que se recorre con el scroll
   ========================================================= */

.onepit-cred{
  --op-acento:#FC5601;
  --op-texto:#FFFFFF;
  --op-fondo:#05070D;
  --op-marco:14px;
  --op-radio:26px;
  --op-escala:1;

  position:relative;
  background:var(--op-fondo);
  padding:0 var(--op-marco);
  font-family:var(--op-fuente-texto, "Inter", system-ui, sans-serif);
}
.onepit-cred *{box-sizing:border-box}
.onepit-cred p{margin:0}

.onepit-cred-pista-scroll{position:relative}

.onepit-cred-panel{
  position:sticky;
  top:var(--op-marco);
  height:calc(100svh - var(--op-marco) * 2);
  display:flex;flex-direction:column;justify-content:center;
  border-radius:var(--op-radio);
  background:var(--op-fondo);
  overflow:hidden;
}

.onepit-cred .onepit-cred-etiqueta{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--op-fuente-etiqueta, "IBM Plex Mono", monospace);
  font-weight:var(--op-peso-etiqueta, 500);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  padding:8px 14px;border-radius:4px;
  margin:0;
}

/* La etiqueta se alinea con el contenedor de las demas secciones */
.onepit-cred .onepit-cred-cabeza{
  width:100%;max-width:1180px;margin:0 auto;
  padding:0 clamp(20px,5vw,56px);
  margin-bottom:clamp(34px,5svh,54px);
}
.onepit-cred-punto{
  width:8px;height:8px;border-radius:2px;
  background:var(--op-acento);flex:none;
}

/* la pista recorta; la banda se desplaza dentro */
.onepit-cred-pista{
  width:100%;
  overflow:hidden;
}

.onepit-cred-banda{
  display:flex;align-items:center;
  gap:clamp(24px,4vw,48px);
  white-space:nowrap;
  width:max-content;
  will-change:transform;
}

.onepit-cred-item{
  font-family:var(--op-fuente-titulo, "Sora", system-ui, sans-serif);
  font-weight:var(--op-peso-titulo, 700);
  letter-spacing:-.03em;
  line-height:1.1;
  font-size:calc(clamp(30px,7.4vw,68px) * var(--op-escala));
  color:var(--op-texto);
  white-space:nowrap;
}

.onepit-cred-sep{
  width:calc(clamp(11px,2.2vw,20px) * var(--op-escala));
  height:calc(clamp(11px,2.2vw,20px) * var(--op-escala));
  border-radius:3px;
  background:var(--op-acento);
  flex:none;
}

/* ---------- editor ---------- */
.onepit-cred.is-editor{padding:var(--op-marco)}
.onepit-cred.is-editor .onepit-cred-panel{
  position:relative;height:auto;top:0;padding:40px 0;
}
.onepit-cred.is-editor .onepit-cred-banda{
  flex-wrap:wrap;white-space:normal;width:auto;
  padding:0 clamp(20px,5vw,56px);
}
.onepit-cred.is-editor .onepit-cred-item{
  font-size:calc(clamp(20px,3vw,32px) * var(--op-escala));
  white-space:normal;
}
.onepit-cred.is-editor .onepit-cred-nota{
  margin:18px 0 0 clamp(20px,5vw,56px);
  font-family:var(--op-fuente-etiqueta, "IBM Plex Mono", monospace);
  font-weight:var(--op-peso-etiqueta, 500);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.42);
}

@media (prefers-reduced-motion:reduce){
  .onepit-cred-panel{position:relative;height:auto;padding:60px 0}
  .onepit-cred-banda{
    flex-wrap:wrap;white-space:normal;width:auto;
    padding:0 clamp(20px,5vw,56px);
  }
  .onepit-cred-item{white-space:normal}
}
