/* =============================================================================
   home-fx-2026.css — MaeloRO 08/10/2026. Portada: capa de efectos "3D" y de luz (se carga la ULTIMA, despues de
   home-2026.css, junto con maeloro-fx.js). Solo aspecto: mismos colores (oro, lila, menta; azul Jedi / rojo Sith),
   mismos textos y enlaces. Todo lo que se mueve esta dentro de (prefers-reduced-motion: no-preference) o lo pone
   el JS solo cuando hay raton. Lote 2 (tarde, apartados 10-19): esquinas de ventana RO, Yoda y Palpatine en la tira
   de clases, auras de la Fuerza, fichas de Server Info, anillos de Why play, insignia 2x EXP, fila del pie, linea de
   progreso y barra fija del telefono. Para desactivarla: quitar el <link> de index.php.
   ============================================================================= */

/* ---------- 0. aparicion al hacer scroll (el JS pone .mro-aparece solo a lo que esta fuera de la vista) ---------- */
.mro-aparece { opacity: 0; transform: translateY(18px); }
.mro-aparece.mro-visto {
	opacity: 1;
	transform: none;
	transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
	transition-delay: calc(var(--mro-orden, 0) * 70ms);
}

/* ---------- 1. botones del hero: inclinacion 3D hacia el raton + destello que lo sigue + halo de su color ---------- */
.mro-sheen {
	position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
	background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .34), transparent 62%);
	mix-blend-mode: soft-light; opacity: 0; transition: opacity .25s ease;
}
.mro-tilt > .mro-sheen { opacity: 1; }
.mro-raton .button-group .btn { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, filter .3s ease; }
.mro-raton .button-group .btn.mro-tilt {
	transform: perspective(700px) rotateX(calc(var(--ty, 0) * -1 * var(--mro-max, 6deg))) rotateY(calc(var(--tx, 0) * var(--mro-max, 6deg))) translateY(-3px) scale(1.03);
	transition: transform .12s linear, box-shadow .3s ease, filter .3s ease;
	will-change: transform;
	box-shadow: var(--h3d-bevel-gold-hover), 0 0 34px rgba(255, 215, 0, .32);
}
.mro-raton .button-row a[href*="discord.gg"].mro-tilt { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 14px 28px -12px rgba(0, 0, 0, .95), 0 0 34px rgba(92, 177, 238, .55); }
.mro-raton #forumButton.mro-tilt { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 14px 28px -12px rgba(0, 0, 0, .95), 0 0 34px rgba(158, 213, 253, .5); }
.mro-raton #playButton.mro-tilt { box-shadow: 0 0 0 2px rgba(140, 90, 20, .40) inset, 0 14px 30px rgba(0, 0, 0, .45), 0 0 44px rgba(255, 215, 0, .55); }

/* ---------- 2. golpe dorado al pulsar (tambien en telefono) ---------- */
.mro-pos { position: relative; }
.mro-golpe {
	position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none;
	background: radial-gradient(circle, rgba(255, 244, 200, .95) 0%, rgba(255, 215, 0, .55) 45%, transparent 70%);
	animation: mroGolpe .65s ease-out forwards;
}
@keyframes mroGolpe {
	0% { transform: scale(1); opacity: .9; }
	100% { transform: scale(14); opacity: 0; }
}

/* ---------- 3. pildoras de estado: iconos del juego, encendido en cadena y "senal" que recorre ---------- */
.server-item { position: relative; overflow: hidden; }
.server-item p { display: inline-flex; align-items: center; gap: 8px; }
.server-item p::before {
	content: ''; flex: 0 0 18px; width: 18px; height: 18px;
	background: center / contain no-repeat; 
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7));
}
.server-list .server-item:nth-child(1) p::before { background-image: url('/img/wow/opciones.png'); }
.server-list .server-item:nth-child(2) p::before { background-image: url('/img/wow/online.png'); }
.server-list .server-item:nth-child(3) p::before { background-image: url('/img/wow/mapa.png'); }
.server-item::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(100deg, transparent 30%, rgba(127, 240, 200, .18) 50%, transparent 70%);
	transform: translateX(-120%);
}
/* jugadores online: caras del juego; mercaderes: bolsa de zeny */
.online-pill::before {
	content: ''; width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px;
	background: url('/img/wow/raza-human_male.png') center / cover no-repeat; 
	box-shadow: 0 0 0 1px rgba(127, 240, 200, .5), 0 1px 3px rgba(0, 0, 0, .7);
}
.online-pill.merchant-pill::before { background-image: url('/img/wow/oro.png'); background-size: contain; border-radius: 0; box-shadow: none; }
.online-pill-num { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
	.server-list .server-item { animation: mroEncender .9s ease-out both; }
	.server-list .server-item:nth-child(2) { animation-delay: .15s; }
	.server-list .server-item:nth-child(3) { animation-delay: .3s; }
	.server-item::after { animation: mroSenal 8s ease-in-out infinite; }
	.server-list .server-item:nth-child(2)::after { animation-delay: .35s; }
	.server-list .server-item:nth-child(3)::after { animation-delay: .7s; }
	@keyframes mroEncender {
		0% { opacity: 0; transform: translateY(8px); box-shadow: var(--h3d-pill), 0 0 0 rgba(127, 240, 200, 0); }
		55% { box-shadow: var(--h3d-pill), 0 0 26px rgba(127, 240, 200, .55); }
		100% { opacity: 1; transform: none; }
	}
	@keyframes mroSenal {
		0%, 70% { transform: translateX(-120%); }
		85%, 100% { transform: translateX(120%); }
	}
}

/* ---------- 4. banner: respira despacio y sigue al raton; ascuas de la Fuerza ---------- */
@media (prefers-reduced-motion: no-preference) and (min-width: 700px) {
	header .logo {
		transform-origin: 50% 35%;
		animation: mroBannerRespira 28s ease-in-out infinite alternate;
		transition: transform .6s ease;
	}
	@keyframes mroBannerRespira {
		from { transform: translate(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 6px)) scale(1); }
		to { transform: translate(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 6px)) scale(1.035); }
	}
	/* las estrellas que ya habia parpadean a destiempo en vez de todas a la vez */
	header::before { animation-duration: 3.2s; }
}
.mro-ascuas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.mro-ascuas i {
	position: absolute; left: var(--x); bottom: -10px; width: var(--r); height: var(--r); border-radius: 50%; opacity: 0;
	background: #ffd86a; box-shadow: 0 0 6px 2px rgba(255, 215, 0, .55);
	animation: mroAscua var(--d) linear infinite; animation-delay: var(--e);
}
.mro-ascuas i.az { background: #9fd8ff; box-shadow: 0 0 6px 2px rgba(70, 165, 255, .6); }
.mro-ascuas i.ro { background: #ffb0b0; box-shadow: 0 0 6px 2px rgba(255, 60, 70, .6); }
@keyframes mroAscua {
	0% { transform: translateY(0) translateX(0); opacity: 0; }
	10% { opacity: .85; }
	50% { transform: translateY(-45vh) translateX(12px); opacity: .6; }
	100% { transform: translateY(-90vh) translateX(-8px); opacity: 0; }
}

/* ---------- 5. barra superior: el filo se vuelve un sable cuando el hero ya no esta a la vista ---------- */
.top-bar::after { transition: opacity .4s ease, box-shadow .4s ease; }
body.mro-scrolled .top-bar::after {
	background: linear-gradient(90deg, transparent 2%, rgba(60, 160, 255, .9) 18%, rgba(255, 215, 0, .95) 50%, rgba(255, 45, 60, .9) 82%, transparent 98%);
	box-shadow: 0 0 10px rgba(255, 215, 0, .35), 0 0 18px rgba(120, 160, 255, .25);
}
/* marca en la barra tambien en telefono (el texto se oculta a <=600px) */
@media (max-width: 600px) {
	.top-bar .nav-brand-link::before, .top-bar > div:first-child::before {
		content: ''; display: inline-block; width: 26px; height: 26px; margin-right: 6px; vertical-align: middle;
		background: url('/img/wow/inicio.png') center / contain no-repeat; border-radius: 6px;
		box-shadow: 0 0 10px rgba(255, 215, 0, .25);
	}
}

/* ---------- 6. tarjetas "Midgard today", Why play, Server Info, WoE: inclinacion suave con el raton ---------- */
.mro-raton .pulse-tile, .mro-raton .feature-mini, .mro-raton .info-col, .mro-raton .woe-day { transform-style: preserve-3d; }
.mro-raton .pulse-tile.mro-tilt, .mro-raton .feature-mini.mro-tilt, .mro-raton .info-col.mro-tilt, .mro-raton .woe-day.mro-tilt {
	transform: perspective(900px) rotateX(calc(var(--ty, 0) * -1 * var(--mro-max, 4deg))) rotateY(calc(var(--tx, 0) * var(--mro-max, 4deg))) translateY(-3px);
	transition: transform .12s linear, box-shadow .25s ease, border-color .25s ease;
	border-color: rgba(255, 215, 0, .5) !important;
}
.pulse-tile, .feature-mini, .info-col, .woe-day { position: relative; overflow: hidden; }

/* ---------- 7. la tarjeta de Windows sin icono en el titulo (la unica): el mando del juego ---------- */
#wconsoleSection > h2::before { background-image: url('/img/wow/batalla.png'); }
@media (hover: hover) { #wconsoleSection:hover > h2::before { background-image: url('/img/wow/batalla.png'); } }

/* ---------- 8. Why play en telefono: la quinta tarjeta ocupa las dos columnas en vez de quedar sola ---------- */
@media (max-width: 700px) {
	.features-grid > .feature-mini:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- 9. sin movimiento: todo quieto y visible ---------- */
@media (prefers-reduced-motion: reduce) {
	.mro-aparece { opacity: 1; transform: none; }
	.mro-ascuas, .mro-golpe, .mro-sheen { display: none; }
}

/* ======================= 08/10/2026 (tarde) — lote 2: secciones de la portada ======================= */

/* ---------- 10. esquinas de ventana RO en las tarjetas (el JS mete <i class="mro-esquinas"> en cada seccion) ---------- */
#infoSection .woe-box { position: relative; }
.mro-esquinas {
	--e: rgba(255, 215, 0, .85); --l: 18px; --g: 2px;
	position: absolute; inset: 7px; pointer-events: none; border-radius: inherit; opacity: .6; transition: opacity .35s ease;
	background:
		linear-gradient(var(--e), var(--e)) left top / var(--l) var(--g) no-repeat,
		linear-gradient(var(--e), var(--e)) left top / var(--g) var(--l) no-repeat,
		linear-gradient(var(--e), var(--e)) right top / var(--l) var(--g) no-repeat,
		linear-gradient(var(--e), var(--e)) right top / var(--g) var(--l) no-repeat,
		linear-gradient(var(--e), var(--e)) left bottom / var(--l) var(--g) no-repeat,
		linear-gradient(var(--e), var(--e)) left bottom / var(--g) var(--l) no-repeat,
		linear-gradient(var(--e), var(--e)) right bottom / var(--l) var(--g) no-repeat,
		linear-gradient(var(--e), var(--e)) right bottom / var(--g) var(--l) no-repeat;
	filter: drop-shadow(0 0 3px rgba(255, 215, 0, .45));
}
section.feature:hover > .mro-esquinas, .woe-box:hover > .mro-esquinas { opacity: 1; }
.feature-booster > .mro-esquinas { --e: rgba(127, 199, 252, .85); filter: drop-shadow(0 0 3px rgba(117, 189, 242, .5)); }

/* ---------- 11. "Choose your path": Yoda y Palpatine, de pie en la cabecera (a la derecha), miran pasar el desfile ---------- */
@media (min-width: 900px) {
	.classes::before, .classes::after {
		content: ''; position: absolute; top: 4px; z-index: 3; pointer-events: none;
		background: center bottom / contain no-repeat; 
	}
	.classes::before {
		right: 92px; width: 40px; height: 60px;
		background-image: url('/img/wow/raza-draenei_female.png');
		filter: drop-shadow(0 0 7px rgba(80, 170, 255, .75)) drop-shadow(0 6px 5px rgba(0, 0, 0, .6));
	}
	.classes::after {
		right: 30px; width: 40px; height: 68px; top: -2px;
		background-image: url('/img/wow/lichking.png');
		filter: drop-shadow(0 0 7px rgba(255, 60, 70, .75)) drop-shadow(0 6px 5px rgba(0, 0, 0, .6));
	}
	@media (prefers-reduced-motion: no-preference) {
		.classes::before { animation: mroYodaFlota 4.2s ease-in-out infinite; }
		.classes::after { animation: mroSithLate 3s ease-in-out infinite; }
		@keyframes mroYodaFlota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
		@keyframes mroSithLate {
			0%, 100% { filter: drop-shadow(0 0 5px rgba(255, 60, 70, .55)) drop-shadow(0 8px 6px rgba(0, 0, 0, .6)); }
			50% { filter: drop-shadow(0 0 12px rgba(255, 60, 70, .95)) drop-shadow(0 8px 6px rgba(0, 0, 0, .6)); }
		}
	}
}

/* ---------- 12. cartas de la Fuerza en la tira: aura azul (Jedi) o roja (Sith) detras del sprite, mas viva al pasar ---------- */
.class-card { position: relative; }
.class-card:has(img.class-emblema)::before {
	content: ''; position: absolute; left: 50%; top: 44%; width: 130px; height: 130px; margin: -65px 0 0 -65px;
	border-radius: 50%; z-index: 0; pointer-events: none; opacity: .4; transition: opacity .35s ease;
	background: radial-gradient(circle, rgba(90, 170, 255, .6) 0%, rgba(90, 170, 255, .18) 42%, transparent 68%);
	filter: blur(4px);
}
.class-card.is-sith::before { background: radial-gradient(circle, rgba(255, 70, 80, .6) 0%, rgba(255, 70, 80, .18) 42%, transparent 68%); }
.class-card:hover::before { opacity: 1; }
.class-card > img { position: relative; z-index: 1; }
.mro-raton .class-card.mro-tilt {
	transform: perspective(900px) rotateX(calc(var(--ty, 0) * -1 * var(--mro-max, 5deg))) rotateY(calc(var(--tx, 0) * var(--mro-max, 5deg))) translateY(-4px);
	transition: transform .12s linear, border-color .25s ease, background .25s ease;
}
@media (prefers-reduced-motion: no-preference) {
	.class-card:hover::before { animation: mroAura 1.4s ease-in-out infinite alternate; }
	@keyframes mroAura { from { transform: scale(.92); } to { transform: scale(1.1); } }
}

/* ---------- 13. Server Info: los valores clave como fichas iluminadas (255 / 120 / 40x / 80x / 1%) ---------- */
.info-val-gold, .info-val-mint {
	display: inline-block; padding: 1px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; line-height: 1.5;
}
.info-val-gold {
	background: rgba(255, 215, 0, .09);
	box-shadow: inset 0 0 0 1px rgba(255, 215, 0, .38), 0 0 10px rgba(255, 215, 0, .14);
	text-shadow: 0 0 8px rgba(255, 215, 0, .5);
}
.info-val-mint {
	background: rgba(127, 240, 200, .08);
	box-shadow: inset 0 0 0 1px rgba(127, 240, 200, .38), 0 0 10px rgba(127, 240, 200, .14);
	text-shadow: 0 0 8px rgba(127, 240, 200, .5);
}

/* ---------- 14. Why play: anillo de luz (oro + lila) alrededor de la cara; gira al pasar el raton ---------- */
.feature-mini-icon { position: relative; }
.feature-mini-icon::before {
	content: ''; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; opacity: .35; transition: opacity .3s ease;
	background: conic-gradient(from 0deg, rgba(255, 215, 0, .95), transparent 25%, rgba(158, 213, 253, .9) 50%, transparent 75%, rgba(255, 215, 0, .95));
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000000 calc(100% - 2.5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000000 calc(100% - 2.5px));
}
.feature-mini:hover .feature-mini-icon::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
	.feature-mini:hover .feature-mini-icon::before { animation: mroGira 2.4s linear infinite; }
	@keyframes mroGira { to { transform: rotate(360deg); } }
}

/* ---------- 15. Server Booster: insignia "2x EXP" como un buff del juego (manual de experiencia) delante del texto.
   (.feature-booster::before ya es la linea de luz de arriba, de home-3d.css: por eso va en el parrafo) ---------- */
.feature-booster > p::before {
	content: '2x EXP'; display: inline-block; vertical-align: middle; margin: -3px 12px 0 0;
	font-family: 'Cinzel', serif; font-weight: 900; font-size: .74rem; letter-spacing: .8px; color: #2a1d00; line-height: 1;
	padding: 6px 12px 6px 31px; border-radius: 999px;
	background: url('/img/wow/manual.png') 8px center / 18px 18px no-repeat, linear-gradient(100deg, #fff1b8, #ffd24a);
	
	box-shadow: 0 4px 12px rgba(0, 0, 0, .45), 0 0 18px rgba(255, 215, 0, .35);
	transform: rotate(-3deg);
}
@media (prefers-reduced-motion: no-preference) {
	.feature-booster > p::before { animation: mroInsignia 2.4s ease-in-out infinite; }
	@keyframes mroInsignia {
		0%, 100% { box-shadow: 0 4px 12px rgba(0, 0, 0, .45), 0 0 14px rgba(255, 215, 0, .3); }
		50% { box-shadow: 0 4px 12px rgba(0, 0, 0, .45), 0 0 26px rgba(255, 215, 0, .7); }
	}
}

/* ---------- 16. pie: fila de personajes (clases de la Fuerza entre los 4º jobs) sobre la linea dorada ---------- */
.mro-pie-fila {
	display: flex; justify-content: center; align-items: flex-end; gap: 18px; max-width: 720px;
	margin: -6px auto 16px; padding: 0 8px 10px; border-bottom: 1px solid rgba(255, 215, 0, .2);
}
.mro-pie-fila img {
	display: block; height: 64px; width: auto; 
	filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .65));
	transition: translate .25s ease, scale .25s ease, filter .25s ease;
}
.mro-pie-fila img.sw { filter: drop-shadow(0 0 6px rgba(80, 170, 255, .55)) drop-shadow(0 6px 6px rgba(0, 0, 0, .65)); }
.mro-pie-fila img.sw.sith { filter: drop-shadow(0 0 6px rgba(255, 60, 70, .6)) drop-shadow(0 6px 6px rgba(0, 0, 0, .65)); }
.mro-pie-fila img:hover { translate: 0 -6px; scale: 1.1; filter: drop-shadow(0 0 10px rgba(255, 215, 0, .8)) drop-shadow(0 8px 8px rgba(0, 0, 0, .7)); }
@media (prefers-reduced-motion: no-preference) {
	.mro-pie-fila img { animation: mroPieRespira 3.4s ease-in-out infinite; }
	.mro-pie-fila img:nth-child(2n) { animation-delay: -.9s; }
	.mro-pie-fila img:nth-child(3n) { animation-delay: -1.7s; }
	.mro-pie-fila img:nth-child(5n) { animation-delay: -2.6s; }
	@keyframes mroPieRespira { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
}
@media (max-width: 600px) {
	.mro-pie-fila { gap: 12px; }
	.mro-pie-fila img { height: 52px; }
	.mro-pie-fila img.ro { display: none; }
}

/* ---------- 17. linea de progreso de lectura en el borde superior (azul Jedi → oro → rojo Sith) ---------- */
.mro-progreso {
	position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 9998; pointer-events: none;
	transform-origin: 0 50%; transform: scaleX(0); opacity: 0; transition: opacity .3s ease;
	background: linear-gradient(90deg, rgba(60, 160, 255, .95), #ffd700 50%, rgba(255, 45, 60, .95));
	box-shadow: 0 0 8px rgba(255, 215, 0, .55);
}
body.mro-scrolled .mro-progreso { opacity: 1; }

/* ---------- 18. telefono: barra fija abajo con Play / Play Mobile en cuanto el hero queda arriba ---------- */
.mro-barra-movil { display: none; }
@media (max-width: 700px) {
	.mro-barra-movil {
		display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9995;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
		background: rgba(7, 14, 20, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
		border-top: 1px solid rgba(255, 215, 0, .4); box-shadow: 0 -10px 30px rgba(0, 0, 0, .55);
		transform: translateY(110%); transition: transform .35s cubic-bezier(.2, .7, .2, 1);
	}
	body.mro-scrolled:not(.mro-jugando) .mro-barra-movil { transform: none; }
	.mro-barra-movil button {
		flex: 1; min-height: 44px; font-family: 'Cinzel', serif; font-weight: 700; font-size: .82rem; letter-spacing: .5px; text-transform: uppercase;
		padding: 10px 8px; border-radius: 12px; cursor: pointer; color: #1a1000;
		border: 1px solid rgba(255, 215, 0, .55); background: linear-gradient(135deg, #ffe98a, #ffd700 55%, #e0b400);
		box-shadow: 0 6px 16px rgba(0, 0, 0, .45), 0 0 16px rgba(255, 215, 0, .25);
	}
	.mro-barra-movil button.mro-bm-movil { color: #06121f; border-color: rgba(126, 198, 255, .65); background: linear-gradient(135deg, #d6efff, #7ec6ff 60%, #58a9ea); box-shadow: 0 6px 16px rgba(0, 0, 0, .45), 0 0 16px rgba(126, 198, 255, .3); }
	.mro-barra-movil button:active { transform: scale(.97); }
	/* el boton de Discord sube y el pie deja sitio para que nada quede tapado */
	body.mro-scrolled:not(.mro-jugando) .discord-fab { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); transition: bottom .35s ease; }
	body.mro-scrolled:not(.mro-jugando) footer { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 19. sin movimiento: todo quieto (las esquinas, fichas y auras se ven igual) ---------- */
@media (prefers-reduced-motion: reduce) {
	.mro-progreso { display: none; }
	.mro-barra-movil { transition: none; }
}

/* ---------- 20. "Midgard today": las lineas de las tarjetas se reparten (sin una palabra suelta al final) ---------- */
.pulse-val { text-wrap: balance; }

/* ---------- 21. higiene (09/10, del juez del analisis): ascuas DETRAS de los botones del hero; la linea dorada de las
   tarjetas de "Midgard today" no se recorta (el overflow:hidden del apartado 6 le comia 1px); sin desenfoque de fondo
   en telefono (caro y practicamente invisible sobre paneles al 88 %); animaciones en pausa cuando el bloque no se ve ---------- */
header .container { position: relative; z-index: 1; }
.pulse-tile::before { top: 0; }
@media (max-width: 600px) {
	.feature, footer, #infoSection .woe-box, .classes { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.mro-fuera .mro-ascuas i, .classes.mro-fuera .classes-list, .mro-pie-fila.mro-fuera img { animation-play-state: paused; }

/* ---------- 22. barra superior en pantallas medianas (09/10/2026): el subtitulo "Private Ragnarok Online Server" solo
   cuando cabe (>1240px); entre 601 y 800px tampoco la marca de texto, Login y el aviso de WoE en una sola linea (antes se
   apilaban y Login quedaba cortado por arriba) y, en los mas estrechos, el aviso sin el nombre del castillo ---------- */
@media (min-width: 601px) and (max-width: 1240px) { .top-bar .nav-brand-sub { display: none; } }
@media (min-width: 601px) and (max-width: 800px) {
	.top-bar .nav-brand-text { display: none; }
	.top-bar .user-options { flex-wrap: nowrap; flex-shrink: 0; }
}
@media (min-width: 601px) and (max-width: 720px) { .top-bar .woe-mini-castle { display: none; } }