/* =============================================================================
   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 <link rel="stylesheet" href="home-2026.css"> 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;
    transition: color var(--mro-t), background-color var(--mro-t);
}
.mro-nav a:hover { color: var(--mro-oro-claro); background: rgba(160, 120, 230, .12); }
@media (max-width: 1180px) { .mro-nav { display: none; } }

/* ---------- hero: jerarquia clara (Play > Register > Discord / Forum) ---------- */
.button-row a[href*="discord.gg"],
#forumButton {
    background: linear-gradient(180deg, rgba(34, 24, 58, .92), rgba(18, 12, 34, .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: #fff;
    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('ro-ui/menu-navigation-1.png'); }
@media (hover: hover) {
    #apkSection:hover > h2::before { background-image: url('ro-ui/menu-navigation-2.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; }
}