/* Portal público · Red Alerta Energética (una sola escena continua) */
html{scroll-behavior:auto}
body{overflow-x:hidden;background:var(--papel)}

/* Cabecera siempre visible */
.cab{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.7rem clamp(.75rem,3vw,2rem);pointer-events:none}
.cab>*{pointer-events:auto}
.marca-nom{line-height:1.02} /* 31-10-2026 (HOME2): el nombre de la Red en dos líneas */
.marca{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.25rem .9rem .25rem .55rem;background:var(--blanco);border:var(--borde);border-radius:999px;box-shadow:var(--sombra-s);font-family:var(--fd);font-weight:900;font-size:1.05rem;line-height:1;text-decoration:none;white-space:nowrap}
.copihue{width:28px;height:34px;flex:none}
.cab .btn{font-size:1.02rem;padding:.55rem 1.35rem}

/* Sin JavaScript: los seis momentos se leen uno bajo el otro */
.historia{position:relative;padding:5.5rem 1rem 3rem}
.escena,.avance,.pista{display:none}
.momento{max-width:34rem;margin:0 auto 1.25rem;padding:1.3rem 1.4rem 1.4rem;background:var(--blanco);border:var(--borde);border-radius:var(--r);box-shadow:var(--sombra)}
.momento h1{font-size:clamp(1.55rem,2.9vw,2.5rem);text-wrap:balance}
.momento h2{font-size:clamp(1.4rem,2.5vw,2.2rem);text-wrap:balance}
.momento p{margin:.6rem 0 0;font-size:1.06rem;font-weight:600;color:var(--tinta2)}
.momento .etq{margin:0 0 .55rem;color:var(--copihue);font-size:.82rem}
.momento blockquote{margin:.7rem 0 0;padding:0 0 0 .9rem;border-left:4px solid var(--copihue)}
.momento blockquote p{margin:0;font-family:var(--fd);font-style:italic;font-weight:500;font-size:1.08rem;line-height:1.4;color:var(--tinta)}
.momento cite{display:block;margin-top:.45rem;font-style:normal;font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
.momento .grande{font-family:var(--fd);font-weight:700;font-size:1.3rem;color:var(--tinta)}
.momento .chica{font-size:.84rem;font-weight:700;color:var(--mut);margin-top:.9rem}
.entrar{margin-top:1rem;font-size:1.3rem;padding:.8rem 2.4rem;min-height:58px;box-shadow:var(--sombra)}

/* Con JavaScript: escena fija y scroll que la transforma */
.con-js .historia{padding:0;height:760vh;height:760svh}
.con-js .escenario{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#bfdfea}
.con-js .escena{display:block;position:absolute;inset:0;width:100%;height:100%}
.con-js .momento{position:absolute;z-index:5;margin:0;left:clamp(1.25rem,5vw,5rem);top:clamp(5.2rem,12.5vh,8rem);width:min(31rem,41vw);max-width:none;opacity:0;pointer-events:none;will-change:transform,opacity}
.con-js .momento.activo{pointer-events:auto}

.con-js .avance{display:flex;flex-direction:column;gap:.55rem;position:absolute;z-index:6;right:clamp(.6rem,2vw,1.6rem);top:50%;margin:0;padding:.55rem .4rem;list-style:none;transform:translateY(-50%);background:var(--blanco);border:var(--borde);border-radius:999px}
.avance li{width:10px;height:10px;border:2px solid var(--tinta);border-radius:50%;background:var(--blanco);transition:transform .25s,background-color .25s}
.avance li.hecho{background:var(--tinta)}
.avance li.aqui{background:var(--copihue);transform:scale(1.45)}

.con-js .pista{display:inline-flex;align-items:center;gap:.4rem;position:absolute;z-index:6;left:50%;bottom:1.1rem;margin:0;padding:.4rem 1rem;background:var(--blanco);border:var(--borde);border-radius:999px;box-shadow:var(--sombra-s);font-weight:800;font-size:.95rem;transform:translateX(-50%);will-change:opacity}
.pista svg{animation:pista-baja 1.5s ease-in-out infinite}
@keyframes pista-baja{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}

/* Celular y pantallas angostas: textos en una banda arriba */
@media (max-width:760px){
  .marca{font-size:.92rem;padding-right:.7rem}
  .copihue{width:24px;height:30px}
  .cab .btn{font-size:.98rem;padding:.5rem 1.05rem}
  .con-js .momento{left:.7rem;right:.7rem;top:4.3rem;width:auto;padding:.9rem 1rem 1rem;box-shadow:var(--sombra-s)}
  .momento h1{font-size:1.5rem}
  .momento h2{font-size:1.32rem}
  .momento p{font-size:.98rem}
  .momento blockquote p{font-size:.97rem;line-height:1.35}
  .momento .grande{font-size:1.12rem}
  .entrar{font-size:1.15rem;min-height:52px;padding:.65rem 2rem;margin-top:.7rem}
  .momento .chica{margin-top:.7rem;font-size:.8rem}
  .con-js .avance{right:.45rem;top:58%;gap:.45rem;padding:.45rem .32rem}
  .avance li{width:8px;height:8px}
}

/* Láminas estáticas (movimiento reducido) */
.laminas .historia{padding:5.2rem 1rem 3rem;max-width:64rem;margin:0 auto}
.laminas .lamina{margin:0 0 2.2rem}
.laminas .lamina svg{display:block;overflow:hidden;width:100%;aspect-ratio:16/9;border:var(--borde);border-radius:var(--r);box-shadow:var(--sombra);background:#bfdfea}
.laminas .momento{position:relative;max-width:34rem;margin:-2.2rem 0 0 1.2rem;opacity:1}
.laminas svg *{animation:none!important}
@media (max-width:760px){
  .laminas .lamina svg{aspect-ratio:1/1}
  .laminas .momento{margin:-1.4rem .5rem 0}
}

/* Reposo vivo: solo transform y opacity */
.capa{will-change:transform}
.aspas{animation:giro 7s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
.alamo{animation:mecer 5s ease-in-out infinite alternate}
@keyframes mecer{from{transform:rotate(-1.5deg)}to{transform:rotate(1.8deg)}}
.humo{opacity:0;animation:humo 5.4s ease-out infinite}
@keyframes humo{0%{transform:translate(0,0) scale(.35);opacity:0}14%{opacity:.9}100%{transform:translate(20px,-64px) scale(1.55);opacity:0}}
.nube{animation:deriva 34s ease-in-out infinite alternate}
@keyframes deriva{from{transform:translateX(-26px)}to{transform:translateX(34px)}}
.ave-ruta{animation:vuelo 44s linear infinite}
@keyframes vuelo{from{transform:translateX(-1250px)}to{transform:translateX(1250px)}}
.ave-sube{animation:sube 3.2s ease-in-out infinite alternate}
@keyframes sube{from{transform:translateY(-7px)}to{transform:translateY(8px)}}
.ala{animation:aleteo .62s ease-in-out infinite alternate}
@keyframes aleteo{from{transform:scaleY(1)}to{transform:scaleY(-.55)}}
.pasta{animation:pastar 4.6s ease-in-out infinite alternate}
@keyframes pastar{0%,35%{transform:rotate(0deg)}70%,100%{transform:rotate(34deg)}}
.cola{animation:cola .5s ease-in-out infinite alternate}
@keyframes cola{from{transform:rotate(-16deg)}to{transform:rotate(20deg)}}
.halo{animation:parpadeo 2.6s ease-in-out infinite alternate}
@keyframes parpadeo{from{opacity:.55}to{opacity:1}}
.bandera{animation:ondear 1.8s ease-in-out infinite alternate}
@keyframes ondear{from{transform:skewY(-5deg)}to{transform:skewY(6deg)}}
.bote{animation:bote 3.4s ease-in-out infinite alternate}
@keyframes bote{from{transform:translateY(-1px) rotate(-4deg)}to{transform:translateY(2px) rotate(4deg)}}
.brillo{animation:brillo 2.8s ease-in-out infinite alternate}
@keyframes brillo{from{opacity:.15}to{opacity:.95}}