/* Pastillas de la barra: las entradas con «formato especial» y el acceso a Discord. Comparten forma y solo cambia el
   color (WP25). El menú estira sus elementos a los 100 px de la barra: la pastilla mantiene su altura y se centra. El
   formato especial no lo tenía y medía 78 px de alto, frente a los 35 de Discord. */
.formatoEspecial,
.moc-menu-discord {
    display: inline-flex !important;
    align-items: center;
    align-self: center;
    justify-content: center;
    gap: .4rem;
    min-width: 92px;
    height: 2.2rem;
    min-height: 0;
    padding: 0 12px !important;
    margin: 0 4px;
    border: 1px solid transparent;
    border-radius: var(--qg-public-radius-sm);
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none !important;
    transition: all 0.25s ease;
}

.formatoEspecial > .mpl-nav-link-name,
.moc-menu-discord > .mpl-nav-link-name {
    padding: 0 !important;
    color: inherit !important;
    background-image: none !important;
}

.formatoEspecial:hover,
.formatoEspecial:focus,
.moc-menu-discord:hover,
.moc-menu-discord:focus {
    text-decoration: none !important;
    transform: translateY(-1px);
}

.mpl-navbar-mobile .formatoEspecial,
.mpl-navbar-mobile .moc-menu-discord {
    width: fit-content;
    max-width: 100%;
    margin: 6px 0;
}

.formatoEspecial {
    color: var(--qg-public-color-ink-gold) !important;
    border-color: var(--qg-public-color-gold-border);
    background: var(--qg-public-gradient-gold) !important;
    box-shadow: var(--qg-public-shadow-gold);
    text-shadow: 0 1px 0 var(--qg-public-color-white-35);
}

.formatoEspecial:hover,
.formatoEspecial:focus {
    color: var(--qg-public-color-ink-gold) !important;
    background: var(--qg-public-gradient-gold-light) !important;
    box-shadow: var(--qg-public-shadow-gold-hover);
}

/* Acceso a la comunidad de Discord: el color y el símbolo de su marca, para que se reconozca de un vistazo. Se declara
   después del formato especial porque comparte esos enlaces y aquí manda la marca. */
.moc-menu-discord {
    color: var(--qg-public-color-white) !important;
    border-color: var(--qg-public-color-discord);
    background: var(--qg-public-color-discord) !important;
    box-shadow: none;
    text-shadow: none;
}

.moc-menu-discord:hover,
.moc-menu-discord:focus {
    color: var(--qg-public-color-white) !important;
    border-color: var(--qg-public-color-discord-hover);
    background: var(--qg-public-color-discord-hover) !important;
}

.moc-menu-discord__icono {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
}

/* Interacción de la barra (WP24): una sola señal, el dorado. La plantilla pintaba al pasar por encima una franja roja
   (#d31c3e) detrás de la parte baja del texto, que parecía un tachado, y la sección actual se marcaba además con el
   texto en dorado. Ahora la franja no se pinta; en su lugar hay un subrayado fino que crece al pasar por encima y que
   se queda completo en la sección que se está viendo (WP14), con el texto en blanco. Las pastillas no lo llevan.
   Los selectores repiten los de la plantilla para ganarle por orden, no por !important. */
.mpl-navbar .mpl-nav-link-name,
.mpl-navbar .mpl-nav-link:hover > .mpl-nav-link-name,
.mpl-navbar .mpl-nav-link:focus > .mpl-nav-link-name,
.mpl-navbar .active > .mpl-nav-link > .mpl-nav-link-name,
.mpl-navbar .mpl-dropdown:hover > .mpl-nav-link > .mpl-nav-link-name,
.mpl-navbar .mpl-dropdown.focus > .mpl-nav-link > .mpl-nav-link-name,
.mpl-navbar .mpl-dropdown.show > .mpl-nav-link > .mpl-nav-link-name {
    position: relative;
    background-image: none;
}

.mpl-navbar .mpl-nav-link > .mpl-nav-link-name::after {
    position: absolute;
    right: 3px;
    bottom: -.35rem;
    left: 3px;
    height: 2px;
    content: "";
    border-radius: var(--qg-public-radius-xs);
    background: var(--qg-public-gradient-gold);
    opacity: .7;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .25s ease, opacity .25s ease;
}

.mpl-navbar .mpl-nav-link:hover > .mpl-nav-link-name::after,
.mpl-navbar .mpl-nav-link:focus-visible > .mpl-nav-link-name::after,
.mpl-navbar .mpl-dropdown:hover > .mpl-nav-link > .mpl-nav-link-name::after,
.mpl-navbar .mpl-dropdown.focus > .mpl-nav-link > .mpl-nav-link-name::after,
.mpl-navbar .mpl-dropdown.show > .mpl-nav-link > .mpl-nav-link-name::after {
    transform: scaleX(1);
}

.mpl-navbar .moc-menu-activo > .mpl-nav-link-name {
    color: var(--qg-public-color-white);
}

.mpl-navbar .moc-menu-activo > .mpl-nav-link-name::after {
    opacity: 1;
    transform: scaleX(1);
}

/* Las pastillas no llevan subrayado, y dentro de los desplegables tampoco: allí el elemento se resalta sobre la
   superficie del panel. */
.mpl-navbar .formatoEspecial > .mpl-nav-link-name::after,
.mpl-navbar .moc-menu-discord > .mpl-nav-link-name::after,
.mpl-navbar .mpl-dropdown-menu .mpl-nav-link > .mpl-nav-link-name::after {
    display: none;
}

.mpl-navbar:not(.mpl-navbar-mobile) .mpl-dropdown-menu .mpl-nav-link:not(.formatoEspecial):not(.moc-menu-discord) {
    border-radius: var(--qg-public-radius-xs);
    transition: color .2s ease, background-color .2s ease;
}

.mpl-navbar:not(.mpl-navbar-mobile) .mpl-dropdown-menu .mpl-nav-link:not(.formatoEspecial):not(.moc-menu-discord):hover,
.mpl-navbar:not(.mpl-navbar-mobile) .mpl-dropdown-menu .mpl-nav-link:not(.formatoEspecial):not(.moc-menu-discord):focus-visible {
    color: var(--qg-public-text-strong);
    background-color: var(--qg-public-color-white-08);
}

/* Iconos de la barra y botón del menú móvil: también se teñían de rojo al pasar por encima. */
.mpl-navbar .mpl-nav-link:hover > .icon:not(.icon-fill),
.mpl-navbar .mpl-dropdown:hover > .mpl-nav-link > .icon:not(.icon-fill) {
    stroke: var(--qg-public-color-gold-light);
}

.mpl-navbar .mpl-nav-link:hover > .icon-fill,
.mpl-navbar .mpl-dropdown:hover > .mpl-nav-link > .icon-fill {
    fill: var(--qg-public-color-gold-light);
}

.mpl-navbar-mobile .mpl-navbar-toggle:hover > span {
    background-color: var(--qg-public-color-gold-light);
}

.mpl-navbar:not(.mpl-navbar-mobile) .mpl-dropdown-menu .formatoEspecial {
    display: flex !important;
    justify-content: flex-start;
    width: calc(100% + 6px);
    min-width: 0;
    margin: 4px 6px 4px -6px;
    padding: 5px 12px !important;
}

.mpl-navbar-nav li {
    opacity: 1 !important;
}

.mili {
    transform: unset !important;
}

.mpl-navbar .mpl-dropdown-menu {
    margin-top: unset !important;
    margin-left: unset !important;
}

/* Los desplegables de la barra superior caían sobre la banda de migas con un color casi igual y con la sombra del
   mismo tono, así que se quedaban pegados al fondo. Se levantan con superficie propia, borde y sombra oscura. */
.mpl-navbar:not(.mpl-navbar-mobile) .mpl-dropdown-menu {
    background-color: var(--qg-public-color-surface-dropdown);
    border: 1px solid var(--qg-public-color-white-12);
    box-shadow: var(--qg-public-shadow-dropdown);
}

/* Pico que engancha el panel de acceso con el icono de usuario. */
.mpl-navbar:not(.mpl-navbar-mobile) .mpl-dropdown-user .mpl-dropdown-menu::after {
    content: "";
    position: absolute;
    top: -.4rem;
    right: .95rem;
    width: .7rem;
    height: .7rem;
    background-color: var(--qg-public-color-surface-dropdown);
    border-top: 1px solid var(--qg-public-color-white-12);
    border-left: 1px solid var(--qg-public-color-white-12);
    transform: rotate(45deg);
}

.moc-page-header-content {
    opacity: 1;
    padding: 5rem !important;
}

.moc-footer-copyright {
    padding-top: 40px;
    background-color: var(--qg-public-color-nav);
}

.moc-footer-brand-link {
    padding-right: 50px !important;
}

.moc-footer {
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: var(--qg-public-color-nav) !important;
}

.moc-footer-row {
    margin-right: 0 !important;
}

.moc-footer-title,
.moc-footer-description {
    color: var(--qg-public-color-white) !important;
}

.moc-footer-legal {
    margin-top: 20px;
}

/* Redes sociales del pie (_RedesSocialesPolo, WP19). Cada red medía el 5 % del ancho, así que en un móvil de 375 px
   se quedaba en unos 17 px y el nombre se partía letra a letra. Ahora el icono tiene tamaño fijo, el nombre va debajo
   y las redes saltan de línea si no caben. */
.moc-footer-redes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem 2.5rem;
    margin: 0;
    padding: 2rem 1rem;
    list-style: none;
    background-color: var(--qg-public-color-nav);
}

.moc-footer-red {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    color: var(--qg-public-text-base);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s ease;
}

.moc-footer-red__icono {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
    filter: drop-shadow(0 .25rem .5rem var(--qg-public-color-black-50));
    transition: transform .2s ease;
}

/* Mismo lenguaje que la barra (WP24): el nombre se subraya en dorado al pasar por encima. */
.moc-footer-red:hover,
.moc-footer-red:focus-visible {
    color: var(--qg-public-text-strong);
    text-decoration: underline;
    text-decoration-color: var(--qg-public-color-gold-light);
    text-decoration-thickness: 2px;
    text-underline-offset: .3em;
}

.moc-footer-red:hover .moc-footer-red__icono,
.moc-footer-red:focus-visible .moc-footer-red__icono {
    transform: translateY(-2px);
}

.moc-footer-red:focus-visible {
    outline: 2px solid var(--qg-public-color-gold-light);
    outline-offset: .25rem;
    border-radius: var(--qg-public-radius-xs);
}

@media (max-width: 575.98px) {
    .moc-footer-redes {
        gap: 1rem 1.75rem;
    }

    .moc-footer-red {
        font-size: .85rem;
    }

    .moc-footer-red__icono {
        width: 2.125rem;
        height: 2.125rem;
    }
}

.moc-hero-slider .mpl-image {
    opacity: 1 !important;
}

.moc-hero-slider video.mpl-image {
    border: none !important;
}

.moc-hero-title-image {
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}

.moc-hero-title-image--animated {
    display: block;
    width: 50px;
    height: 50px;
    background: transparent !important;
    box-shadow: none !important;
    animation: moc-hero-move-up-down 2s ease-in-out infinite;
}

.moc-hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: var(--qg-public-gradient-overlay-bottom);
}

.moc-hero-content {
    position: absolute;
}

.moc-hero-video-container {
    position: absolute;
    overflow: hidden;
}

.moc-hero-scroll-trigger {
    position: relative;
    z-index: 1;
    display: inline-block !important;
    line-height: 0;
    text-decoration: none !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    appearance: none;
    -webkit-appearance: none;
    animation: moc-hero-move-up-down 2s ease-in-out infinite;
}

.moc-hero-scroll-trigger:hover,
.moc-hero-scroll-trigger:active {
    background: none !important;
    box-shadow: none !important;
}

.moc-hero-scroll-trigger:focus-visible {
    outline: 2px solid var(--qg-public-color-white);
    outline-offset: 5px;
}

.sinpadding {
    padding-top: unset !important;
}

.claridad {
    visibility: visible !important;
    color: var(--qg-public-color-white) !important;
}

@keyframes moc-hero-move-up-down {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}
.moc-game-screenshots-carousel {
    z-index: 9 !important;
}

.moc-trailer-hero {
    margin-top: 5%;
    opacity: 0.8;
}

.moc-trailer-hero-media,
.moc-trailer-video-container {
    width: 100%;
    height: 100%;
}

.moc-trailer-video-container {
    position: relative;
    overflow: hidden;
}

.moc-trailer-video {
    width: 100%;
    height: auto;
    object-fit: cover;
    overflow: hidden;
}

.moc-early-access {
    padding: 2rem 1rem;
    text-align: center;
}

.moc-early-access-platforms {
    align-items: center;
    margin-top: 2rem;
}

.moc-early-access-platform a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--qg-public-color-black);
    text-decoration: none;
    transition: transform 0.3s ease;
    will-change: transform;
}

.moc-early-access-platform img {
    width: 100px;
    height: 100px;
    animation: moc-early-access-bounce 1.2s ease infinite alternate;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.moc-early-access-platform-label {
    color: mintcream;
    font-size: 1.5rem;
    font-weight: 700;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.moc-early-access-platform a:hover img {
    filter: drop-shadow(0 5px 15px var(--qg-public-color-black-30));
    transform: scale(1.2) rotate(-5deg);
}

.moc-early-access-platform a:hover .moc-early-access-platform-label {
    opacity: 1;
    transform: translateY(-5px) scale(1.1);
}

.moc-early-access-crossplay {
    margin-top: 25px;
    font-size: 1.75rem;
}

@keyframes moc-early-access-bounce {
    0% {
        transform: translateY(0) scale(1);
    }

    100% {
        transform: translateY(-3px) scale(1.02);
    }
}

@media (max-width: 767px) {
    .moc-trailer-hero {
        height: 27vh;
        margin-top: 40%;
    }

    .moc-early-access-platform-label {
        display: none;
    }

    .moc-early-access-platform img {
        width: 80px;
        height: 80px;
    }
}
.moc-public-status-hero__wrap {
    min-height: 100vh;
}

.moc-public-status-hero__banner {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

.moc-public-status-hero__background {
    position: absolute;
    inset: 0;
}

.moc-public-status-hero__background::after {
    position: absolute;
    inset: 0;
    content: '';
    background: var(--qg-public-gradient-status);
}

.moc-public-status-hero__background img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.moc-public-status-hero__content {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(100% - 2rem, 42rem);
    min-height: 100vh;
    margin: 0 auto;
    place-items: center;
}

.moc-public-status-hero__card,
.moc-public-login__card {
    width: 100%;
    padding: clamp(1.5rem, 4vw, 3rem);
    color: var(--qg-public-color-white);
    text-align: center;
    border: 1px solid var(--qg-public-color-white-20);
    border-radius: 1.25rem;
    background: var(--qg-public-color-surface-deep);
    box-shadow: var(--qg-public-shadow-dark);
    backdrop-filter: blur(.45rem);
}

.moc-public-status-hero__card h1,
.moc-public-login__card h1 {
    margin: 0;
    color: var(--qg-public-color-white);
    font-size: clamp(1.8rem, 4vw, 3rem);
}

.moc-public-status-hero__card p,
.moc-public-login__card > p {
    margin: 1rem 0 0;
    color: var(--qg-public-color-white-86);
    font-size: 1.1rem;
    line-height: 1.6;
}

.moc-public-status-hero__action {
    margin-top: 1.75rem;
}

.moc-public-status-hero--error .moc-public-status-hero__card {
    border-color: var(--qg-public-color-danger-70);
}

.moc-public-status-hero--warning .moc-public-status-hero__card {
    border-color: var(--qg-public-color-warning-70);
}

.moc-public-status-hero--success .moc-public-status-hero__card {
    border-color: var(--qg-public-color-success-70);
}

.moc-public-login__form {
    display: grid;
    gap: 1rem;
    margin-top: 1.75rem;
    text-align: left;
}

.moc-public-login__field {
    display: grid;
    gap: .45rem;
}

.moc-public-login__field label {
    color: var(--qg-public-color-white);
    font-weight: 700;
}

.moc-public-login__field .form-control {
    min-height: 2.85rem;
    border-color: var(--qg-public-color-white-30);
    color: var(--qg-public-color-ink);
    background: var(--qg-public-color-white);
}

.moc-public-login__field .form-control:focus {
    border-color: var(--qg-public-color-cyan-soft);
    box-shadow: 0 0 0 .2rem var(--qg-public-color-cyan-24);
}

.moc-public-login__error {
    margin: 0;
    padding: .75rem .9rem;
    color: var(--qg-public-color-danger-soft);
    border: 1px solid var(--qg-public-color-danger-58);
    border-radius: .65rem;
    background: var(--qg-public-color-danger-deep-42);
    line-height: 1.4;
}

.moc-public-login__form [data-public-login-submit],
.moc-public-login__submit {
    justify-self: center;
    min-width: 11rem;
}

.moc-public-login__link {
    justify-self: center;
    color: var(--qg-public-color-white-86);
    font-size: .95rem;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.moc-public-login__link:hover,
.moc-public-login__link:focus-visible {
    color: var(--qg-public-color-white);
}

@media (max-width: 575px) {
    .moc-public-status-hero__content {
        width: min(100% - 1.5rem, 42rem);
    }

    .moc-public-status-hero__card,
    .moc-public-login__card {
        padding: 1.5rem 1.1rem;
    }
}

/* ---------- Primitivas públicas (WP16.3) ---------- */

/* Aire vertical de una sección de página. Cada bloque traía el suyo, heredado de la plantilla que le tocó: en
   Inicio convivían 0, 14, 50 y 100 px, y el ritmo de la página iba a saltos. */
.qg-seccion {
    padding-top: var(--qg-public-space-section);
    padding-bottom: var(--qg-public-space-section);
}

/* Caja con fondo del sistema. Sustituye a .backgraundDecore y .InfoSection, que pintan un velo de negro al 40 %
   con el :root antiguo de Quasar.css y llevan el relleno en porcentajes, que cambia con el ancho de la ventana. */
/* Campo de formulario de la web pública. Nace del buscador de Noticias, que era el unico con un aspecto propio;
   el resto de formularios usaba el campo de la plantilla, que no tiene fondo ni borde y se apoya en un <span>
   inclinado 4 grados detras, con dos sombras duras encima. Ahora todos usan este. */
.qg-campo,
.qg-content-search input[type="search"],
.qg-content-search-input {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    height: 2.875rem;
    margin: 0;
    padding: 0 1rem;
    border: .0625rem solid var(--qg-public-color-white-20);
    border-radius: .625rem;
    outline: 0;
    background: var(--qg-public-color-white-12);
    color: var(--qg-public-color-white);
    box-shadow: none;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

/* Un area de texto crece con su contenido, asi que no lleva la altura fija. El selector repite el elemento
   porque la plantilla la define con `textarea.form-control` y con una sola clase no se le gana. */
textarea.qg-campo {
    height: auto;
    min-height: 7rem;
    padding: .75rem 1rem;
    border: .0625rem solid var(--qg-public-color-white-20);
    border-radius: .625rem;
    background: var(--qg-public-color-white-12);
    color: var(--qg-public-color-white);
    line-height: 1.5;
}

textarea.qg-campo:hover,
textarea.qg-campo:focus {
    border-color: var(--qg-public-color-secondary-coral);
    background: var(--qg-public-color-white-20);
}

.qg-campo::placeholder,
.qg-content-search input[type="search"]::placeholder,
.qg-content-search-input::placeholder {
    color: var(--qg-public-color-white-78);
}

.qg-campo:hover,
.qg-campo:focus,
.qg-content-search input[type="search"]:hover,
.qg-content-search input[type="search"]:focus,
.qg-content-search-input:hover,
.qg-content-search-input:focus {
    scale: 1;
    border-color: var(--qg-public-color-secondary-coral);
    background: var(--qg-public-color-white-20);
    box-shadow: 0 0 0 .1875rem var(--qg-public-color-coral-13);
}

.qg-panel {
    padding: var(--qg-public-space-panel);
    border: .0625rem solid var(--qg-public-border-subtle);
    border-radius: var(--qg-public-radius-lg);
    background-color: var(--qg-public-surface-card);
    box-shadow: var(--qg-public-shadow-1);
}