/* =============================================================================
home-2026.css — MaeloRO 30/09/2026. Portada (index.php): capa de modernizacion.
-----------------------------------------------------------------------------
Se carga DESPUES del CSS de la portada y de home-3d.css. Solo aspecto; usa las variables de maeloro-ui.css.
Arregla lo visto en la auditoria (AUDITORIA-WEB-2026-09-30.md): jerarquia de botones, navegacion en la barra,
paneles que se abrian fuera de la vista, horario de WoE con el sabado suelto, hueco negro del carrusel del APK,
titulo sin icono, pie sin enlaces, boton de Discord tapando en movil, animaciones demasiado insistentes.
Para desactivarla: quitar la linea de index.php.
============================================================================= */
/* ---------- barra superior: navegacion a las paginas que ya existen ---------- */
.mro-nav {
display: flex;
align-items: center;
gap: 2px;
margin-left: 16px;
padding-left: 16px;
border-left: 1px solid var(--mro-linea);
}
.mro-nav a {
color: var(--mro-texto-2);
font: 600 .8rem/1 var(--mro-fuente);
letter-spacing: .4px;
text-decoration: none;
padding: 8px 10px;
border-radius: 8px;
white-space: nowrap;
transition: color var(--mro-t), background-color var(--mro-t);
}
.mro-nav a:hover { color: var(--mro-oro-claro); background: rgba(123, 183, 227, .12); }
/* se muestra solo con sitio de sobra: con la sesion iniciada (Bienvenido + Opciones + Salir + WoE) a 1280 px apretaba la barra */
@media (max-width: 1399px) { .mro-nav { display: none; } }
/* ---------- hero: jerarquia clara (Play > Register > Discord / Forum) ---------- */
.button-row a[href*="discord.gg"],
#forumButton {
background: linear-gradient(180deg, rgba(25, 44, 57, .92), rgba(13, 25, 33, .94));
color: var(--mro-texto);
border: 1px solid var(--mro-linea-oro);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 22px -12px rgba(0, 0, 0, .9);
}
.button-row a[href*="discord.gg"]::before,
#forumButton::before { opacity: .18; }
.button-row a[href*="discord.gg"]:hover,
#forumButton:hover {
color: #ffffff;
border-color: rgba(240, 199, 94, .7);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 14px 28px -12px rgba(0, 0, 0, .95), var(--mro-brillo-oro);
}
/* al pasar el raton: se eleva, sin "saltar" */
.btn:hover { transform: translateY(-2px) scale(1.02); }
/* el destello del boton Play pasa cada 8 s en vez de cada 3 */
#playButton::before { animation-duration: 8s; }
@keyframes playShine {
0% { background-position: 120% 0; }
22% { background-position: -60% 0; }
100% { background-position: -60% 0; }
}
/* ---------- los paneles (login, registro, opciones, donar...) se ven al abrirse ---------- */
.panel-wrapper { scroll-margin-top: calc(var(--topbar-h, 56px) + 14px); }
/* ---------- horario de WoE: los 7 dias en una fila; en tableta 4+3; en movil 2 columnas sin dia suelto ---------- */
#infoSection .woe-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
#infoSection .woe-day { padding: 11px 10px; transition: transform var(--mro-t), border-color var(--mro-t); }
#infoSection .woe-day:hover { transform: translateY(-2px); border-color: rgba(240, 199, 94, .45); }
#infoSection .woe-slot b { font-size: .78rem; overflow-wrap: anywhere; }
@media (max-width: 980px) {
#infoSection .woe-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
#infoSection .woe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#infoSection .woe-grid > .woe-day:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* ---------- "Play on your phone": icono del titulo y carrusel sin hueco negro ---------- */
#apkSection > h2::before { background-image: url('/img/wow/buscar.png'); }
@media (hover: hover) {
#apkSection:hover > h2::before { background-image: url('/img/wow/buscar.png'); }
}
.apk-show { align-self: center; }
.apk-slides picture { display: contents; }
/* ---------- pie: enlaces utiles ---------- */
footer .mro-pie-nav { margin-bottom: 12px; }
footer .mro-pie-nav a { color: var(--mro-texto-2); }
footer .mro-pie-nav a:hover { color: var(--mro-oro-claro); }
/* ---------- movil ---------- */
@media (max-width: 600px) {
/* el boton flotante de Discord no tapa el final de las tarjetas ni de los paneles */
#mainContainer { padding-bottom: 64px; }
.discord-fab { opacity: .94; }
}
/* barra superior en telefonos: en espanol ("INICIAR SESION", "DONAR / CASH POINTS") se salia 36-85 px por la derecha */
@media (max-width: 480px) {
.top-bar .btn-nav { letter-spacing: 0; padding-left: 9px; padding-right: 9px; }
.top-bar > div:last-child { gap: 6px !important; }
.language-selector a[href="wiki.php"]::before { display: none; }
.language-selector a { margin: 0 1px; }
}
@media (max-width: 350px) {
.top-bar { padding: 0 6px; gap: 5px; }
.top-bar .btn-nav { font-size: .64em; padding: 6px 7px; }
.language-selector { font-size: .74em; }
}
/* =============================================================================
01/10/2026 — imagenes y bordes donde faltaban, sin tocar la estructura (misma esencia MaeloRO: oro, lila, iconos
del propio juego). Las secciones son hermanas en #infoSection:
1 Welcome · 2 How to start · 3 Server Info · 4 Server Booster · 5 Why play · 6 Play on your phone.
============================================================================= */
/* el texto de las tarjetas por encima de las marcas de agua */
.feature > h2, .feature > p, .feature > ol, .feature > div { position: relative; z-index: 1; }
/* ---------- 1 Welcome: marca de agua con el logo y acento dorado en el texto ---------- */
#infoSection > section.feature:first-of-type > p {
margin-left: 2px;
padding-left: 16px;
border-left: 3px solid rgba(255, 215, 0, .55);
border-radius: 2px;
}
@media (min-width: 900px) {
#infoSection > section.feature:first-of-type { padding-right: 280px; }
#infoSection > section.feature:first-of-type::before {
content: '';
position: absolute;
left: auto; /* otra regla de la portada fija left en este ::before: sin esto gana left */
right: 132px; /* separado del Poring que asoma por la esquina (right: 26px) */
top: 50%;
bottom: auto;
width: 120px;
height: 120px;
transform: translateY(-50%);
background: url('/img/wow/logo-wotlk.png') center / contain no-repeat;
opacity: .16;
filter: saturate(.8);
pointer-events: none;
}
}
/* ---------- 2 How to start: cada paso en su fila con borde, y el icono del juego que le corresponde ---------- */
.steps-list .step-item {
padding: 10px 56px 10px 12px;
margin-bottom: 10px;
background: rgba(255, 255, 255, .035);
border: 1px solid rgba(158, 213, 253, .16);
border-radius: 12px;
transition: border-color var(--mro-t), background-color var(--mro-t), transform var(--mro-t);
}
.steps-list .step-item:last-child { margin-bottom: 0; }
@media (hover: hover) {
.steps-list .step-item:hover { border-color: rgba(255, 215, 0, .38); background: rgba(255, 255, 255, .055); transform: translateX(2px); }
}
/* la linea que une los numeros: desplazada lo que ahora mide el relleno de la fila */
.steps-list .step-item:not(:last-child)::before { left: 31px; top: 52px; bottom: -12px; }
.steps-list .step-item::after {
content: '';
position: absolute;
right: 14px;
top: 50%;
width: 30px;
height: 30px;
transform: translateY(-50%);
background: center / contain no-repeat;
filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6));
opacity: .92;
}
.steps-list .step-item:nth-child(1)::after { background-image: url('/img/wow/charla.png'); } /* registro */
.steps-list .step-item:nth-child(2)::after { background-image: url('/img/wow/buscar.png'); } /* jugar */
.steps-list .step-item:nth-child(3)::after { background-image: url('/img/wow/mapa.png'); } /* explorar */
/* ---------- 3 Server Info: icono del juego en la cabecera de cada columna ---------- */
.info-col > h3::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
margin-right: 8px;
vertical-align: -5px;
background: center / contain no-repeat;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
}
.info-grid .info-col:nth-child(1) > h3::before { background-image: url('/img/wow/info.png'); }
.info-grid .info-col:nth-child(2) > h3::before { background-image: url('/img/wow/online.png'); }
.info-grid .info-col:nth-child(3) > h3::before { background-image: url('/img/wow/objeto.png'); }
/* ---------- 4 Server Booster: acento azul Discord y emblema de gremio como marca de agua ---------- */
.feature-booster { border-left: 3px solid rgba(117, 189, 242, .8); }
.feature-booster > p { padding-left: 14px; border-left: 3px solid rgba(117, 189, 242, .45); border-radius: 2px; }
@media (min-width: 900px) {
.feature-booster > p, .feature-booster > div { max-width: calc(100% - 150px); }
.feature-booster::after {
content: '';
position: absolute;
right: 40px;
top: 50%;
width: 110px;
height: 110px;
transform: translateY(-50%);
background: url('/img/wow/gremio.png') center / contain no-repeat;
opacity: .16;
pointer-events: none;
}
}
/* ---------- notas (horario WoE, aviso del APK): caja con borde en vez de texto suelto ---------- */
#infoSection .woe-note,
#apkSection .apk-note {
margin-top: 14px;
padding: 10px 14px;
border: 1px solid rgba(158, 213, 253, .18);
border-left: 3px solid rgba(255, 215, 0, .5);
border-radius: 10px;
background: rgba(255, 255, 255, .03);
opacity: 1;
color: var(--mro-texto-2);
}
#infoSection .woe-note { text-align: left; }
/* ---------- pie: la marca ---------- */
footer .mro-pie-logo { display: block; margin: 0 auto 12px; }
footer .mro-pie-logo img {
display: block;
width: 68px;
height: 68px;
margin: 0 auto;
border-radius: 14px;
filter: drop-shadow(0 0 16px rgba(255, 215, 0, .22));
}
footer p { color: var(--mro-suave); }
/* ===== 01/10/2026: banner entero pero sin empujar los botones fuera de la vista =====
El banner es 3:1 a todo el ancho: en 1920 medía 635 px y en portátiles (1366x768, 1280x720) los botones quedaban
debajo del borde de la pantalla. Ahora su alto tiene tope (48% del alto visible, entre 240 y 640 px) y el ancho
se calcula con la misma proporción 2172/724: la imagen sale ENTERA, sin recortar ni deformar, centrada.
Solo se nota en pantallas apaisadas (ancho/alto > 1,44); en telefono y tableta en vertical no cambia nada.
Cuando queda mas estrecha que la cabecera, los lados se difuminan hacia el fondo (ademas del difuminado de abajo). */
header { --mro-banner-alto: clamp(240px, 48vh, 640px); }
header .logo {
/* 01/10/2026 (pedido del usuario): hasta un 15% mas ancho que su proporcion cuando sobra sitio a los lados
(alto = el menor entre ancho/3 y el tope; object-fit: fill estira solo en horizontal). Si cabe a su
proporcion (telefono, tableta en vertical) no se estira nada. Estirarlo hasta el borde deformaba un 37-43%. */
width: min(100%, calc(var(--mro-banner-alto) * 2172 / 724 * 1.15));
max-height: var(--mro-banner-alto);
object-fit: fill;
margin-inline: auto;
}
@media (min-aspect-ratio: 144/100) {
header .logo {
-webkit-mask-image: linear-gradient(to bottom, #000000 94%, transparent 100%),
linear-gradient(to right, transparent 0, #000000 11%, #000000 89%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(to bottom, #000000 94%, transparent 100%),
linear-gradient(to right, transparent 0, #000000 11%, #000000 89%, transparent 100%);
mask-composite: intersect;
}
}
/* ===== 01/10/2026: lados del banner + toque Star Wars (sin cambiar la tematica de MaeloRO) =====
1) (Retirado el mismo dia: los lados se rellenaban con la misma imagen desenfocada y al usuario le molestaba el
blur. Copia en respaldos-web/cambios-20261001/home-2026.css.con-blur-lados.)
2) Brillo de sable a cada lado (azul / rojo) que "zumba" despacio.
3) El filo dorado bajo la cabecera es ahora un sable que se enciende al cargar: azul desde la izquierda, rojo desde
la derecha y dorado MaeloRO en el centro.
Los pseudo-elementos son de (libres) y se colocan respecto a la cabecera (z-index -1: detras del banner,
de las estrellas y del texto). Con "reducir movimiento" no hay animaciones (regla global del index). */
@media (min-aspect-ratio: 144/100) {
header picture::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
height: var(--mro-banner-alto);
z-index: -1;
pointer-events: none;
}
header picture::after {
background:
radial-gradient(ellipse 22% 62% at 0% 55%, rgba(70, 165, 255, .45), transparent 72%),
radial-gradient(ellipse 22% 62% at 100% 55%, rgba(255, 55, 70, .42), transparent 72%);
mix-blend-mode: screen;
animation: mroSableZumbido 4.8s ease-in-out infinite alternate;
}
}
@keyframes mroSableZumbido {
0% { opacity: .55; }
45% { opacity: .95; }
52% { opacity: .78; }
100% { opacity: 1; }
}
/* el filo bajo la cabecera, como un sable: nucleo claro de 2px y resplandor de color hacia arriba */
header::after {
height: 9px;
opacity: 1;
background:
linear-gradient(90deg, transparent 2%, #9fd8ff 14%, #e9f7ff 38%, #fff3c4 50%, #ffe3e3 62%, #ff8a8a 86%, transparent 98%)
center bottom / 100% 2px no-repeat,
linear-gradient(90deg, transparent 0%, rgba(60, 160, 255, .85) 12%, rgba(120, 190, 255, .55) 36%,
rgba(255, 215, 0, .7) 50%, rgba(255, 120, 130, .55) 64%, rgba(255, 45, 60, .85) 88%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .35) 45%, #000000 100%);
mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .35) 45%, #000000 100%);
transform-origin: center;
animation: mroSableEncender 1.1s cubic-bezier(.2, .8, .2, 1) .35s both,
mroSableLinea 3.6s ease-in-out 1.6s infinite alternate;
}
@keyframes mroSableEncender {
0% { transform: scaleX(0); opacity: 0; }
12% { opacity: 1; }
100% { transform: scaleX(1); opacity: 1; }
}
@keyframes mroSableLinea {
0% { opacity: 1; }
50% { opacity: .82; }
100% { opacity: .96; }
}