@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --fondo: #020203;
    --fondo-2: #05060a;
    --panel: rgba(5, 6, 8, 0.94);
    --panel-2: rgba(10, 10, 14, 0.96);

    --texto: #f4eeee;
    --texto-suave: #c9b1b7;
    --texto-tenue: #8f747a;

    --sangre: #8d0b24;
    --sangre-claro: #c31438;
    --sangre-brillo: #ff355f;
    --sangre-oscuro: #4b0613;

    --verde: #64ff93;
    --amarillo: #ffd34d;
    --rojo: #ff355f;

    --borde: #6b1023;
    --borde-suave: #341019;

    --shadow-main:
        0 0 0 1px rgba(255, 50, 90, 0.08),
        0 0 20px rgba(0, 0, 0, 0.55);

    --shadow-red:
        0 0 8px rgba(195, 20, 56, 0.35),
        0 0 18px rgba(141, 11, 36, 0.20);
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    font-family: "VT323", "Courier New", monospace;
    font-size: 26px;
    line-height: 1.35;
    color: var(--texto);
    background:
        radial-gradient(circle at 20% 10%, rgba(195, 20, 56, 0.07), transparent 18%),
        radial-gradient(circle at 80% 30%, rgba(195, 20, 56, 0.05), transparent 16%),
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        var(--fondo);
    background-size: auto, auto, 3px 3px, 3px 3px, auto;
    background-attachment: fixed;
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.025) 0%,
            rgba(255, 255, 255, 0.0) 50%,
            rgba(255, 255, 255, 0.02) 100%
        );
    mix-blend-mode: screen;
    opacity: 0.20;
    z-index: 0;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.035) 0px,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px,
            transparent 4px
        );
    opacity: 0.06;
    z-index: 0;
}

a {
    color: var(--sangre-claro);
    text-decoration: none;
    transition: 0.18s ease;
}

a:hover {
    color: var(--sangre-brillo);
    text-shadow: 0 0 8px rgba(255, 53, 95, 0.45);
}

::selection {
    background: var(--sangre-claro);
    color: #fff;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #050507;
}

::-webkit-scrollbar-thumb {
    background: var(--sangre-oscuro);
    border: 1px solid var(--borde);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--sangre);
}

.navbar,
.page-container,
footer {
    position: relative;
    z-index: 1;
}

.navbar {
    width: calc(100% - 40px);
    max-width: 1600px;
    margin: 24px auto 18px;
    min-height: 58px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 24px;
    background: rgba(3, 3, 5, 0.95);
    border: 1px solid var(--borde);
    box-shadow: var(--shadow-main);
}

.logo {
    color: #fff1f3;
    font-size: 26px;
    letter-spacing: 2px;
    white-space: nowrap;
    text-shadow:
        0 0 8px rgba(195, 20, 56, 0.45),
        0 0 16px rgba(195, 20, 56, 0.25);
}

.nav-links {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}

.nav-links a {
    color: var(--texto-suave);
    padding: 6px 10px;
    font-size: 18px;
    border: 1px solid transparent;
}

.nav-links a:hover {
    color: #fff;
    border-color: var(--borde);
    background: rgba(195, 20, 56, 0.07);
}

.nav-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--verde);
    font-size: 18px;
    white-space: nowrap;
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--verde);
    box-shadow:
        0 0 4px var(--verde),
        0 0 10px rgba(100, 255, 147, 0.45);
    margin-right: 5px;
}

.page-container {
    width: calc(100% - 40px);
    max-width: 1600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 320px;
    gap: 14px;
    align-items: start;
}

.sidebar,
.right-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.box,
.content-box,
.hero,
.terminal,
footer {
    background: var(--panel);
    border: 1px solid var(--borde);
    box-shadow: var(--shadow-main);
    position: relative;
    overflow: hidden;
}

.box::before,
.content-box::before,
.hero::before,
.terminal::before,
footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.02),
            transparent 35%
        );
    opacity: 0.4;
}

.box {
    padding: 16px;
}

.box h3 {
    color: #ffd8df;
    font-size: 18px;
    letter-spacing: 2px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--borde);
    text-shadow: 0 0 8px rgba(195, 20, 56, 0.25);
}

.box a {
    display: block;
    color: var(--texto-suave);
    font-size: 18px;
    padding: 3px 0;
}

.box a:hover {
    color: var(--sangre-brillo);
    padding-left: 6px;
}

.box p {
    color: var(--texto-suave);
    font-size: 18px;
    margin-bottom: 6px;
}

.box strong {
    color: var(--texto);
}

.main-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hero {
    min-height: 340px;
    padding: 34px 38px;
    background:
        radial-gradient(circle at 20% 10%, rgba(195, 20, 56, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 45%),
        var(--panel);
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(195, 20, 56, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(195, 20, 56, 0.055) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: 0.10;
}

.hero-small,
.hero h1,
.hero-description {
    position: relative;
    z-index: 1;
}

.hero-small {
    color: var(--sangre-claro);
    font-size: 18px;
    margin-bottom: 18px;
    text-shadow: 0 0 8px rgba(195, 20, 56, 0.30);
}

.hero h1 {
    color: #ffe7eb;
    font-size: clamp(74px, 9vw, 150px);
    font-weight: normal;
    letter-spacing: 7px;
    line-height: 0.95;
    margin-bottom: 24px;
    text-shadow:
        0 0 10px rgba(195, 20, 56, 0.5),
        0 0 22px rgba(195, 20, 56, 0.35),
        0 0 40px rgba(141, 11, 36, 0.18);
}

.hero-description {
    max-width: 820px;
    color: var(--texto-suave);
    margin-top: 10px;
    font-size: 22px;
}

.content-box {
    padding: 20px;
}

.box-title {
    color: #ffd8df;
    letter-spacing: 2px;
    font-size: 18px;
    margin-bottom: 18px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--borde);
    text-shadow: 0 0 8px rgba(195, 20, 56, 0.20);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.info-grid div {
    padding: 14px;
    border: 1px solid var(--borde-suave);
    background: rgba(10, 10, 14, 0.90);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: 0.18s ease;
}

.info-grid div:hover {
    border-color: var(--borde);
    box-shadow: var(--shadow-red);
    transform: translateY(-2px);
}

.info-grid span {
    color: var(--texto-tenue);
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.info-grid strong {
    color: var(--texto);
    font-size: 22px;
    font-weight: normal;
}

.blog-preview {
    padding: 14px 0;
    border-bottom: 1px solid var(--borde-suave);
}

.blog-preview:last-child {
    border-bottom: none;
}

.blog-preview .date {
    color: var(--sangre-claro);
    font-size: 16px;
    letter-spacing: 1px;
}

.blog-preview h2 {
    color: #fff5f6;
    font-size: 28px;
    margin: 6px 0 4px;
    font-weight: normal;
}

.blog-preview p {
    color: var(--texto-suave);
    font-size: 21px;
    margin-bottom: 8px;
}

.blog-preview a {
    font-size: 18px;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.project-card {
    min-height: 170px;
    padding: 16px;
    background: rgba(7, 8, 12, 0.94);
    border: 1px solid var(--borde-suave);
    position: relative;
    transition: 0.18s ease;
}

.project-card:hover {
    transform: translateY(-3px);
    border-color: var(--borde);
    box-shadow: var(--shadow-red);
}

.project-number {
    color: var(--sangre-claro);
    font-size: 16px;
}

.project-card h2 {
    margin-top: 8px;
    color: #fff2f4;
    font-size: 28px;
    font-weight: normal;
}

.project-card p {
    color: var(--texto-suave);
    font-size: 20px;
    margin: 9px 0 12px;
}

.project-card a {
    font-size: 18px;
}

.terminal {
    background: #030304;
}

.terminal-header {
    min-height: 34px;
    padding: 7px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #09090b;
    border-bottom: 1px solid var(--borde);
    color: var(--texto-tenue);
    font-size: 16px;
    letter-spacing: 1px;
}

.terminal-body {
    min-height: 140px;
    padding: 16px;
    color: #e8dfe2;
    font-size: 22px;
}

.terminal-user {
    color: var(--verde);
}

.terminal-path {
    color: var(--sangre-claro);
}

.cursor {
    color: #fff;
    animation: blink 1s steps(1) infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

#clock {
    color: #ffe7eb;
    font-size: 42px;
    margin-bottom: 4px;
    letter-spacing: 2px;
    text-shadow:
        0 0 8px rgba(195, 20, 56, 0.28);
}

.system-item {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed #341019;
    color: var(--texto-suave);
    font-size: 18px;
}

.system-item:last-child {
    border-bottom: none;
}

.ok {
    color: var(--verde);
}

.warning {
    color: var(--amarillo);
}

.music {
    display: flex;
    align-items: center;
    gap: 12px;
}

.album-placeholder {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--borde);
    background:
        linear-gradient(
            135deg,
            rgba(195, 20, 56, 0.18),
            rgba(195, 20, 56, 0.03)
        );
    color: #fff2f5;
    font-size: 26px;
}

.music strong {
    font-size: 19px;
    font-weight: normal;
}

.music p {
    font-size: 17px;
}

footer {
    width: calc(100% - 40px);
    max-width: 1600px;
    margin: 14px auto 28px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: var(--texto-suave);
    font-size: 16px;
}

.music-widget-box {
    overflow: hidden;
}

.amuse-container {
    width: 100%;
    height: 190px;
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid var(--borde);
    background: #060609;
}

.amuse-widget {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}

.now-box {
    overflow: hidden;
}

.activity-item {
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 53, 95, 0.10);
}

.activity-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.activity-label {
    margin-bottom: 6px !important;
    color: var(--texto-suave);
    font-size: 18px;
}

.activity-title {
    display: block;
    color: var(--texto);
    font-size: 30px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.activity-extra {
    display: block;
    margin-top: 5px;
    color: var(--texto-suave);
    font-size: 18px;
    line-height: 1.4;
}

.steam-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
    width: 100%;
}

.steam-cover {
    display: none;
    width: 100%;
    min-width: 0;
    height: auto;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--fondo-2);
}

.steam-info {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    gap: 6px;
}

.steam-playtime {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
    color: var(--texto-suave);
    font-size: 18px;
    line-height: 1.4;
}

.steam-playtime span {
    display: block;
}

.steam-playing {
    color: var(--verde) !important;
    text-shadow: 0 0 10px rgba(100, 255, 147, 0.25);
}

.steam-link {
    display: inline-block !important;
    width: fit-content;
    margin-top: 6px;
    padding: 0 !important;
    color: var(--sangre-claro) !important;
    font-size: 18px;
    text-decoration: none;
}

.steam-link:hover {
    color: var(--sangre-brillo) !important;
    padding-left: 0 !important;
    text-decoration: underline;
}

.stream-platform {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 53, 95, 0.08);
    font-size: 18px;
}

.stream-platform span {
    color: var(--texto-suave);
}

.stream-platform strong {
    color: var(--texto);
    font-size: 18px;
    text-align: right;
    font-weight: normal;
}

.stream-pending {
    color: #78666a !important;
}

.platform-live {
    color: var(--rojo) !important;
    text-shadow: 0 0 10px rgba(255, 53, 95, 0.35);
}

.stream-live {
    color: var(--rojo) !important;
    text-shadow: 0 0 12px rgba(255, 53, 95, 0.45);
}

.stream-details {
    margin-top: 14px;
}

.live-wrapper {
    width: 100%;
}

.live-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    margin-top: 10px;
    border: 1px solid rgba(195, 20, 56, 0.35);
    background: rgba(195, 20, 56, 0.05);
}

.live-platform {
    color: var(--sangre-claro);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.live-title {
    color: var(--texto);
    font-size: 22px;
    overflow-wrap: anywhere;
}

.live-card span {
    color: var(--texto-suave);
    font-size: 18px;
}

.stream-link {
    display: inline-block !important;
    width: fit-content;
    margin-top: 4px;
    padding: 0 !important;
    color: var(--sangre-claro) !important;
    text-decoration: none;
    font-size: 18px;
}

.stream-link:hover {
    color: var(--sangre-brillo) !important;
    padding-left: 0 !important;
    text-decoration: underline;
}

@media (max-width: 1350px) {
    .page-container {
        grid-template-columns: 210px minmax(0, 1fr) 300px;
    }
}

@media (max-width: 1150px) {
    .page-container {
        grid-template-columns: 190px minmax(0, 1fr) 280px;
    }

    .navbar {
        gap: 14px;
    }

    .nav-links a {
        padding: 6px 8px;
        font-size: 17px;
    }

    .hero h1 {
        font-size: clamp(64px, 10vw, 120px);
    }
}

@media (max-width: 950px) {
    .navbar {
        flex-wrap: wrap;
    }

    .nav-links {
        order: 3;
        width: 100%;
        overflow-x: auto;
    }

    .page-container {
        grid-template-columns: 180px minmax(0, 1fr);
    }

    .right-sidebar {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    body {
        font-size: 22px;
    }

    .navbar {
        width: calc(100% - 20px);
        margin: 10px auto;
        padding: 10px 12px;
    }

    .page-container {
        width: calc(100% - 20px);
        grid-template-columns: 1fr;
    }

    .sidebar {
        display: none;
    }

    .right-sidebar {
        grid-column: auto;
        display: flex;
        flex-direction: column;
    }

    .hero {
        padding: 24px 18px;
        min-height: auto;
    }

    .hero h1 {
        font-size: clamp(52px, 17vw, 80px);
        letter-spacing: 3px;
    }

    .hero-description {
        font-size: 20px;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .projects-grid {
        grid-template-columns: 1fr;
    }

    .content-box,
    .box {
        padding: 15px;
    }

    footer {
        width: calc(100% - 20px);
        flex-direction: column;
    }
}

/* =====================================================
   ASHUR - LETRERO NEON
===================================================== */

.navbar.navbar-logo-only {
    width: calc(100% - 40px);
    max-width: 1600px;

    margin: 18px auto 14px;
    padding: 20px 0;

    min-height: 115px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    overflow: visible;
}


/* =========================
   LETRERO
========================= */

.ashur-neon-title {
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    gap: 4px;

    margin: 0;
    padding: 0;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    text-decoration: none;

    font-family:
        "VT323",
        "Courier New",
        monospace;

    font-size: clamp(
        72px,
        8vw,
        130px
    );

    line-height: 0.82;

    letter-spacing: 2px;

    animation:
        neon-sign-flicker
        6s
        infinite;
}


/* =========================
   CADA LETRA
========================= */

.ashur-neon-title span {
    display: inline-block;

    color: #ffe6eb;

    text-shadow:
        0 0 2px #ffffff,
        0 0 5px #ffd6de,
        0 0 10px #ff8aa0,
        0 0 18px #ff4768,
        0 0 30px #d6103a,
        0 0 55px #8d0b24,
        0 0 85px rgba(120, 0, 25, 0.75);

    filter:
        drop-shadow(
            0 0 5px
            rgba(255, 60, 95, 0.9)
        )
        drop-shadow(
            0 0 16px
            rgba(195, 20, 56, 0.65)
        );

    transition:
        color 0.08s linear,
        text-shadow 0.08s linear,
        filter 0.08s linear,
        opacity 0.08s linear;
}


/* =========================
   RESPLANDOR GENERAL
========================= */

.ashur-neon-title::after {
    content: "";

    position: absolute;

    left: 3%;
    right: 3%;

    bottom: -18px;

    height: 14px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 25, 65, 0.48),
            rgba(150, 0, 30, 0.20) 40%,
            transparent 75%
        );

    filter: blur(9px);

    pointer-events: none;
}


/* =====================================================
   TITILEO GENERAL DEL LETRERO
===================================================== */

@keyframes neon-sign-flicker {

    0%,
    8%,
    12%,
    22%,
    31%,
    47%,
    59%,
    72%,
    83%,
    100% {
        opacity: 1;
    }

    9% {
        opacity: 0.92;
    }

    10% {
        opacity: 1;
    }

    23% {
        opacity: 0.88;
    }

    24% {
        opacity: 1;
    }

    48% {
        opacity: 0.94;
    }

    49% {
        opacity: 1;
    }

    73% {
        opacity: 0.91;
    }

    74% {
        opacity: 1;
    }
}


/* =====================================================
   H DEFECTUOSA
===================================================== */

.ashur-neon-title .neon-broken {
    animation:
        broken-h-flicker
        8.5s
        infinite;
}


/* =========================
   FALLA IRREGULAR DE LA H
========================= */

@keyframes broken-h-flicker {

    0%,
    7%,
    11%,
    19%,
    27%,
    39%,
    45%,
    53%,
    68%,
    76%,
    88%,
    100% {
        opacity: 1;

        color: #ffe6eb;

        text-shadow:
            0 0 2px #ffffff,
            0 0 5px #ffd6de,
            0 0 10px #ff8aa0,
            0 0 18px #ff4768,
            0 0 30px #d6103a,
            0 0 55px #8d0b24,
            0 0 85px rgba(120, 0, 25, 0.75);

        filter:
            drop-shadow(
                0 0 5px
                rgba(255, 60, 95, 0.9)
            )
            drop-shadow(
                0 0 16px
                rgba(195, 20, 56, 0.65)
            );
    }


    /* primera falla */

    8% {
        opacity: 0.15;

        color: #451018;

        text-shadow:
            0 0 2px
            rgba(120, 0, 20, 0.25);

        filter: none;
    }

    9% {
        opacity: 0.95;
    }

    10% {
        opacity: 0.20;

        filter: none;
    }


    /* pequeño titileo */

    20% {
        opacity: 0.45;

        text-shadow:
            0 0 3px #7e1028,
            0 0 8px #6b0b20;

        filter: none;
    }

    21% {
        opacity: 1;
    }


    /* apagado casi total */

    40% {
        opacity: 0.08;

        color: #2c0a10;

        text-shadow: none;

        filter: none;
    }

    41% {
        opacity: 0.04;

        text-shadow: none;

        filter: none;
    }

    42% {
        opacity: 0.80;
    }

    43% {
        opacity: 0.12;

        text-shadow: none;

        filter: none;
    }

    44% {
        opacity: 1;
    }


    /* otra falla rápida */

    54% {
        opacity: 0.25;

        filter: none;
    }

    54.5% {
        opacity: 1;
    }

    55% {
        opacity: 0.12;

        text-shadow: none;

        filter: none;
    }

    55.5% {
        opacity: 1;
    }


    /* falla larga */

    69% {
        opacity: 0.05;

        color: #26070d;

        text-shadow: none;

        filter: none;
    }

    70% {
        opacity: 0.05;

        text-shadow: none;

        filter: none;
    }

    71% {
        opacity: 0.35;

        text-shadow:
            0 0 3px #8d0b24;

        filter: none;
    }


    /* último parpadeo */

    77% {
        opacity: 0.20;

        filter: none;
    }

    77.5% {
        opacity: 1;
    }

    78% {
        opacity: 0.08;

        text-shadow: none;

        filter: none;
    }

    79% {
        opacity: 1;
    }


    89% {
        opacity: 0.55;

        filter:
            drop-shadow(
                0 0 3px
                rgba(190, 20, 50, 0.3)
            );
    }

    90% {
        opacity: 1;
    }
}


/* =========================
   HOVER
========================= */

.ashur-neon-title:hover span {
    color: #ffffff;

    text-shadow:
        0 0 3px #ffffff,
        0 0 8px #ffe3e9,
        0 0 16px #ff9aaf,
        0 0 28px #ff4168,
        0 0 48px #dc0d3b,
        0 0 80px #8d001f;

    filter:
        drop-shadow(
            0 0 8px
            rgba(255, 70, 105, 1)
        )
        drop-shadow(
            0 0 22px
            rgba(210, 10, 55, 0.85)
        );
}


/* =========================
   MÓVIL
========================= */

@media (max-width: 700px) {

    .navbar.navbar-logo-only {
        width: calc(100% - 20px);

        min-height: 85px;

        margin:
            12px auto 10px;

        padding:
            14px 0;
    }

    .ashur-neon-title {
        font-size:
            clamp(
                50px,
                15vw,
                82px
            );

        gap: 2px;
    }
}



/* =====================================================
   ASHUR / HOLLOW KNIGHT - V5 LIMPIO
   Adornos integrados al borde, sin separaciones enormes.
===================================================== */

:root {
    --hk-frame: rgba(242, 245, 250, 0.88);
    --hk-glow: rgba(220, 233, 255, 0.16);
    --hk-panel-top: rgba(7, 10, 18, 0.96);
    --hk-panel-bottom: rgba(2, 4, 9, 0.98);
}

.box,
.content-box,
.hero,
.terminal,
footer {
    position: relative;
    overflow: visible !important;

    border: 1px solid var(--hk-frame) !important;

    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(85, 110, 155, 0.055),
            transparent 43%
        ),
        linear-gradient(
            180deg,
            var(--hk-panel-top),
            var(--hk-panel-bottom)
        ) !important;

    box-shadow:
        0 0 3px rgba(255, 255, 255, 0.08),
        0 0 10px rgba(200, 220, 255, 0.045),
        inset 0 0 18px rgba(180, 205, 240, 0.018) !important;
}

/* ------------------------------
   ADORNO SUPERIOR GENERAL
------------------------------ */

.box::before,
.content-box::before,
.hero::before,
.terminal::before,
footer::before {
    content: "" !important;
    position: absolute !important;

    top: -15px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    transform: translateX(-50%) !important;

    width: min(190px, 72%) !important;
    height: 27px !important;

    background:
        url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MDAgODAiPgo8ZyBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNMTggNDJjMjUgMCAzMS0yNSAxNC0zMS0xNi02LTI4IDE0LTEwIDI2IDIzIDE2IDU4IDIgOTItOCA1NC0xNiAxMDYtMTQgMTUwLTYiLz4KICA8cGF0aCBkPSJNNTgyIDQyYy0yNSAwLTMxLTI1LTE0LTMxIDE2LTYgMjggMTQgMTAgMjYtMjMgMTYtNTggMi05Mi04LTU0LTE2LTEwNi0xNC0xNTAtNiIvPgogIDxwYXRoIGQ9Ik0yNjQgMjZjMTItMTIgMjUtMTUgMzYtMiAxMS0xMyAyNC0xMCAzNiAyIi8+CiAgPHBhdGggZD0iTTI0MCAzNWMyMC00IDQwLTYgNjAtNnM0MCAyIDYwIDYiLz4KICA8cGF0aCBkPSJNMjg2IDMxYy0xMCA4LTEzIDE3LTkgMjUgNCA4IDExIDEyIDIzIDEyIi8+CiAgPHBhdGggZD0iTTMxNCAzMWMxMCA4IDEzIDE3IDkgMjUtNCA4LTExIDEyLTIzIDEyIi8+CiAgPHBhdGggZD0iTTMwMCAyNXYzOCIvPgo8L2c+Cjwvc3ZnPg==")
        center / contain
        no-repeat !important;

    opacity: 0.96 !important;

    filter:
        drop-shadow(0 0 1px rgba(255,255,255,.65))
        drop-shadow(0 0 4px rgba(215,230,255,.12));

    pointer-events: none !important;
    z-index: 20 !important;
}

/* ------------------------------
   ADORNO INFERIOR GENERAL
------------------------------ */

.box::after,
.content-box::after,
.hero::after,
.terminal::after,
footer::after {
    content: "" !important;
    position: absolute !important;

    top: auto !important;
    right: auto !important;
    bottom: -27px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    width: min(145px, 62%) !important;
    height: 39px !important;

    background:
        url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MjAgMTEwIj4KPGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+CiAgPHBhdGggZD0iTTE4IDMxYzIwIDAgMjgtMjAgMTQtMjctMTQtNy0yNiAxMC0xMiAyMiAxOCAxNSA1MCA1IDgwLTIgNDItMTAgNzMtOSAxMTAtNCIvPgogIDxwYXRoIGQ9Ik00MDIgMzFjLTIwIDAtMjgtMjAtMTQtMjcgMTQtNyAyNiAxMCAxMiAyMi0xOCAxNS01MCA1LTgwLTItNDItMTAtNzMtOS0xMTAtNCIvPgogIDxwYXRoIGQ9Ik0xNzAgMjNjMTMgMTEgMjEgMTcgNDAgMTdzMjctNiA0MC0xNyIvPgogIDxlbGxpcHNlIGN4PSIyMTAiIGN5PSI1MiIgcng9IjIyIiByeT0iMzQiLz4KICA8cGF0aCBkPSJNMTkyIDQ1YzEyLTQgMjQtNCAzNiAwTTE5MSA1N2MxMy00IDI1LTQgMzggME0xOTcgNzBjOS0zIDE3LTMgMjYgMCIvPgogIDxwYXRoIGQ9Ik0yMTAgODRjMCA5LTYgMTMtNiAxOSAwIDUgMyA4IDYgMTEiLz4KICA8cGF0aCBkPSJNMjEwIDg0YzAgOSA2IDEzIDYgMTkgMCA1LTMgOC02IDExIi8+CjwvZz4KPC9zdmc+")
        center / contain
        no-repeat !important;

    opacity: 0.94 !important;

    filter:
        drop-shadow(0 0 1px rgba(255,255,255,.60))
        drop-shadow(0 0 4px rgba(215,230,255,.10));

    pointer-events: none !important;
    z-index: 20 !important;
}

/* ------------------------------
   PANELES GRANDES
------------------------------ */

.hero::before,
.content-box::before,
.terminal::before {
    width: min(250px, 58%) !important;
    height: 31px !important;
    top: -17px !important;
}

.hero::after,
.content-box::after,
.terminal::after {
    width: min(190px, 48%) !important;
    height: 45px !important;
    bottom: -31px !important;
}

/* ------------------------------
   PANELES LATERALES
   Más pequeños para que no se vean recargados.
------------------------------ */

.sidebar .box::before,
.right-sidebar .box::before {
    width: min(135px, 72%) !important;
    height: 21px !important;
    top: -11px !important;
}

.sidebar .box::after,
.right-sidebar .box::after {
    width: min(92px, 52%) !important;
    height: 28px !important;
    bottom: -19px !important;
}

/* ------------------------------
   ESPACIADO NORMAL
------------------------------ */

.sidebar,
.right-sidebar {
    gap: 30px !important;
}

.main-content {
    gap: 38px !important;
}

.page-container {
    gap: 16px !important;
    padding-top: 8px !important;
}

footer {
    margin-top: 34px !important;
}

/* ------------------------------
   HOVER SUTIL
------------------------------ */

.box:hover,
.content-box:hover,
.hero:hover,
.terminal:hover {
    border-color: rgba(255,255,255,.97) !important;

    box-shadow:
        0 0 4px rgba(255,255,255,.12),
        0 0 12px rgba(215,230,255,.065),
        inset 0 0 20px rgba(180,205,240,.025) !important;
}

/* ------------------------------
   TARJETAS INTERNAS
------------------------------ */

.info-grid div,
.project-card,
.amuse-container,
.live-card,
.steam-cover {
    border-color: rgba(195, 205, 224, 0.18) !important;
    background: rgba(4, 7, 12, 0.88) !important;
}

.info-grid div:hover,
.project-card:hover {
    border-color: rgba(225, 233, 246, 0.35) !important;
    box-shadow: 0 0 7px rgba(220,230,250,.04) !important;
}

/* ------------------------------
   TÍTULOS
------------------------------ */

.box h3,
.box-title {
    color: #f1f3f8 !important;
    border-bottom-color: rgba(220, 228, 240, 0.17) !important;
}

/* ------------------------------
   NO TOCAR LETRERO ASHUR
------------------------------ */

.navbar.navbar-logo-only {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ------------------------------
   MÓVIL
------------------------------ */

@media (max-width: 700px) {

    .main-content {
        gap: 32px !important;
    }

    .right-sidebar {
        gap: 27px !important;
    }

    .box::before,
    .content-box::before,
    .hero::before,
    .terminal::before,
    footer::before {
        width: min(165px, 68%) !important;
        height: 24px !important;
        top: -13px !important;
    }

    .box::after,
    .content-box::after,
    .hero::after,
    .terminal::after,
    footer::after {
        width: min(120px, 52%) !important;
        height: 34px !important;
        bottom: -23px !important;
    }
}