/* Adornos de la Revolución en la portada (ver revolucion.js). Todo cuelga de .rv-capa, dentro de #portada, debajo de la barra superior. */
#portada .rv-capa{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;transition:opacity .5s ease}
#portada.pt-abierta .rv-capa{opacity:.18}
html.pt-noche #portada{--rv-v:#2fd98a;--rv-b:#fffaf0;--rv-r:#ff5468}
html.pt-dia #portada{--rv-v:#0c9a5c;--rv-b:#ffffff;--rv-r:#d6203a}
html.pt-noche #portada .rv-capa{--rv-tinta:rgba(172,208,255,.78);--rv-ban:1;--rv-cuerda:rgba(190,220,255,.4)}
html.pt-dia #portada .rv-capa{--rv-tinta:rgba(14,38,92,.78);--rv-ban:1;--rv-cuerda:rgba(20,50,120,.4)}
@keyframes rv-aparece{to{opacity:1}}

/* ---- la marca se pinta de verde, blanco y rojo cuando pasa el tren ---- */
#portada .pt-marca .rv-parte{transition:color .8s ease,text-shadow .8s ease}
#portada .pt-marca .rv-pinta.rv-p0{color:var(--rv-v)}
#portada .pt-marca .rv-pinta.rv-p1{color:var(--rv-b)}
#portada .pt-marca .rv-pinta.rv-p2{color:var(--rv-r)}
html.pt-noche #portada .pt-marca .rv-pinta.rv-p1{text-shadow:0 0 22px rgba(255,255,255,.28)}
html.pt-dia #portada .pt-marca .rv-pinta.rv-p1{text-shadow:2px 0 0 #1b3f9a,-2px 0 0 #1b3f9a,0 2px 0 #1b3f9a,0 -2px 0 #1b3f9a,1.5px 1.5px 0 #1b3f9a,-1.5px -1.5px 0 #1b3f9a,1.5px -1.5px 0 #1b3f9a,-1.5px 1.5px 0 #1b3f9a}

/* ---- A · banderines tricolor ---- */
.rv-ban{position:absolute;left:0;top:56px;width:100%;height:clamp(70px,11.5vw,150px);overflow:visible;opacity:0;animation:rv-aparece 1.8s ease .6s forwards}
.rv-cuerda{stroke:var(--rv-cuerda);stroke-width:1.6}
.rv-banderin{opacity:var(--rv-ban);filter:drop-shadow(0 1px 1.6px rgba(6,16,44,.4));transform-box:fill-box;transform-origin:50% 0}
.rv-viento .rv-banderin{animation:rv-brisa 4.6s ease-out both;animation-delay:calc(var(--i) * 70ms)}
@keyframes rv-brisa{0%{transform:rotate(0)}16%{transform:rotate(calc(var(--a) * 1deg))}36%{transform:rotate(calc(var(--a) * -.7deg))}56%{transform:rotate(calc(var(--a) * .45deg))}76%{transform:rotate(calc(var(--a) * -.2deg))}100%{transform:rotate(0)}}

/* ---- B · el tren ---- */
.rv-via{position:absolute;left:0;right:0;bottom:30px;height:7px;opacity:0;animation:rv-aparece 2s ease 1s forwards;
  border-top:1.5px solid var(--rv-cuerda);
  background:repeating-linear-gradient(90deg,var(--rv-cuerda) 0 2px,transparent 2px 15px);background-size:100% 5px;background-repeat:no-repeat;background-position:0 2px}
.rv-tren{position:absolute;left:0;bottom:36px;width:clamp(280px,38vw,600px);color:var(--rv-tinta);transform:translateX(-110%);animation:rv-cruza linear forwards;will-change:transform}
.rv-bamb{animation:rv-traquetea .28s ease-in-out infinite alternate}
.rv-tren-img{display:block;width:100%;height:auto;user-select:none}
.rv-tren-img.noche{display:none}
html.pt-noche #portada .rv-tren-img.dia{display:none}
html.pt-noche #portada .rv-tren-img.noche{display:block}
@keyframes rv-traquetea{from{transform:translateY(0)}to{transform:translateY(-1.5px)}}
@keyframes rv-cruza{from{transform:translateX(-110%)}to{transform:translateX(calc(100vw + 100%))}}
.rv-tren.rv-inv{left:auto;right:0;animation-name:rv-cruza-inv}
.rv-tren.rv-inv .rv-tren-img{transform:scaleX(-1)}   /* se voltea la imagen, no .rv-bamb: su traqueteo ya usa transform y anularía el volteo */
@keyframes rv-cruza-inv{from{transform:translateX(110%)}to{transform:translateX(calc(-100vw - 100%))}}
.rv-humo{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:radial-gradient(closest-side,var(--rv-tinta),transparent);opacity:0;animation:rv-sube 3.6s ease-out forwards}
@keyframes rv-sube{0%{opacity:.5;transform:translateY(0) scale(.5)}100%{opacity:0;transform:translateY(-70px) translateX(-10px) scale(3)}}

@media (max-width:640px){
  .rv-ban{top:60px}
  .rv-tren{bottom:28px}.rv-via{bottom:22px}
}
@media (prefers-reduced-motion:reduce){
  .rv-ban,.rv-via{animation:none;opacity:1}
  .rv-viento .rv-banderin{animation:none}
}