/* Barra de progreso de scroll en el header (desktop) */
.energy-rail--top,
[data-scroll-progress]{
  --rail-fill:0%;
}
.topbar-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  min-width:0;
  flex:1 1 auto;
  max-width:min(34rem, 42vw);
}
.energy-rail--top{
  position:relative;
  top:auto;
  bottom:auto;
  left:auto;
  right:auto;
  width:100%;
  max-width:100%;
  transform:none;
  display:none;
  flex-direction:row;
  align-items:center;
  gap:.55rem;
  padding:.2rem .15rem 0;
  margin:0;
  background:transparent;
  border:0;
  backdrop-filter:none;
  z-index:1;
  pointer-events:none;
  color:var(--black);
  font:600 .68rem "Space Grotesk",sans-serif;
  text-transform:uppercase;
  letter-spacing:.09em;
  box-sizing:border-box;
}
.energy-rail--top .energy-rail__meter{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:0;
  container-type:inline-size;
}
.energy-rail--top ol{display:none}
.energy-rail--top .energy-rail__track{
  position:relative;
  width:100%;
  height:.28rem;
  border-radius:999px;
  overflow:hidden;
  background:rgba(11,12,10,.12);
}
.energy-rail--top .energy-rail__fill{
  display:block;
  position:absolute;
  inset:0 auto 0 0;
  width:var(--rail-fill);
  height:100%;
  border-radius:inherit;
  background-image:linear-gradient(
    90deg,
    #df3b2f 0%,
    #ee7330 16.6%,
    #f6ad2f 33.3%,
    #f4df24 50%,
    #c4d82e 66.6%,
    #73bb44 83.3%,
    var(--lime,#cfff81) 100%
  );
  background-repeat:no-repeat;
  background-position:left center;
  background-size:100cqi 100%;
  transition:width .2s linear;
}
.energy-rail--top .grade-brand{
  position:relative;
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  max-height:none!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  opacity:1!important;
  overflow:visible;
  white-space:nowrap;
  text-align:right;
  font-size:.72rem;
  line-height:1;
  color:var(--black);
  text-transform:none;
  letter-spacing:-.04em;
  font-weight:500;
}
.energy-rail--top .grade-brand__a{
  position:absolute;
  right:100%;
  top:50%;
  margin-right:.4rem;
  transform:translateY(-50%) scale(.85);
  display:grid;
  place-items:center;
  width:1rem;
  height:1rem;
  background:var(--lime,#cfff81);
  color:#0b0c0a;
  font-size:.55rem;
  font-weight:800;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
}
.energy-rail--top.reached-a .grade-brand__a{
  opacity:1;
  transform:translateY(-50%) scale(1);
}
.energy-rail--top .grade-brand em{
  display:block;
  margin-top:.08rem;
  font-size:.34rem;
  color:#3a3a3a;
  font-style:normal;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.energy-rail--top.reached-a .grade-brand{
  color:var(--black);
  text-shadow:none;
}
.energy-rail--top.reached-a .grade-brand em{
  color:var(--black);
}

@media(min-width:821px){
  .energy-rail--top{
    display:flex!important;
  }
  .topbar{
    height:auto;
    min-height:82px;
    padding-top:.65rem;
    padding-bottom:.55rem;
  }
}
@media(max-width:820px){
  .energy-rail--top{display:none!important}
  .topbar-center{max-width:none;flex:1}
}
@media(prefers-reduced-motion:reduce){
  .energy-rail--top .energy-rail__fill{transition:none}
}