/*
 * MT2Nexo visual layer
 * Uso: enlazar este CSS en las paginas publicas para darles el mismo clima visual de la Guia.
 * No modifica PHP, SQL ni logica de pagos/registro/login.
 */
:root {
    --nexo-bg: #030303;
    --nexo-panel: #190704;
    --nexo-panel-2: #220905;
    --nexo-gold: #e8cf76;
    --nexo-gold-2: #9f742b;
    --nexo-text: #f2e6c6;
    --nexo-muted: #b79e73;
    --nexo-red: #832517;
    --nexo-red-2: #5a120d;
    --nexo-line: rgba(232, 207, 118, .35);
    --nexo-art-left: url('/assets/img/characters/Ninja_Femenino.png');
    --nexo-art-right: url('/assets/img/characters/Guerrero_Masculino.png');
}

html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--nexo-text);
    font-family: Georgia, "Times New Roman", serif;
    background:
        radial-gradient(circle at 18% 10%, rgba(79, 54, 17, .28), transparent 28%),
        radial-gradient(circle at 80% 0%, rgba(92, 12, 8, .25), transparent 30%),
        linear-gradient(90deg, #020202, #150604 42%, #040404);
}

body::before,
body::after {
    content: "";
    position: fixed;
    bottom: 0;
    width: min(23vw, 310px);
    height: min(76vh, 620px);
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
    opacity: .42;
    filter: drop-shadow(0 0 30px rgba(232, 207, 118, .18));
}

body::before {
    left: max(14px, calc((100vw - 1180px) / 2 - 330px));
    background-image: var(--nexo-art-left);
    background-position: left bottom;
}

body::after {
    right: max(14px, calc((100vw - 1180px) / 2 - 330px));
    background-image: var(--nexo-art-right);
    background-position: right bottom;
}

body > .wrap,
body > header,
body > main,
body > footer,
.wrap,
.container,
.page,
.site,
.topbar,
.nav,
.card,
.section,
.panel,
.box,
.form-box {
    position: relative;
    z-index: 1;
}

.topbar,
.site-header,
.header {
    position: relative;
    z-index: 2;
}

.nav,
.menu,
.navbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.nav a,
.menu a,
.navbar a,
a.btn-nav {
    border: 1px solid var(--nexo-gold-2);
    border-radius: 4px;
    color: var(--nexo-text);
    background: rgba(40, 11, 6, .55);
    font-weight: 700;
    text-decoration: none;
}

.nav a:hover,
.nav a.active,
.menu a:hover,
.menu a.active,
.navbar a:hover,
.navbar a.active,
a.btn-nav:hover,
a.btn-nav.active {
    background: linear-gradient(180deg, var(--nexo-red), var(--nexo-red-2));
    color: #fff6dd;
}

.brand h1,
.logo h1,
.site-title,
h1, h2, h3 {
    color: var(--nexo-gold);
}

.card,
.section,
.panel,
.box,
.form-box {
    border-color: var(--nexo-line);
    box-shadow: 0 10px 30px rgba(0,0,0,.24);
}

@media (max-width: 900px) {
    body::before,
    body::after {
        opacity: .13;
        width: 42vw;
        height: 45vh;
    }
}

@media (max-width: 620px) {
    body::before,
    body::after { display: none; }
}