.home-story{--story-progress:0;position:relative;isolation:isolate}
.story-instruction{margin-top:1.5rem!important;color:#a5a5a5!important;font-size:clamp(1rem,1.25vw,1.25rem)!important;max-width:42rem;line-height:1.45}

/* —— Rail lateral (original) —— */
.energy-rail{
  position:fixed;
  z-index:7;
  display:none;
  background:rgba(8,9,7,.82);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(14px);
  color:#fff;
  font:600 .68rem "Space Grotesk",sans-serif;
  text-transform:uppercase;
  letter-spacing:.09em;
  pointer-events:none;
  opacity:1;
  box-sizing:border-box;
}
.energy-rail--side{
  right:1.25rem;
  top:50%;
  transform:translateY(-50%);
  width:6.5rem;
  padding:.8rem;
  flex-direction:column;
  align-items:stretch;
  z-index:8;
}
.energy-rail--foot{
  --rail-fill:14.286%;
  z-index:40; /* por encima del manifiesto lima (z-index:5) y el resto */
  top:auto;
  bottom:0;
  left:0;
  right:0;
  width:100%;
  transform:none;
  flex-direction:row;
  align-items:center;
  gap:clamp(1rem,2vw,1.75rem);
  padding:.4rem clamp(1.2rem,4vw,3.5rem);
  border-left:0;
  border-right:0;
  border-bottom:0;
  border-radius:0;
  min-height:0;
}
.home-story.story-active .energy-rail--side{display:flex}
.grade-scale{flex-direction:column;align-items:stretch;gap:.7rem}
.grade-scale ol{display:flex;flex-direction:column;gap:3px;margin:0;padding:0;list-style:none}
.grade-scale li{--grade:#fff;display:grid;grid-template-columns:1.4rem 1fr;align-items:center;gap:.45rem;opacity:.33;transition:opacity .25s ease,transform .25s ease}
.grade-scale li b{display:grid;place-items:center;width:1.4rem;height:1.4rem;background:var(--grade);color:#0b0c0a;font-size:.72rem;font-weight:800}
.grade-scale li i{display:block;width:52%;height:.34rem;background:var(--grade);transition:width .3s ease}
.grade-scale li[data-grade="A"]{--grade:var(--lime,#cfff81)}.grade-scale li[data-grade="B"]{--grade:#73bb44}.grade-scale li[data-grade="C"]{--grade:#c4d82e}.grade-scale li[data-grade="D"]{--grade:#f4df24}.grade-scale li[data-grade="E"]{--grade:#f6ad2f}.grade-scale li[data-grade="F"]{--grade:#ee7330}.grade-scale li[data-grade="G"]{--grade:#df3b2f}
.energy-rail--side li.active{opacity:1;transform:translateX(-.25rem)}
.energy-rail--side li.active i{width:100%}
.grade-brand{display:block;max-height:0;margin-top:0;overflow:hidden;opacity:0;color:#fff;font:500 1.05rem/1 "Space Grotesk",sans-serif;text-transform:none;letter-spacing:-.04em;transition:max-height .35s ease,margin .35s ease,opacity .35s ease,max-width .35s ease,padding .35s ease}
.grade-brand em{display:block;margin-top:.28rem;color:var(--lime);font:600 .5rem/1 "Space Grotesk",sans-serif;text-transform:uppercase;letter-spacing:.12em}
.energy-rail--side.reached-a .grade-brand{max-height:3rem;margin-top:.8rem;opacity:1}

/* —— Rail pie: meter + fill (z-index ya en .energy-rail--foot) —— */
.energy-rail--foot .energy-rail__meter{
  position:relative;
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:.28rem;
  container-type:inline-size;
}
.energy-rail--foot ol{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:0;
  margin:0;
  padding:0 .1rem;
  list-style:none;
  width:100%;
}
.energy-rail--foot li{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  opacity:.38;
  grid-template-columns:none;
  transition:opacity .25s ease,transform .25s ease;
}
.energy-rail--foot li b{
  width:1.15rem;
  height:1.15rem;
  font-size:.6rem;
  box-shadow:0 0 0 2px rgba(8,9,7,.65);
}
.energy-rail--foot li i{display:none}
.energy-rail--foot li.active{
  opacity:1;
  transform:scale(1.1);
}
.energy-rail--foot .energy-rail__track{
  position:relative;
  width:100%;
  height:.38rem;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.energy-rail--foot .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 .35s ease;
}
.energy-rail--foot .grade-brand{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  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:1.05rem;
  line-height:1;
  color:#fff;
  transition:color .3s ease,text-shadow .3s ease;
}
.energy-rail--foot .grade-brand em{
  margin-top:.16rem;
  font-size:.46rem;
  color:var(--lime);
}
.energy-rail--foot.reached-a .grade-brand{
  color:var(--lime);
  text-shadow:0 0 16px rgba(207,255,129,.35);
}
.energy-rail--foot.reached-a .grade-brand em{
  color:#fff;
}

@media(min-width:821px){
  .home-story{
    /* Rail lateral ~6.5rem + right 1.25rem + aire */
    --rail-gutter:8.5rem;
  }
  .energy-rail--foot{
    display:flex!important;
  }
  body{
    padding-bottom:3.1rem;
  }
  /* Hueco reservado desde el inicio (sin recolocar al activar el rail) */
  .home-story .concept-intro,
  .home-story .concept-nav{
    padding-right:calc(6vw + var(--rail-gutter))!important;
    box-sizing:border-box;
  }
  /* Conclusión centrada: en pantallas estrechas sí respeta el rail; en ancho no hace falta (márgenes naturales) */
  .home-story .conclusion{
    padding-right:1.5rem!important;
    padding-left:1.5rem!important;
  }
  /* El gutter va al copy (el cred hereda el ancho; no volver a restar el rail) */
  .home-story .concept-card.passive .concept-body-copy,
  .home-story .concept-card.self .concept-body-copy{
    padding-right:var(--rail-gutter);
    box-sizing:border-box;
    max-width:100%;
  }
  .home-story .concept-card.passive .passivhaus-cred,
  .home-story .concept-card.self .passivhaus-cred{
    max-width:100%;
    width:100%;
    box-sizing:border-box;
  }
  .home-story .concept-card.passive .passivhaus-cred__text,
  .home-story .concept-card.self .passivhaus-cred__text{
    flex:1 1 auto;
    min-width:0;
  }
  .home-story .concept-card.passive .concept-title-stack,
  .home-story .concept-card.self .concept-title-stack{
    /* Invade más la imagen; deja hueco del rail a la derecha */
    margin-left:-72%!important;
    width:calc(100% + 72% - var(--rail-gutter))!important;
    max-width:none!important;
    box-sizing:border-box;
  }
  .home-story .concept-card.passive .concept-title-stack h3,
  .home-story .concept-card.self .concept-title-stack h3{
    max-width:none!important;
    width:100%;
  }
}
@media(min-width:821px) and (max-width:1100px){
  .home-story{
    /* Rail tablet: 5.6rem + right .5rem + aire */
    --rail-gutter:7rem;
  }
  .passivhaus-cred{
    max-width:none;
    gap:.85rem;
    align-items:flex-start;
  }
  .passivhaus-cred__logo{
    width:72px;
    height:72px;
  }
  .passivhaus-cred__logo svg{
    width:72px;
    height:72px;
  }
  .passivhaus-cred__text{
    flex:1 1 auto;
    min-width:0;
  }
  .passivhaus-cred__text span{
    font-size:.84rem;
    line-height:1.45;
  }
}
@media(min-width:821px) and (max-width:1200px){
  .home-story .conclusion{
    padding-right:calc(1.5rem + var(--rail-gutter))!important;
    padding-left:1.5rem!important;
  }
}

.concept-visual{position:relative;background:#111}
.concept-visual img{transform:scale(calc(1.07 - (var(--story-progress) * .035)));filter:saturate(calc(1.18 - (var(--story-progress) * .18))) contrast(1.02);transition:filter .6s ease;will-change:transform}
.visual-caption{position:absolute;left:clamp(1rem,3vw,3rem);right:clamp(1rem,3vw,3rem);bottom:clamp(1rem,3vw,2.5rem);z-index:2;padding-top:.8rem;border-top:1px solid rgba(255,255,255,.72);color:#fff;font:500 clamp(.78rem,1vw,1rem) "Space Grotesk",sans-serif;text-transform:uppercase;letter-spacing:.08em;text-shadow:0 1px 10px rgba(0,0,0,.65)}
.concept-visual:after{content:none;display:none}
.home-story .concept-body{transition:background-color .5s ease,color .5s ease}
.home-story .concept-card:nth-of-type(1) .concept-body{background:#0b0c0a}
.home-story .concept-card:nth-of-type(2) .concept-body{background:#10110e}
.home-story .concept-card:nth-of-type(3) .concept-body{background:#151712}
.home-story .conclusion small{display:block;margin-top:1.25rem;color:var(--lime);font:600 .75rem "Space Grotesk",sans-serif;text-transform:uppercase;letter-spacing:.12em}
@media(max-width:1100px){
  .energy-rail--side{right:.5rem;width:5.6rem;padding:.65rem}
  .energy-rail--side li{grid-template-columns:1.25rem 1fr}
  .energy-rail--side li b{width:1.25rem;height:1.25rem}
}
@media(max-width:820px){
  .home-story{
    --rail-gutter: calc(2.2rem + max(.35rem, env(safe-area-inset-right, 0px)));
  }
  .energy-rail--foot{display:none!important}
  .home-story.story-active .energy-rail--side{display:flex}
  .energy-rail--side{
    right:max(.35rem, env(safe-area-inset-right, 0px));
    left:auto;
    top:50%;
    width:2rem;
    max-width:calc(100vw - .7rem);
    padding:.28rem .14rem .35rem;
    border-radius:0;
    backdrop-filter:blur(8px);
    overflow:visible;
    box-sizing:border-box;
    transform:translateY(-50%);
  }
  .energy-rail--side.reached-a{
    width:2rem;
    padding:.28rem .14rem .35rem;
  }
  .energy-rail--side.grade-scale{gap:.22rem}
  .energy-rail--side li{grid-template-columns:1fr;gap:0}
  .energy-rail--side li b{
    width:1.05rem;
    height:1.05rem;
    margin:auto;
    font-size:.55rem;
  }
  .energy-rail--side li i{display:none}
  .energy-rail--side li.active{transform:scale(1.06)}
  .energy-rail--side .grade-brand{
    position:absolute;
    top:100%;
    right:0;
    bottom:auto;
    width:3.6rem;
    max-width:none;
    max-height:0;
    margin:.22rem 0 0;
    padding:0 .28rem;
    overflow:hidden;
    opacity:0;
    text-align:center;
    font-size:.5rem;
    line-height:1.05;
    letter-spacing:-.03em;
    white-space:nowrap;
    box-sizing:border-box;
    background:rgba(8,9,7,.92);
    border:1px solid rgba(255,255,255,.2);
    pointer-events:none;
  }
  .energy-rail--side.reached-a .grade-brand{
    max-height:2.8rem;
    margin-top:.22rem;
    padding:.3rem .32rem;
    opacity:1;
    overflow:visible;
  }
  .energy-rail--side .grade-brand em{
    display:block;
    font-size:.3rem;
    margin-top:.1rem;
    letter-spacing:.04em;
  }
  .story-instruction{margin-top:1rem!important}
  .visual-caption{font-size:.72rem}
  .concept-visual img{transform:none}

  .home-story .concept-intro,
  .home-story .conclusion{
    padding-right:calc(5vw + var(--rail-gutter))!important;
    padding-left:5vw!important;
    box-sizing:border-box;
    max-width:100%;
  }
  .home-story .concept-card .concept-body{
    padding:14vw 5vw 14vw 5vw!important;
    padding-right:calc(5vw + var(--rail-gutter))!important;
    box-sizing:border-box;
  }
  .home-story .concept-card .concept-title-stack,
  .home-story .concept-card .concept-body-copy,
  .home-story .concept-card .concept-body-copy > p,
  .home-story .concept-card .concept-body-copy > ul{
    max-width:100%!important;
    width:100%;
    box-sizing:border-box;
    padding-right:0!important;
  }
}
@media(prefers-reduced-motion:reduce){.concept-visual img{transform:none!important;transition:none}.grade-scale li,.grade-scale li i{transition:none}}
.advantages-head h2{font-size:clamp(2.6rem,4.35vw,5.4rem);line-height:.98;max-width:18ch}
.proof-copy h2{font-size:clamp(2.6rem,4.35vw,5.4rem);line-height:.98;max-width:18ch}