/* ==========================================================================
   Nómadas — web pública
   Base: el CSS del tema "nomadas" (propio, no de Azuriom) sin las partes
   de Bootstrap; al final, lo específico de la web nueva.
   ========================================================================== */

:root {
    --nm-accent: #e0a83c;
    --nm-accent-dark: #a8701f;
    --nm-accent-rgb: 224, 168, 60;
    --nm-green: #131c29;
    --nm-green-light: #34405a;
    --nm-bg: #10151b;
    --nm-bg-alt: #16263e;
    --nm-fg: #e1eafe;
    --nm-fg-rgb: 225, 234, 254;
    color-scheme: dark;
}

/* ==========================================================================
   Nomadas — theme for Azuriom
   Clean, minimal, Minecraft/Mojang-inspired styling.
   ========================================================================== */

:root {
    /* Lexend (Google Fonts) for every title/heading site-wide. The pixel
       minecraft.net faces are kept only for punctual, "in-game" moments —
       currently just the hero tagline ("Survival Vanilla 26.2") and its
       text-only title fallback — via the dedicated --nm-font-hero-*
       variables below, applied directly on those elements, not inherited
       through --nm-font-heading/--nm-font-display anymore. */
    --nm-font-body: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    --nm-font-display: "Lexend", "Noto Sans", "Helvetica Neue", "Arial", sans-serif;
    --nm-font-heading: "Lexend", "Noto Sans", "Helvetica Neue", "Arial", sans-serif;

    /* Self-hosted from Mojang's official web theme
       (github.com/Mojang/web-theme-bootstrap, MIT), see the @font-face
       block below — "punctual" hero use only, see note above. */
    --nm-font-hero-display: "Minecraft Ten", "Noto Sans", "Helvetica Neue", "Arial", sans-serif;
    --nm-font-hero-heading: "Minecraft Seven", "Noto Sans", "Helvetica Neue", "Arial", sans-serif;

    /* Legacy aliases kept for existing rules */
    --mc-vanilla-fontlist: var(--nm-font-display);
    --mc-default--fontlist: var(--nm-font-body);
    --mc-default-fontlist: var(--nm-font-body);

    /* Shared max content width for the home page: the hero panel and the
       feature row are both capped here so everything lines up on common
       desktop resolutions (1366 / 1920). */
    --nm-content-width: 1200px;
    --nm-home-gutter: clamp(16px, 4vw, 48px);
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   Minecraft.net webfonts — self-hosted, from Mojang's official web theme
   (github.com/Mojang/web-theme-bootstrap, MIT-licensed package).
   "Minecraft Seven" is the in-game font also known as "Mojangles".
   ------------------------------------------------------------------------- */
@font-face {
    font-family: "Minecraft Ten";
    src: url("../fonts/Minecraft-Tenv2.woff2") format("woff2"),
         url("../fonts/Minecraft-Tenv2.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Minecraft Seven";
    src: url("../fonts/Minecraft-Seven_v2.woff") format("woff"),
         url("../fonts/Minecraft-Seven_v2.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html {
    height: 100%;
}

body.nm-body {
    min-height: 100dvh;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--nm-bg);
    color: var(--nm-fg);
    font-family: var(--mc-default--fontlist);
    -webkit-font-smoothing: antialiased;
    transition: background-color .15s ease, color .15s ease;
}

/* Sticky footer: header/footer keep their natural size, main grows to
   fill any leftover space so the footer stays pinned to the viewport
   bottom on short pages, and flows below the fold on tall ones. */
body.nm-body > header,
body.nm-body > footer {
    flex: 0 0 auto;
    /* .nm-home (home page hero) isolates its own stacking context for its
       fixed background photo — that promotes it to a later paint step than
       plain in-flow siblings, which was rendering it over the footer.
       Giving the footer its own (positive) stacking context guarantees it
       always paints on top, regardless of that. */
    position: relative;
    z-index: 1;
}

body.nm-body > main#app {
    flex: 1 1 auto;
}

.nm-body a {
    text-decoration: none;
    color: inherit;
}

.nm-body img {
    max-width: 100%;
    height: auto;
}

/* Tier 1 — main titles: "Minecraft Ten" (caps-only display face). */
.nm-body h1 {
    font-family: var(--nm-font-display);
    font-weight: normal;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .01em;
    margin: 0;
}

.nm-body h2, .nm-body h3, .nm-body h4, .nm-body h5, .nm-body h6 {
    font-family: var(--nm-font-heading);
    font-weight: normal;
    line-height: 1.2;
    letter-spacing: .01em;
    margin: 0;
}

/* Main page title only (h1, not h2 — too many lines otherwise): centered,
   full-width gold gradient text (light gold top, darker gold bottom — the
   literal button colours, --nm-accent to --nm-accent-dark) with a full-width
   gold line underneath.
   Excludes .nm-hero-title, which keeps its own glow/shadow treatment
   (higher specificity would otherwise clash: ".nm-body h1" beats
   ".nm-hero-title" alone), and excludes any h1 inside .nm-prose — that's
   always raw user content (wiki articles, CMS pages, posts), never the real
   page title, and must not pick up this styling. */
.nm-body h1:not(.nm-hero-title):not(.nm-prose h1) {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    padding-bottom: 18px;
    font-weight: 700;
    background: linear-gradient(180deg, color-mix(in srgb, var(--nm-accent) 65%, white), var(--nm-accent-dark));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.nm-body h1:not(.nm-hero-title):not(.nm-prose h1)::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--nm-accent-dark) 20%, var(--nm-accent-dark) 80%, transparent);
}

/* -------------------------------------------------------------------------
   Simple dark box: solid dark-navy background, minimal blur, thin light
   border — no relief/bevel. Full width of whatever column/container holds
   it (Bootstrap's .card is 100% width by default).
   ------------------------------------------------------------------------- */

.nm-box,
.nm-page .card,
.nm-feature-card {
    background: color-mix(in srgb, var(--nm-green) 86%, transparent);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    border: 1px solid var(--nm-green-light);
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

/* -------------------------------------------------------------------------
   Navbar
   ------------------------------------------------------------------------- */

/* Floating navbar: the logo sits free, outside any box. Everything else
   (nav links + account controls) shares ONE full-width blurred glass box
   with no outline, links to the left of it and account controls pushed to
   the far right inside that same box. Not stuck to the top edge. */
.nm-navbar {
    flex: 0 0 auto;
    position: sticky;
    /* margin-top (not just the sticky "top" offset) so the gap from the
       viewport edge shows immediately on load, not only after scrolling
       past where the bar would otherwise sit flush at the top. */
    top: clamp(16px, 3vh, 28px);
    margin-top: clamp(16px, 3vh, 28px);
    z-index: 20;
    padding: 0 clamp(12px, 3vw, 32px);
    transition: filter .15s ease;
}

.nm-navbar.nm-navbar-scrolled {
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .35));
}

.nm-navbar-inner {
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 20px;
}

.nm-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

/* The single glass box: no border ("sin contorno"), just blur + shadow. */
.nm-navbar-box {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-width: 0;
    padding: 10px 20px;
    background: color-mix(in srgb, var(--nm-bg-alt) 45%, transparent);
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    border-radius: 20px;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 20%, transparent),
        0 8px 20px rgba(0, 0, 0, .3);
}

.nm-brand img {
    height: 58px;
    width: auto;
    object-fit: contain;
}

.nm-brand-text {
    font-family: var(--nm-font-display);
    font-weight: normal;
    font-size: 1.3rem;
    letter-spacing: .02em;
    color: var(--nm-fg);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .3);
}

.nm-links-wrap {
    display: contents;
}

/* Only meant for the mobile full-screen panel -- hidden by default so it
   doesn't turn into a stray flex item in the desktop bar (.nm-links-wrap
   is display:contents there, so this div would otherwise render inline
   among the nav links). */
.nm-mobile-panel-logo {
    display: none;
}

.nm-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 26px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nm-links > li {
    flex: 0 0 auto;
    display: flex;
}

/* Plain uppercase text links, no button box -- the current page gets a
   small upward caret ("^") under its label instead of a filled/bordered
   state. */
.nm-links .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    color: color-mix(in srgb, var(--nm-fg) 78%, transparent);
    font-family: var(--nm-font-heading);
    font-weight: normal;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 4px 2px;
    transition: color .12s ease;
}

.nm-links .nav-link i {
    font-size: 1.05em;
    line-height: 1;
}

.nm-links .nav-link:hover,
.nm-links .nav-link:focus-visible {
    color: var(--nm-fg);
}

.nm-links .nav-link.active {
    color: var(--nm-accent);
}

/* Mobile-only auth/account list (login, register, account, admin, logout):
   plain Bootstrap nav-links by default. Give them the same raised button
   look as .nm-links, but with a touch of accent tinted into the background
   so they read as a distinct "account actions" group without clashing. */
/* Plain row, no button/bevel look -- same typography as the main nav
   links, just a lighter background tint to read as the "account" group. */
.nm-auth .nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    color: color-mix(in srgb, var(--nm-fg) 85%, transparent);
    background: color-mix(in srgb, var(--nm-bg-alt) 55%, white 10%);
    font-family: var(--nm-font-heading);
    font-weight: normal;
    font-size: .92rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 14px 18px;
    transition: color .12s ease, background-color .12s ease;
}

.nm-auth .nav-link:hover,
.nm-auth .nav-link:focus-visible {
    color: var(--nm-fg);
    background: color-mix(in srgb, var(--nm-bg-alt) 70%, white 14%);
}

.nm-auth {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid color-mix(in srgb, var(--nm-fg) 10%, transparent);
}

.nm-account {
    align-items: center;
    gap: 10px;
}

.nm-toggler {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--nm-fg) 15%, transparent);
    color: var(--nm-fg);
    border-radius: 10px;
    font-size: 1.2rem;
    padding: 4px 10px;
    line-height: 1;
}

/* Uniform account buttons: theme toggle / notifications / user, same height & style */
.nm-navbtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--nm-fg) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--nm-fg) 10%, transparent);
    color: color-mix(in srgb, var(--nm-fg) 90%, transparent);
    font-weight: 600;
    font-size: .85rem;
    line-height: 1;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.nm-navbtn:hover {
    background: color-mix(in srgb, var(--nm-fg) 12%, transparent);
    border-color: var(--nm-accent);
    color: var(--nm-fg);
}

.nm-navbtn.dropdown-toggle::after {
    display: none;
}

.nm-navbtn-icon {
    width: 42px;
    padding: 0;
    font-size: 1.05rem;
}

.nm-navbtn-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: .62rem;
    padding: 3px 5px;
    line-height: 1;
}

.nm-navbtn-user {
    padding: 0 14px 0 6px;
    max-width: 190px;
}

.nm-navbtn-avatar {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    object-fit: cover;
    image-rendering: pixelated;
    flex: 0 0 auto;
}

.nm-navbtn-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-menu {
    --bs-dropdown-color: color-mix(in srgb, var(--nm-fg) 85%, transparent);
    --bs-dropdown-link-color: color-mix(in srgb, var(--nm-fg) 85%, transparent);
    --bs-dropdown-link-hover-color: var(--nm-fg);
    --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--nm-fg) 8%, transparent);
    --bs-dropdown-link-active-color: var(--nm-fg);
    --bs-dropdown-link-active-bg: color-mix(in srgb, var(--nm-fg) 10%, transparent);
    --bs-dropdown-header-color: color-mix(in srgb, var(--nm-fg) 55%, transparent);
    --bs-dropdown-divider-bg: color-mix(in srgb, var(--nm-fg) 8%, transparent);
    --bs-dropdown-bg: var(--nm-bg-alt);
    background: var(--nm-bg-alt);
    border: 1px solid color-mix(in srgb, var(--nm-fg) 8%, transparent);
    border-radius: 14px;
    overflow: hidden;
}

.dropdown-header {
    color: color-mix(in srgb, var(--nm-fg) 55%, transparent);
}

.dropdown-item {
    color: color-mix(in srgb, var(--nm-fg) 85%, transparent);
    display: flex;
    align-items: center;
    gap: 10px;
}

.dropdown-item i {
    width: 1.1em;
    text-align: center;
    color: var(--nm-accent);
}

.dropdown-item:hover, .dropdown-item:focus {
    background: color-mix(in srgb, var(--nm-fg) 6%, transparent);
    color: var(--nm-fg);
}

/* Notifications + account dropdowns: square box, clearly separated below
   the floating navbar instead of hugging it. */
.nm-account .dropdown-menu {
    border-radius: 0;
    margin-top: 14px !important;
    --bs-dropdown-bg: color-mix(in srgb, var(--nm-green) 86%, transparent);
    background: color-mix(in srgb, var(--nm-green) 86%, transparent);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    border-color: var(--nm-green-light);
}

@media (max-width: 991.98px) {
    /* Logo centred in the bar, hamburger pinned to the right without
       stretching a box across the width. */
    .nm-navbar-inner {
        position: relative;
        justify-content: flex-end;
    }

    .nm-brand {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .nm-navbar-box {
        flex: 0 0 auto;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        padding: 0;
    }

    /* The menu becomes a full-screen panel dropping from the top edge of
       the screen, not an inline accordion in the bar. */
    .nm-links-wrap {
        display: none;
    }

    .nm-links-wrap.show,
    .nm-links-wrap.collapsing {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 999;
        overflow-y: auto;
        background: color-mix(in srgb, var(--nm-bg) 97%, transparent);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        padding: 28px 20px 40px;
    }

    .nm-mobile-panel-logo {
        display: flex;
        justify-content: center;
        padding-bottom: 24px;
    }

    .nm-mobile-panel-logo img {
        height: 56px;
        width: auto;
    }

    .nm-links,
    .nm-auth {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        max-width: none;
        gap: 0;
        padding-top: 0;
    }

    .nm-links > li,
    .nm-auth > li {
        width: 100%;
        flex: 0 0 auto;
    }

    /* Plain listed rows, no button look -- darker tint marks this as the
       "navbar" group, as opposed to the lighter "account" group below.
       Forced to full width: a flex/inline element doesn't reliably fill
       its <li> on its own. */
    .nm-links .nav-link,
    .nm-auth .nav-link {
        width: 100%;
        box-sizing: border-box;
        justify-content: flex-start;
        text-align: left;
        white-space: normal;
        min-width: 0;
    }

    .nm-links .nav-link {
        padding: 14px 18px;
        background: color-mix(in srgb, var(--nm-bg) 55%, black 12%);
    }

    .nm-account {
        display: none !important;
    }
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */

.nm-footer {
    flex: 0 0 auto;
    border-top: 1px solid color-mix(in srgb, var(--nm-fg) 8%, transparent);
}

.nm-footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    font-size: .8rem;
    color: color-mix(in srgb, var(--nm-fg) 55%, transparent);
}

.nm-footer-copy {
    margin: 0;
}

.nm-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nm-footer-links a:hover {
    color: var(--nm-fg);
}

@media (max-width: 767.98px) {
    .nm-footer-inner {
        flex-direction: column-reverse;
        justify-content: center;
        text-align: center;
        padding: 18px 24px;
        gap: 10px 24px;
    }

    .nm-footer-links {
        justify-content: center;
    }
}

/* -------------------------------------------------------------------------
   Generic inner pages (posts, shop, profile, login, register...)
   ------------------------------------------------------------------------- */

.nm-page {
    color: color-mix(in srgb, var(--nm-fg) 92%, transparent);
    padding-left: clamp(16px, 4vw, 56px);
    padding-right: clamp(16px, 4vw, 56px);
}

/* Page title: big, centered, with breathing room before the content box.
   Matches every generic page (title is a direct child of .nm-page) and the
   auth pages (login/register/2fa/password reset, whose title sits inside a
   centered row/col wrapper). */
.nm-page > h1,
.nm-page > .row.justify-content-center > [class*="col"] > h1:first-child {
    text-align: center;
    font-size: clamp(28px, 4vw, 42px);
    letter-spacing: -.01em;
    margin: 0 0 clamp(28px, 5vh, 48px);
}

.nm-page .card {
    --bs-card-bg: transparent;
    --bs-card-cap-bg: transparent;
    --bs-card-color: var(--nm-fg);
    --bs-card-border-radius: 0;
    color: var(--nm-fg);
}

.nm-page .card-header,
.nm-page .card-footer {
    border-color: color-mix(in srgb, var(--nm-green-light) 30%, transparent);
}

.nm-page label,
.nm-page .form-label,
.nm-page .form-check-label {
    color: color-mix(in srgb, var(--nm-fg) 92%, transparent);
}

.nm-page .form-control,
.nm-page .form-select {
    background-color: var(--nm-bg);
    color: var(--nm-fg);
    border: 2px solid color-mix(in srgb, var(--nm-fg) 15%, transparent);
    border-radius: 4px;
}

.nm-page .form-control::placeholder {
    color: color-mix(in srgb, var(--nm-fg) 40%, transparent);
}

.nm-page .form-control:focus,
.nm-page .form-select:focus {
    background-color: var(--nm-bg);
    color: var(--nm-fg);
    border-color: var(--nm-accent);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--nm-accent) 30%, transparent);
}

.nm-page .form-check-input {
    background-color: var(--nm-bg);
    border-color: color-mix(in srgb, var(--nm-fg) 30%, transparent);
}

/* -------------------------------------------------------------------------
   Long-form content (CMS pages like /normas, /legal, and post bodies)
   Rendered inside a raised .nm-box; this styles the rich text within it.
   ------------------------------------------------------------------------- */

.nm-prose {
    padding: clamp(20px, 4vw, 42px);
    color: color-mix(in srgb, var(--nm-fg) 90%, transparent);
    line-height: 1.7;
    overflow-wrap: break-word;
}

.nm-prose > :first-child {
    margin-top: 0;
}

.nm-prose > :last-child {
    margin-bottom: 0;
}

.nm-prose h1,
.nm-prose h2,
.nm-prose h3,
.nm-prose h4,
.nm-prose h5 {
    font-family: var(--nm-font-heading);
    color: var(--nm-fg);
    line-height: 1.25;
    margin: 1.9em 0 .6em;
}

.nm-prose h2 {
    font-size: 1.5rem;
}

.nm-prose h3 {
    font-size: 1.2rem;
    padding-bottom: .35em;
    border-bottom: 2px solid color-mix(in srgb, var(--nm-accent) 45%, transparent);
}

.nm-prose h4 {
    font-size: 1rem;
    color: var(--nm-accent);
    text-transform: uppercase;
    letter-spacing: .03em;
    text-shadow: none;
}

.nm-prose p {
    margin: 0 0 1em;
}

.nm-prose a {
    color: var(--nm-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.nm-prose a:hover {
    color: var(--nm-accent-dark);
}

.nm-prose ul,
.nm-prose ol {
    margin: 0 0 1em;
    padding-left: 1.4em;
}

.nm-prose li {
    margin-bottom: .4em;
}

.nm-prose hr {
    border: 0;
    height: 3px;
    margin: 2em 0;
    opacity: .7;
    background: repeating-linear-gradient(
        90deg,
        color-mix(in srgb, var(--nm-fg) 22%, transparent) 0 8px,
        transparent 8px 16px
    );
}

.nm-prose blockquote {
    margin: 0 0 1em;
    padding: .6em 1em;
    border-left: 4px solid var(--nm-accent);
    background: color-mix(in srgb, var(--nm-fg) 5%, transparent);
    color: color-mix(in srgb, var(--nm-fg) 75%, transparent);
}

.nm-prose img {
    border-radius: 4px;
}

.nm-prose code {
    background: color-mix(in srgb, var(--nm-fg) 10%, transparent);
    padding: .1em .35em;
    border-radius: 3px;
    font-size: .9em;
}

.nm-prose pre {
    background: var(--nm-bg);
    border: 1px solid color-mix(in srgb, var(--nm-fg) 15%, transparent);
    border-radius: 4px;
    padding: 1em;
    overflow-x: auto;
}

.nm-prose pre code {
    background: none;
    padding: 0;
}

.nm-prose table {
    width: 100%;
    margin: 0 0 1em;
    border-collapse: collapse;
}

.nm-prose th,
.nm-prose td {
    padding: .5em .75em;
    border: 1px solid color-mix(in srgb, var(--nm-fg) 15%, transparent);
    text-align: left;
}

.nm-prose th {
    background: color-mix(in srgb, var(--nm-fg) 8%, transparent);
    color: var(--nm-fg);
}


/* -------------------------------------------------------------------------
   Home — single-screen hero
   One viewport tall, no page scroll: a two-column layout (glass hero panel
   + 2x2 feature grid) centred in the space between navbar and footer. The
   lock is released below the lg breakpoint, where it stacks and scrolls.
   ------------------------------------------------------------------------- */

/* Turn the body into a fixed-height flex column (navbar / main / footer);
   main is the only flexible track and never overflows. */
body.nm-home-page {
    height: 100dvh;
    overflow: hidden;
}

body.nm-home-page > main#app {
    min-height: 0;
}

.nm-home {
    position: relative;
    isolation: isolate;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 3vh, 36px) var(--nm-home-gutter);
    background-color: var(--nm-bg);
    overflow: hidden;
}

/* Full-screen background photo + shade. Both layers are position:fixed so
   the image covers the whole viewport (behind navbar and footer too) and
   never seams. The shade keeps the panel and headings legible on top, in
   both the light and dark palettes. */
.nm-home::before,
.nm-home::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.nm-home::before {
    z-index: -2;
    background-image: var(--nm-hero-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(.82) saturate(1.04);
}

.nm-home::after {
    z-index: -1;
    background:
        radial-gradient(ellipse 80% 62% at 50% 48%,
            color-mix(in srgb, var(--nm-bg) 85%, transparent),
            color-mix(in srgb, var(--nm-bg) 55%, transparent) 55%,
            color-mix(in srgb, var(--nm-bg) 20%, transparent) 100%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--nm-bg) 90%, transparent),
            color-mix(in srgb, var(--nm-bg) 48%, transparent) 40%,
            color-mix(in srgb, var(--nm-bg) 97%, transparent));
}

/* Two-column grid: hero panel + feature grid, capped and centred so the
   side gutters never grow into big empty margins. */
.nm-home-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1240px;
    max-height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: clamp(14px, 2.4vw, 32px);
    align-items: stretch;
}

/* No features configured → the panel takes the whole (narrower) row. */
.nm-home-inner:not(:has(.nm-features)) {
    grid-template-columns: minmax(0, 720px);
    justify-content: center;
}

/* Large screens: give the hero more room and scale the logo/text up with
   it instead of staying pinned to the same small cap. */
@media (min-width: 1600px) {
    .nm-home-inner {
        max-width: 1520px;
    }

    .nm-home-inner:not(:has(.nm-features)) {
        grid-template-columns: minmax(0, 960px);
    }

    .nm-hero-logo {
        max-height: clamp(150px, 22vh, 320px);
    }

    .nm-hero-title {
        font-size: clamp(68px, 5.4vw, 112px);
    }

    .nm-hero-tagline {
        font-size: clamp(20px, 1.6vw, 30px);
    }

    .nm-hero-subtitle {
        font-size: clamp(16.5px, 1rem, 21px);
        -webkit-line-clamp: 6;
    }
}

/* -------------------------------------------------------------------------
   Hero panel
   Translucent, blurred glass surface (the background photo shows through)
   with a soft light/dark bevel. Its contents are vertically centred so the
   panel never leaves a big empty band above or below the text.
   ------------------------------------------------------------------------- */

/* No more glass panel/box here — title, text and heads sit directly on the
   hero photo. */
.nm-hero-panel {
    position: relative;
    display: flex;
    min-height: 0;
}

.nm-hero-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(9px, 1.7vh, 18px);
    width: 100%;
    padding: clamp(18px, 3.4vh, 40px) clamp(20px, 3vw, 46px);
    text-align: center;
    overflow: hidden;
}

.nm-hero-logo {
    align-self: center;
    max-height: clamp(90px, 18vh, 220px);
    width: auto;
    object-fit: contain;
    filter:
        drop-shadow(0 6px 18px rgba(0, 0, 0, .5))
        drop-shadow(0 0 20px color-mix(in srgb, var(--nm-accent) 50%, transparent))
        drop-shadow(0 0 42px color-mix(in srgb, var(--nm-accent) 28%, transparent));
}

.nm-hero-title {
    width: 100%;
    font-family: var(--nm-font-hero-display);
    text-transform: uppercase;
    font-size: clamp(42px, 6.5vw, 76px);
    line-height: 1.05;
    letter-spacing: -.01em;
    background: linear-gradient(180deg, color-mix(in srgb, var(--nm-accent) 35%, var(--nm-fg)), var(--nm-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 3px 3px 0 rgba(0, 0, 0, .35);
    filter: drop-shadow(0 0 16px color-mix(in srgb, var(--nm-accent) 35%, transparent));
}

/* Short, punchy line under the logo — the "epic but humble" headline. */
.nm-hero-tagline {
    width: 100%;
    margin: 0;
    font-family: var(--nm-font-hero-display);
    font-weight: normal;
    text-transform: uppercase;
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.15;
    letter-spacing: .01em;
    color: var(--nm-fg);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .45);
}

.nm-hero-subtitle {
    width: 100%;
    margin: 0;
    text-align: justify;
    text-align-last: center;
    color: color-mix(in srgb, var(--nm-fg) 82%, transparent);
    font-family: var(--nm-font-body);
    font-size: clamp(13.5px, .85rem + .2vh, 16.5px);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

/* Online status — a lighter glass strip that matches the panel material. */
.nm-hero-online {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin-top: 2px;
    padding: 10px 18px;
    background: color-mix(in srgb, var(--nm-bg) 30%, transparent);
    border: 1px solid color-mix(in srgb, white 14%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 18%, transparent),
        0 6px 20px rgba(0, 0, 0, .3);
}

.nm-online-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--nm-font-heading);
    font-size: .95rem;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: color-mix(in srgb, var(--nm-fg) 92%, transparent);
    white-space: nowrap;
}

.nm-online-sep {
    color: color-mix(in srgb, var(--nm-fg) 30%, transparent);
    font-weight: 700;
}

.nm-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nm-accent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--nm-accent) 60%, transparent);
    animation: nm-pulse 2s infinite;
}

@keyframes nm-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nm-accent) 55%, transparent); }
    70% { box-shadow: 0 0 0 8px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.nm-players {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.nm-player-head {
    width: clamp(26px, 3.4vh, 36px);
    height: clamp(26px, 3.4vh, 36px);
    border-radius: 4px;
    border: 2px solid color-mix(in srgb, var(--nm-fg) 12%, transparent);
    image-rendering: pixelated;
    transition: transform .12s ease, border-color .12s ease;
}

.nm-player-head:hover {
    transform: translateY(-3px);
    border-color: var(--nm-accent);
}

.nm-player-head-link {
    display: inline-flex;
    line-height: 0;
    cursor: pointer;
}

.nm-hero-actions {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 12px;
    margin-top: 2px;
}

/* Buttons share the panel's glass/relief language and split its width. */
.nm-hero-box .nm-hero-actions .nm-btn {
    flex: 1 1 0;
    min-width: 150px;
    justify-content: center;
    border: 1px solid color-mix(in srgb, white 25%, transparent);
    border-radius: 6px;
    padding: 13px 20px;
    font-family: var(--nm-font-heading);
    font-weight: normal;
    font-size: .92rem;
    letter-spacing: .02em;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 30%, transparent),
        inset 0 -2px 0 rgba(0, 0, 0, .25),
        0 8px 18px rgba(0, 0, 0, .35);
}

.nm-hero-box .nm-hero-actions .nm-btn:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 22%, transparent),
        inset 0 -1px 0 rgba(0, 0, 0, .25),
        0 4px 10px rgba(0, 0, 0, .3);
}

/* Social row, pinned under a hairline divider at the foot of the panel. */
.nm-hero-social {
    margin-top: 4px;
    padding-top: clamp(9px, 1.5vh, 16px);
    border-top: 1px solid color-mix(in srgb, white 12%, transparent);
}

.nm-social-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nm-social-links a {
    display: inline-flex;
    color: color-mix(in srgb, var(--nm-fg) 70%, transparent);
    font-size: 1.05rem;
    transition: color .15s ease;
}

.nm-social-links a:hover {
    color: var(--nm-accent);
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */

.nm-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border-style: solid;
    border-width: 2px 4px 4px 2px;
    border-radius: 6px;
    padding: 13px 26px;
    font-family: var(--nm-font-heading);
    font-weight: normal;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    cursor: pointer;
    transition: transform .1s ease, border-color .1s ease, background-color .15s ease;
}

.nm-btn-primary {
    color: #16130a;
    background: var(--nm-accent);
    border-top-color: color-mix(in srgb, var(--nm-accent) 55%, white);
    border-left-color: color-mix(in srgb, var(--nm-accent) 55%, white);
    border-right-color: color-mix(in srgb, var(--nm-accent) 55%, black);
    border-bottom-color: color-mix(in srgb, var(--nm-accent) 55%, black);
}

.nm-btn-primary:hover {
    background: color-mix(in srgb, var(--nm-accent) 90%, white);
}

.nm-btn-primary:active {
    transform: translateY(2px);
    border-width: 1px 2px 2px 1px;
}

.nm-btn-primary.nm-btn-copied {
    color: #0c1f08;
    background: color-mix(in srgb, var(--nm-accent) 55%, #6ee06e);
    border-top-color: color-mix(in srgb, var(--nm-accent) 30%, #a8f0a8);
    border-left-color: color-mix(in srgb, var(--nm-accent) 30%, #a8f0a8);
    border-right-color: color-mix(in srgb, var(--nm-accent) 30%, #1f7a1f);
    border-bottom-color: color-mix(in srgb, var(--nm-accent) 30%, #1f7a1f);
}

.nm-btn-sm {
    padding: 8px 18px;
    font-size: .78rem;
    border-width: 2px 3px 3px 2px;
}

.nm-btn-sm:active {
    transform: translateY(2px);
    border-width: 1px 2px 2px 1px;
}

.nm-btn-secondary {
    color: #fff;
    background: #4752c4;
    border-top-color: #6470e0;
    border-left-color: #6470e0;
    border-right-color: #363d99;
    border-bottom-color: #363d99;
}

.nm-btn-secondary:hover {
    background: #5865f2;
}

.nm-btn-secondary:active {
    transform: translateY(2px);
    border-width: 1px 2px 2px 1px;
}

.nm-btn-outline {
    color: var(--nm-fg);
    background: color-mix(in srgb, var(--nm-fg) 6%, transparent);
    border-color: color-mix(in srgb, var(--nm-fg) 22%, transparent);
}

.nm-btn-outline:hover {
    background: color-mix(in srgb, var(--nm-fg) 12%, transparent);
    border-color: var(--nm-accent);
}

.nm-btn-outline:active {
    transform: translateY(2px);
    border-width: 1px 2px 2px 1px;
}

/* Login/Registro in the navbar: same corner radius as the site's plain
   buttons (profile page etc.), flat (not beveled) border, two-tone -- a
   solid fill with a thicker, lighter-shade ring around it. Registro uses
   the gold accent, Login uses the second palette colour (dark green).
   Scoped to .nm-account so the hero's own CTAs (Entrar/Discord) keep their
   existing blocky Minecraft-button look. */
.nm-account .nm-btn {
    border-width: 2px;
    border-radius: 6px;
}

.nm-account .nm-btn:active {
    border-width: 2px;
}

.nm-account .nm-btn-primary {
    border-top-color: color-mix(in srgb, var(--nm-accent) 45%, white);
    border-left-color: color-mix(in srgb, var(--nm-accent) 45%, white);
    border-right-color: color-mix(in srgb, var(--nm-accent) 45%, white);
    border-bottom-color: color-mix(in srgb, var(--nm-accent) 45%, white);
}

.nm-account .nm-btn-outline {
    color: var(--nm-fg);
    background: linear-gradient(90deg, var(--nm-green), color-mix(in srgb, var(--nm-green) 70%, var(--nm-green-light)));
    border-color: var(--nm-green-light);
}

.nm-account .nm-btn-outline:hover {
    background: linear-gradient(90deg, color-mix(in srgb, var(--nm-green) 80%, white), color-mix(in srgb, var(--nm-green-light) 80%, white));
    border-color: var(--nm-green-light);
}


/* -------------------------------------------------------------------------
   Home — responsive
   ------------------------------------------------------------------------- */

/* Shorter desktop viewports: trim the parts that cost the most height so
   the single-screen lock still holds without clipping. */
@media (min-width: 992px) and (max-height: 760px) {
    .nm-hero-logo { max-height: clamp(64px, 12vh, 140px); }
    .nm-hero-subtitle { -webkit-line-clamp: 3; }
    .nm-feature-card p { -webkit-line-clamp: 3; }
    .nm-hero-box { gap: clamp(7px, 1.2vh, 12px); padding: clamp(14px, 2.6vh, 24px) clamp(18px, 3vw, 40px); }
}

@media (min-width: 992px) and (max-height: 620px) {
    .nm-hero-subtitle { display: none; }
    .nm-feature-icon { display: none; }
}

/* Below lg: release the lock, stack the two columns, scroll normally. */
@media (max-width: 991.98px) {
    body.nm-home-page {
        height: auto;
        overflow: visible;
    }

    .nm-home {
        height: auto;
        display: block;
        padding-block: clamp(24px, 6vh, 48px);
        overflow: visible;
    }

    .nm-home-inner {
        grid-template-columns: minmax(0, 640px);
        justify-content: center;
        max-height: none;
    }

    .nm-hero-subtitle,
    .nm-feature-card p {
        -webkit-line-clamp: none;
        display: block;
        overflow: visible;
    }

    .nm-hero-box {
        padding: clamp(22px, 4vh, 38px) clamp(22px, 6vw, 44px);
    }
}

@media (max-width: 575.98px) {
    .nm-hero-actions { flex-direction: column; width: 100%; }
    .nm-hero-box .nm-hero-actions .nm-btn,
    .nm-btn { justify-content: center; width: 100%; }
    .nm-hero-online { flex-direction: column; align-items: flex-start; gap: 8px; }
    .nm-online-sep { display: none; }
}

@media (max-width: 420px) {
    .nm-features { grid-template-columns: 1fr; }
}


/* ==========================================================================
   Site-wide theme extension (2026-09-05)
   Background photo on every page, bevelled buttons for all colours, themed
   tables, wiki category images, vote ranking.
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Full-page background photo on every non-home page
   Two position:fixed layers (photo + tinted shade) behind the content, the
   same technique as the home hero (.nm-home::before/::after), gated on the
   body.nm-has-bg class that base.blade.php adds when a background image is
   configured.
   ------------------------------------------------------------------------- */

body.nm-has-bg:not(.nm-home-page) {
    isolation: isolate;
}

body.nm-has-bg:not(.nm-home-page)::before,
body.nm-has-bg:not(.nm-home-page)::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body.nm-has-bg:not(.nm-home-page)::before {
    z-index: -2;
    background-image: var(--nm-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    filter: brightness(.5) saturate(1.03);
}

body.nm-has-bg:not(.nm-home-page)::after {
    z-index: -1;
    background:
        radial-gradient(ellipse 90% 70% at 50% 38%,
            color-mix(in srgb, var(--nm-bg) 82%, transparent),
            color-mix(in srgb, var(--nm-bg) 68%, transparent) 60%,
            color-mix(in srgb, var(--nm-bg) 90%, transparent) 100%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--nm-bg) 92%, transparent),
            color-mix(in srgb, var(--nm-bg) 68%, transparent) 35%,
            color-mix(in srgb, var(--nm-bg) 97%, transparent));
}

body.nm-has-bg:not(.nm-home-page) > main#app {
    position: relative;
    z-index: 0;
}


/* -------------------------------------------------------------------------
   4. Wiki — category images + inner-page list groups
   ------------------------------------------------------------------------- */

.nm-wiki-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    margin: 8px auto 0;
    max-width: 960px;
}

@media (max-width: 860px) {
    .nm-wiki-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 540px;
    }
}

@media (max-width: 460px) {
    .nm-wiki-grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 320px;
    }
}

.nm-wiki-cat {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 26px 18px;
}

.nm-wiki-cat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 128px;
    background: color-mix(in srgb, var(--nm-bg) 80%, black 12%);
    border-style: solid;
    border-width: 3px 2px 2px 3px;
    border-top-color: color-mix(in srgb, var(--nm-bg-alt) 40%, black);
    border-left-color: color-mix(in srgb, var(--nm-bg-alt) 40%, black);
    border-right-color: color-mix(in srgb, var(--nm-bg-alt) 65%, white);
    border-bottom-color: color-mix(in srgb, var(--nm-bg-alt) 65%, white);
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3);
    transition: border-color .12s ease;
}

.nm-wiki-cat-icon i {
    font-size: 3.6rem;
    line-height: 1;
    color: var(--nm-accent);
}

.nm-wiki-cat-img {
    width: 104px;
    height: 104px;
    object-fit: contain;
    image-rendering: pixelated;
}

.nm-wiki-cat h2 {
    font-size: 1.2rem;
    color: var(--nm-fg);
}

.nm-wiki-cat:hover .nm-wiki-cat-icon {
    border-color: var(--nm-accent);
}

.nm-page .list-group {
    --bs-list-group-bg: color-mix(in srgb, var(--nm-bg-alt) 85%, transparent);
    --bs-list-group-color: color-mix(in srgb, var(--nm-fg) 88%, transparent);
    --bs-list-group-border-color: color-mix(in srgb, var(--nm-fg) 14%, transparent);
    --bs-list-group-action-hover-bg: color-mix(in srgb, var(--nm-accent) 12%, transparent);
    --bs-list-group-action-hover-color: var(--nm-fg);
    --bs-list-group-action-color: color-mix(in srgb, var(--nm-fg) 88%, transparent);
    --bs-list-group-active-bg: var(--nm-accent);
    --bs-list-group-active-border-color: var(--nm-accent);
    --bs-list-group-active-color: #16130a;
    border-radius: 4px;
    overflow: hidden;
}

.nm-page .list-group-item i {
    color: var(--nm-accent);
    margin-right: 4px;
}

.nm-page .list-group-item.active,
.nm-page .list-group-item.active i {
    color: #16130a;
    font-weight: 700;
}

.nm-wiki-sub-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    image-rendering: pixelated;
    vertical-align: -5px;
    margin-right: 4px;
}


/* ==========================================================================
   Web nueva: piezas que antes resolvía Bootstrap + secciones propias
   ========================================================================== */

html, body { margin: 0; }
body.nm-body { font-size: 16px; line-height: 1.5; }
button { font: inherit; }
.nm-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Menú: desplegables y panel móvil (sin Bootstrap) ------------------ */

.nm-dropdown { position: relative; }

.nm-dropdown > .nav-link { background: none; border: 0; cursor: pointer; }
.nm-dropdown > .nav-link .bi-chevron-down { font-size: .7em; transition: transform .15s ease; }
.nm-dropdown.is-open > .nav-link .bi-chevron-down { transform: rotate(180deg); }

.nm-dropdown .dropdown-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    z-index: 30;
    display: none;
    min-width: 200px;
    padding: 6px;
    margin: 0;
    list-style: none;
    transform: translateX(-50%);
    border-radius: 0;
    background: color-mix(in srgb, var(--nm-green) 92%, transparent);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    border-color: var(--nm-green-light);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
}

.nm-dropdown.is-open .dropdown-menu { display: block; }

.nm-dropdown .dropdown-item {
    padding: 10px 14px;
    font-family: var(--nm-font-heading);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.nm-dropdown .dropdown-item.active { color: var(--nm-accent); }

.nm-account { display: flex; }
.nm-toggler { display: none; cursor: pointer; }

@media (max-width: 991.98px) {
    .nm-toggler { display: inline-flex; }

    .nm-links-wrap.show { display: block; }

    .nm-links-close {
        position: absolute;
        top: 20px;
        right: 20px;
        background: none;
        border: 0;
        color: var(--nm-fg);
        font-size: 1.6rem;
        cursor: pointer;
    }

    .nm-dropdown .dropdown-menu {
        position: static;
        transform: none;
        min-width: 0;
        padding: 0 0 0 18px;
        background: none;
        border: 0;
        box-shadow: none;
        backdrop-filter: none;
    }

    .nm-dropdown .dropdown-item { padding: 12px 18px; }
    .nm-links > li.nm-dropdown { flex-direction: column; }
}

@media (min-width: 992px) {
    .nm-links-close { display: none; }
}

/* --- Botones de portada configurables (estilos 1-4 del panel) ----------- */

.nm-btn-style {
    color: var(--btn-fg);
    background: var(--btn-bg);
    border-top-color: color-mix(in srgb, var(--btn-bg) 55%, white);
    border-left-color: color-mix(in srgb, var(--btn-bg) 55%, white);
    border-right-color: color-mix(in srgb, var(--btn-bg) 55%, black);
    border-bottom-color: color-mix(in srgb, var(--btn-bg) 55%, black);
}

.nm-btn-style:hover { background: color-mix(in srgb, var(--btn-bg) 88%, white); color: var(--btn-fg); }
.nm-btn-style:active { transform: translateY(2px); }
.nm-btn-style.nm-btn-copied { background: #1c9a52; color: #fff; }

/* Sin columna de características: el panel ocupa el centro. */
.nm-home-inner { grid-template-columns: minmax(0, 720px); justify-content: center; }

@media (min-width: 1600px) {
    .nm-home-inner { grid-template-columns: minmax(0, 960px); }
}

/* --- Páginas interiores ------------------------------------------------ */

.nm-page { padding-top: clamp(32px, 6vh, 56px); padding-bottom: clamp(32px, 6vh, 56px); }
.nm-container { width: 100%; max-width: 1180px; margin: 0 auto; }
.nm-container-narrow { max-width: 900px; }

/* --- Guías: barra lateral + artículo ----------------------------------- */

.nm-guide-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.nm-guide-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 120px; }

.nm-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    background: color-mix(in srgb, var(--nm-bg-alt) 85%, transparent);
    border: 1px solid color-mix(in srgb, var(--nm-fg) 14%, transparent);
    border-radius: 4px;
    overflow: hidden;
}

.nm-list a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid color-mix(in srgb, var(--nm-fg) 10%, transparent);
    color: color-mix(in srgb, var(--nm-fg) 88%, transparent);
}

.nm-list li:first-child a { border-top: 0; }
.nm-list a:hover { background: color-mix(in srgb, var(--nm-accent) 12%, transparent); color: var(--nm-fg); }
.nm-list a.active { background: var(--nm-accent); color: #16130a; font-weight: 700; }
.nm-list a i { color: var(--nm-accent); }
.nm-list a.active i { color: #16130a; }

.nm-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 8px 14px;
    border: 2px solid color-mix(in srgb, var(--nm-green-light) 70%, white);
    border-radius: 6px;
    background: var(--nm-green-light);
    color: var(--nm-fg);
    font-weight: 700;
    font-size: .9rem;
}

.nm-back:hover { filter: brightness(1.1); }

@media (max-width: 860px) {
    .nm-guide-layout { grid-template-columns: minmax(0, 1fr); }
    .nm-guide-side { position: static; }
}

/* --- FAQ --------------------------------------------------------------- */

.nm-faq-group { margin-bottom: 28px; }

.nm-faq-group > h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 1.15rem;
    color: var(--nm-accent);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.nm-faq-item { margin-bottom: 8px; }

.nm-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    font-family: var(--nm-font-heading);
    color: var(--nm-fg);
}

.nm-faq-item summary::-webkit-details-marker { display: none; }
.nm-faq-item summary i { color: var(--nm-accent); transition: transform .15s ease; }
.nm-faq-item[open] summary i { transform: rotate(45deg); }
.nm-faq-item .nm-prose { padding: 0 18px 16px; }

/* --- Portada vacía / avisos --------------------------------------------- */

.nm-empty-note { text-align: center; color: color-mix(in srgb, var(--nm-fg) 60%, transparent); padding: 40px 20px; }

/* Guías: tarjetas centradas aunque haya pocas categorías. */
.nm-wiki-grid { grid-template-columns: repeat(auto-fit, minmax(0, 220px)); justify-content: center; max-width: 960px; }

@media (max-width: 460px) {
    .nm-wiki-grid { grid-template-columns: minmax(0, 320px); }
}

/* Título de página dentro del contenedor (el tema lo esperaba hijo directo de .nm-page). */
.nm-container > h1 {
    text-align: center;
    font-size: clamp(28px, 4vw, 42px);
    letter-spacing: -.01em;
    margin: 0 0 clamp(28px, 5vh, 48px);
}