@charset "utf-8";
/* CSS Document */

/* ── Fondos ── */
.bg-image { position: fixed; inset: 0; z-index: -2; background-size: cover; background-position: center; background-repeat: no-repeat; }
.bg-image::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.72); }
.bg-animation { position: fixed; inset: 0; z-index: -2; background: #000; overflow: hidden; }
.bg-animation .particle { position: absolute; border-radius: 50%; opacity: 0; animation: floatParticle linear infinite; }
.bg-animation .rune { position: absolute; font-family: serif; color: rgba(201,168,76,0.18); font-size: 1.4rem; animation: floatRune linear infinite; user-select: none; pointer-events: none; }
.bg-animation .pulse-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(139,0,0,0.15); animation: expandRing ease-out infinite; }
@keyframes floatParticle { 0%{transform:translateY(100vh) scale(0);opacity:0} 10%{opacity:1} 90%{opacity:.6} 100%{transform:translateY(-10vh) scale(1.4);opacity:0} }
@keyframes floatRune { 0%{transform:translateY(105vh) rotate(0deg);opacity:0} 5%{opacity:1} 95%{opacity:.5} 100%{transform:translateY(-10vh) rotate(360deg);opacity:0} }
@keyframes expandRing { 0%{transform:translate(-50%,-50%) scale(0);opacity:.6} 100%{transform:translate(-50%,-50%) scale(4);opacity:0} }
.bg-video { position: fixed; inset: 0; z-index: -2; overflow: hidden; }
.bg-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-video::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.70); }
</style>