/* ============================================================
   style-aka.css — Tema rúnico-futurista para AncientRol
   Capa global sobre style.css. Carga DESPUÉS de style.css.
   Hecho por Aka. Manosear con respeto.
   ============================================================ */

:root {
    /* Tokens extendidos (no rompen los de style.css) */
    --aka-rune-1: #b87333;          /* cobre base */
    --aka-rune-2: #d4af37;          /* dorado antiguo */
    --aka-rune-3: #ff8a3d;          /* cobre neón (hover) */
    --aka-rune-4: #4b5563;          /* piedra de fondo */
    --aka-rune-glow: 0 0 12px rgba(184, 115, 51, 0.55),
                      0 0 28px rgba(184, 115, 51, 0.18);
    --aka-rune-glow-strong: 0 0 16px rgba(255, 138, 61, 0.85),
                          0 0 40px rgba(184, 115, 51, 0.4),
                          0 0 70px rgba(184, 115, 51, 0.2);
    --aka-rune-trace: rgba(184, 115, 51, 0.12);

    /* Fuentes rúnicas-futuristas (Unicode + system fonts) */
    --aka-font-runic: 'Cinzel', 'Trajan Pro', 'Cinzel Decorative', serif;
    --aka-font-tech: 'Syncopate', 'Eurostile', 'Bank Gothic', monospace;
}

/* ============================================================
   CURSOR RÚNICO (solo desktop con puntero fino)
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
    body {
        cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><circle cx='14' cy='14' r='3' fill='%23b87333'/><circle cx='14' cy='14' r='8' fill='none' stroke='%23b87333' stroke-width='0.6' opacity='0.7'/><circle cx='14' cy='14' r='13' fill='none' stroke='%23b87333' stroke-width='0.3' opacity='0.4'/></svg>") 14 14, auto;
    }
    a, button, .gateway-card, .vig-stat, .vig-arena { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><circle cx='16' cy='16' r='4' fill='%23d4af37'/><circle cx='16' cy='16' r='10' fill='none' stroke='%23d4af37' stroke-width='0.8' opacity='0.8'/><circle cx='16' cy='16' r='15' fill='none' stroke='%23d4af37' stroke-width='0.4' opacity='0.4'/></svg>") 16 16, pointer;
    }
}

/* ============================================================
   FONDO GLOBAL: patrón rúnico sutil con SVG embebido
   ============================================================ */
body {
    background-color: #040405;
    background-image:
        /* textura de "circuitos" sutiles */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='none' stroke='%23b87333' stroke-width='0.4' opacity='0.18'><path d='M0 90 L180 90 M90 0 L90 180'/><circle cx='90' cy='90' r='30'/><circle cx='90' cy='90' r='60'/><path d='M0 0 L180 180 M0 180 L180 0'/></g><g fill='%23b87333' opacity='0.22' font-family='serif' font-size='11'><text x='6' y='14'>ᚠ</text><text x='158' y='14'>ᚱ</text><text x='6' y='172'>ᛞ</text><text x='158' y='172'>ᛟ</text></g></svg>"),
        /* viñeta radial que oscurece bordes */
        radial-gradient(ellipse at center,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.35) 60%,
            rgba(0, 0, 0, 0.6) 100%);
    background-attachment: fixed, fixed;
    background-repeat: repeat, no-repeat;
    background-size: 180px 180px, cover;
}

/* Capa "starfield" muy sutil para sensación de espacio */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 23% 17%, rgba(212, 175, 55, 0.5), transparent),
        radial-gradient(1px 1px at 67% 33%, rgba(184, 115, 51, 0.45), transparent),
        radial-gradient(1px 1px at 12% 78%, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1px 1px at 88% 12%, rgba(212, 175, 55, 0.4), transparent),
        radial-gradient(1px 1px at 45% 92%, rgba(184, 115, 51, 0.5), transparent),
        radial-gradient(1px 1px at 78% 67%, rgba(255, 255, 255, 0.3), transparent);
    background-size: 100% 100%;
    opacity: 0.4;
    z-index: 0;
}

/* Todo el contenido va encima de la capa de estrellas */
main, .main-content, header, footer, body > * {
    position: relative;
    z-index: 1;
}

/* ============================================================
   NAVEGACIÓN — look rúnico-futurista
   ============================================================ */
.main-nav {
    background-color: rgba(4, 4, 5, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--aka-rune-1);
    border-image: linear-gradient(90deg,
        transparent 0%,
        var(--aka-rune-1) 15%,
        var(--aka-rune-2) 50%,
        var(--aka-rune-1) 85%,
        transparent 100%) 1;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6),
                0 0 24px rgba(184, 115, 51, 0.05);
    position: relative;
}

/* Sellos rúnicos en las esquinas de la nav */
.main-nav::before, .main-nav::after {
    content: "ᚠ ᚱ ᚲ ᚦ ᚷ ᚹ ᚺ ᚾ ᛁ ᛃ ᛇ ᛈ ᛉ ᛊ ᛏ ᛒ ᛖ ᛗ ᛚ ᛜ ᛞ ᛟ";
    position: absolute;
    bottom: -1.2rem;
    left: 0;
    right: 0;
    font-family: var(--aka-font-runic);
    font-size: 0.7rem;
    letter-spacing: 0.5rem;
    color: var(--aka-rune-1);
    text-align: center;
    opacity: 0.45;
    pointer-events: none;
    text-shadow: 0 0 6px rgba(184, 115, 51, 0.4);
    white-space: nowrap;
    overflow: hidden;
}
.main-nav::after { display: none; }  /* solo una línea rúnica */

.nav-logo a {
    position: relative;
    display: inline-block;
    padding: 0.3rem 0.6rem;
    border: 1px solid transparent;
    transition: all 0.3s;
}
.nav-logo a:hover {
    border-color: var(--aka-rune-1);
    box-shadow: var(--aka-rune-glow);
}
.nav-logo img {
    max-height: 60px;
    filter: drop-shadow(0 0 4px rgba(184, 115, 51, 0.4));
}

.nav-links a {
    position: relative;
    padding: 0.4rem 0.7rem;
    font-family: var(--aka-font-runic);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--color-text-primary, #d1d5db);
    transition: all 0.25s;
    border: 1px solid transparent;
}
.nav-links a::before {
    content: "›";
    position: absolute;
    left: -0.4rem;
    color: var(--aka-rune-1);
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
}
.nav-links a:hover, .nav-links a.active {
    color: var(--aka-rune-2);
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
    border-color: rgba(184, 115, 51, 0.4);
}
.nav-links a:hover::before, .nav-links a.active::before {
    opacity: 1;
    transform: translateX(0.3rem);
}

/* Variante "juego": neón naranja + runa visible para que se distinga */
.nav-links a.nav-game {
    color: var(--aka-rune-3);
    text-shadow: 0 0 6px rgba(255, 138, 61, 0.4);
}
.nav-links a.nav-game::after {
    content: " ᚱ";
    color: var(--aka-rune-3);
    opacity: 0.65;
    font-family: var(--aka-font-runic);
    font-size: 0.8em;
    margin-left: 0.15rem;
    transition: opacity 0.25s, text-shadow 0.25s;
}
.nav-links a.nav-game:hover, .nav-links a.nav-game.active {
    color: var(--aka-rune-3);
    text-shadow: 0 0 10px rgba(255, 138, 61, 0.8), 0 0 20px rgba(255, 138, 61, 0.4);
}
.nav-links a.nav-game:hover::after, .nav-links a.nav-game.active::after {
    opacity: 1;
    text-shadow: 0 0 8px rgba(255, 138, 61, 0.7);
}

/* Conmutador ES/EN con look de panel */
.lang-switch {
    font-family: var(--aka-font-tech);
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    color: var(--aka-rune-1);
    border-left: 1px solid var(--aka-rune-4);
    padding-left: 1rem;
}
.lang-switch .lang-active {
    color: var(--aka-rune-2);
    text-shadow: 0 0 6px rgba(212, 175, 55, 0.5);
    font-weight: 700;
}

/* ============================================================
   HERO — H1 ANCIENT CONFLICT con glow 3D-rúnico
   ============================================================ */
.hero-section {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg,
        transparent 0%,
        var(--aka-rune-1) 30%,
        var(--aka-rune-2) 50%,
        var(--aka-rune-1) 70%,
        transparent 100%) 1;
}

/* Capa de "circuitos" sobre el hero */
.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><g fill='none' stroke='%23b87333' stroke-width='0.5' opacity='0.25'><circle cx='100' cy='100' r='40'/><circle cx='100' cy='100' r='70'/><circle cx='100' cy='100' r='95'/><line x1='0' y1='100' x2='200' y2='100'/><line x1='100' y1='0' x2='100' y2='200'/><path d='M30 30 L170 170 M170 30 L30 170'/></g></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='%23b87333' opacity='0.4' font-family='serif' font-size='9'><text x='8' y='14'>ᛟ</text><text x='80' y='14'>ᚦ</text><text x='8' y='92'>ᛞ</text><text x='80' y='92'>ᚱ</text><text x='44' y='55'>ᛉ</text></g></svg>");
    background-position: center, center;
    background-repeat: no-repeat, repeat;
    background-size: 80% 80%, 100px 100px;
    opacity: 0.45;
    mix-blend-mode: screen;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 4rem 1.5rem 5rem;
}

/* Sello rúnico sobre el H1 */
.hero-content::before {
    content: "ᛟ ᛉ ᚠ ᚱ ᚷ ᚹ ᚺ ᚾ ᛁ ᛃ";
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--aka-font-runic);
    font-size: 0.85rem;
    letter-spacing: 1.5rem;
    color: var(--aka-rune-1);
    opacity: 0.7;
    text-shadow: 0 0 10px rgba(184, 115, 51, 0.5);
    white-space: nowrap;
}

/* H1 con múltiples sombras para efecto 3D-neón-rúnico */
.glitch-effect {
    font-family: var(--aka-font-runic);
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5rem;
    color: var(--aka-rune-2);
    text-shadow:
        0 0 4px rgba(212, 175, 55, 0.8),
        0 0 12px rgba(184, 115, 51, 0.6),
        0 0 28px rgba(184, 115, 51, 0.3),
        1px 1px 0 rgba(184, 115, 51, 0.4),
        -1px -1px 0 rgba(0, 0, 0, 0.6),
        0 4px 8px rgba(0, 0, 0, 0.6);
    margin: 0.6em 0;
    position: relative;
    animation: aka-title-pulse 6s ease-in-out infinite;
}

@keyframes aka-title-pulse {
    0%, 100% {
        text-shadow:
            0 0 4px rgba(212, 175, 55, 0.8),
            0 0 12px rgba(184, 115, 51, 0.6),
            0 0 28px rgba(184, 115, 51, 0.3),
            1px 1px 0 rgba(184, 115, 51, 0.4),
            -1px -1px 0 rgba(0, 0, 0, 0.6),
            0 4px 8px rgba(0, 0, 0, 0.6);
    }
    50% {
        text-shadow:
            0 0 6px rgba(255, 138, 61, 1),
            0 0 18px rgba(255, 138, 61, 0.8),
            0 0 38px rgba(184, 115, 51, 0.5),
            1px 1px 0 rgba(184, 115, 51, 0.5),
            -1px -1px 0 rgba(0, 0, 0, 0.6),
            0 4px 8px rgba(0, 0, 0, 0.6);
    }
}

/* Glitch con data-text (mantengo el del original, lo refuerzo) */
.glitch-effect::before, .glitch-effect::after {
    color: var(--aka-rune-1);
    text-shadow: 0 0 8px var(--aka-rune-3);
    opacity: 0.6;
}

.hero-content h2.subtitle {
    font-family: var(--aka-font-runic);
    font-size: clamp(1.1rem, 2.2vw, 1.6rem);
    font-weight: 400;
    letter-spacing: 0.6rem;
    color: var(--color-text-primary, #d1d5db);
    margin: 0.4rem 0 1.5rem;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(184, 115, 51, 0.4);
    position: relative;
}
.hero-content h2.subtitle::before,
.hero-content h2.subtitle::after {
    content: "◆";
    color: var(--aka-rune-1);
    margin: 0 1.2rem;
    font-size: 0.6em;
    vertical-align: middle;
    opacity: 0.6;
}

.intro-text {
    max-width: 720px;
    margin: 0 auto 2.5rem;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text-primary, #d1d5db);
    opacity: 0.9;
    font-style: italic;
}

/* ============================================================
   CARDS DE PORTAL — doble borde rúnico + barrido de luz
   ============================================================ */
.portal-gateways {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.4rem;
    max-width: 1100px;
    margin: 0 auto;
}

.gateway-card {
    position: relative;
    display: block;
    padding: 2rem 1.5rem;
    background-color: var(--color-bg-slab, #141618);
    border: 1px solid var(--color-accent-stone, #4b5563);
    color: var(--color-text-primary, #d1d5db);
    text-decoration: none;
    text-align: center;
    overflow: hidden;
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

/* Sello rúnico en cada esquina de la card */
.gateway-card::before,
.gateway-card::after {
    content: "ᚠ ᛟ ᚦ ᛞ";
    position: absolute;
    font-family: var(--aka-font-runic);
    font-size: 0.6rem;
    letter-spacing: 0.25rem;
    color: var(--aka-rune-1);
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.3s, color 0.3s;
}
.gateway-card::before {
    top: 0.4rem;
    left: 0.5rem;
}
.gateway-card::after {
    bottom: 0.4rem;
    right: 0.5rem;
    transform: rotate(180deg);
}

/* Doble borde: una capa de glow exterior con box-shadow inset */
.gateway-card .card-content {
    position: relative;
    z-index: 2;
}

/* Animación de barrido de luz cobre al hacer hover */
.gateway-card::after {
    /* sobrescribimos: usamos ::after para barrido */
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(120deg,
        transparent 0%,
        transparent 35%,
        rgba(184, 115, 51, 0.15) 50%,
        transparent 65%,
        transparent 100%);
    transition: left 0.7s ease-out;
    pointer-events: none;
    z-index: 1;
}
.gateway-card:hover::after { left: 100%; }

/* Re-aplico el sello rúnico en otra capa (un pseudo no es suficiente para dos cosas) */
.gateway-card .card-content::before,
.gateway-card .card-content::after {
    content: "ᛟ ᚱ";
    position: absolute;
    font-family: var(--aka-font-runic);
    font-size: 0.7rem;
    letter-spacing: 0.5rem;
    color: var(--aka-rune-1);
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.3s, color 0.3s;
}
.gateway-card .card-content::before {
    top: 0.4rem;
    left: 0.5rem;
}
.gateway-card .card-content::after {
    bottom: 0.4rem;
    right: 0.5rem;
}

.gateway-card h3 {
    font-family: var(--aka-font-runic);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.3rem;
    color: var(--aka-rune-2);
    text-transform: uppercase;
    margin: 0.6rem 0 0.6rem;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
    transition: all 0.3s;
}
.gateway-card p {
    color: var(--color-text-primary, #d1d5db);
    font-size: 0.92rem;
    line-height: 1.5;
    opacity: 0.85;
    margin: 0;
}

.gateway-card:hover {
    transform: translateY(-6px);
    border-color: var(--aka-rune-1);
    box-shadow:
        0 0 0 1px var(--aka-rune-1) inset,
        0 0 30px rgba(184, 115, 51, 0.25),
        0 8px 20px rgba(0, 0, 0, 0.6);
}
.gateway-card:hover h3 {
    color: var(--aka-rune-3);
    text-shadow: var(--aka-rune-glow);
}
.gateway-card:hover .card-content::before,
.gateway-card:hover .card-content::after {
    color: var(--aka-rune-3);
    opacity: 0.85;
}

/* Colores específicos por card (mantengo lore-card, game-card, author-card) */
.gateway-card.lore-card:hover    { border-color: var(--aka-rune-2); }
.gateway-card.game-card:hover    { border-color: var(--aka-rune-3); }
.gateway-card.author-card:hover  { border-color: var(--aka-rune-1); }

/* ============================================================
   FOOTER — cita lore + map estelar
   ============================================================ */
footer {
    position: relative;
    background-color: rgba(4, 4, 5, 0.9);
    border-top: 1px solid var(--aka-rune-1);
    color: var(--color-text-primary, #d1d5db);
    padding: 1.4rem 1.5rem;
    text-align: center;
    font-family: var(--aka-font-tech);
    font-size: 0.78rem;
    letter-spacing: 1.5px;
    margin-top: 3rem;
    overflow: hidden;
}
footer::before {
    content: "ᛟ · ᚱ · ᚦ · ᛞ · ᛉ · ᛏ · ᛒ · ᛖ · ᛗ · ᛚ · ᛜ · ᛟ";
    position: absolute;
    top: 0.2rem;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--aka-rune-1);
    opacity: 0.35;
    letter-spacing: 0.6rem;
    font-size: 0.7rem;
    text-shadow: 0 0 4px rgba(184, 115, 51, 0.3);
}
footer p {
    position: relative;
    z-index: 1;
    margin: 0.3rem 0;
}
footer p.cite {
    font-style: italic;
    color: var(--aka-rune-2);
    opacity: 0.85;
    font-family: var(--aka-font-runic);
    letter-spacing: 0.2rem;
    font-size: 0.85rem;
}

/* ============================================================
   MEJORAS PARA /lore, /quienes-somos, /vigilante
   ============================================================ */

/* TOC de markdown: toc-extension genera <div class="toc"> con <ul> */
.toc {
    background-color: rgba(20, 22, 24, 0.85);
    border: 1px solid var(--aka-rune-1);
    border-radius: 4px;
    padding: 1.2rem 1.5rem;
    margin: 0 auto 2rem;
    max-width: 720px;
    font-family: var(--aka-font-tech);
    font-size: 0.85rem;
    box-shadow: 0 0 24px rgba(184, 115, 51, 0.08);
}
.toc::before {
    content: "ᛟ · ÍNDICE AKÁSHICO · ᚦ";
    display: block;
    font-family: var(--aka-font-runic);
    color: var(--aka-rune-2);
    letter-spacing: 0.3rem;
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
    text-align: center;
    text-shadow: 0 0 6px rgba(212, 175, 55, 0.4);
}
.toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.toc li {
    padding: 0.4rem 0;
    border-bottom: 1px dashed rgba(184, 115, 51, 0.15);
    font-family: var(--aka-font-runic);
    letter-spacing: 0.05rem;
}
.toc li:last-child { border-bottom: none; }
.toc a {
    color: var(--color-text-primary, #d1d5db);
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: color 0.2s, padding-left 0.2s;
}
.toc a::before {
    content: "›";
    color: var(--aka-rune-1);
    margin-right: 0.6rem;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
}
.toc a:hover {
    color: var(--aka-rune-3);
    padding-left: 0.3rem;
    text-shadow: 0 0 6px rgba(255, 138, 61, 0.5);
}
.toc a:hover::before { opacity: 1; transform: translateX(0.2rem); }
.toc ul ul { padding-left: 1.2rem; }

/* /quienes-somos: pequeños refinamientos */
.about-background .arq-title {
    position: relative;
    text-align: center;
    font-family: var(--aka-font-runic);
    letter-spacing: 0.3rem;
    color: var(--aka-rune-2);
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
}
.about-background .arq-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 1px;
    margin: 0.6rem auto 1rem;
    background: linear-gradient(90deg,
        transparent 0%, var(--aka-rune-1) 50%, transparent 100%);
    box-shadow: 0 0 6px rgba(184, 115, 51, 0.5);
}

/* /vigilante: header y arena con un extra de coherencia */
.vigilante-wrap .vig-header,
.vigilante-wrap .vig-messages,
.vigilante-wrap .vig-help {
    border-left-color: var(--aka-rune-1);
    box-shadow: 0 0 30px rgba(184, 115, 51, 0.12);
}

/* Títulos de h1 con sello rúnico arriba */
h1.glitch-effect::before {
    content: "◆";
    color: var(--aka-rune-1);
    margin-right: 1rem;
    font-size: 0.5em;
    vertical-align: middle;
    opacity: 0.7;
}
h1.glitch-effect::after {
    content: "◆";
    color: var(--aka-rune-1);
    margin-left: 1rem;
    font-size: 0.5em;
    vertical-align: middle;
    opacity: 0.7;
}
h1.title-runic::before, h1.title-runic::after {
    content: "◆";
    color: var(--aka-rune-1);
    margin: 0 0.8rem;
    font-size: 0.5em;
    vertical-align: middle;
    opacity: 0.7;
}

/* ============================================================
   LORE FIGURE — imagen épica con marco rúnico y caption lore
   Para integrar ilustraciones en páginas como /prologo.
   ============================================================ */
.lore-figure {
    position: relative;
    width: 100%;
    max-width: min(720px, calc(100% - 2rem));
    margin: 2.5rem auto;
    padding: 14px;
    background-color: var(--color-bg-slab, #141618);
    border: 1px solid var(--aka-rune-1);
    box-sizing: border-box;
    box-shadow:
        0 0 0 1px var(--aka-rune-1) inset,
        0 0 24px rgba(184, 115, 51, 0.18),
        0 12px 40px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.3s, transform 0.3s;
}
/* Doble borde rúnico exterior */
.lore-figure::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px dashed rgba(184, 115, 51, 0.5);
    pointer-events: none;
}
/* Sello rúnico en cada esquina */
.lore-figure::after {
    content: "ᛟ ᚦ";
    position: absolute;
    top: -0.6rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-bg-slab, #141618);
    padding: 0 0.8rem;
    color: var(--aka-rune-2);
    font-family: var(--aka-font-runic);
    font-size: 0.9rem;
    letter-spacing: 0.6rem;
    text-shadow: 0 0 6px rgba(212, 175, 55, 0.4);
}

.lore-figure:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px var(--aka-rune-1) inset,
        0 0 36px rgba(184, 115, 51, 0.3),
        0 12px 40px rgba(0, 0, 0, 0.5);
}

.lore-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid rgba(184, 115, 51, 0.4);
    filter: saturate(1.05) contrast(1.02);
}

.lore-figure figcaption {
    margin-top: 1rem;
    padding: 0.6rem 1rem 0.4rem;
    text-align: center;
    font-family: var(--aka-font-runic);
    font-size: 0.95rem;
    letter-spacing: 0.05rem;
    color: var(--aka-rune-2);
    line-height: 1.5;
    text-shadow: 0 0 4px rgba(212, 175, 55, 0.2);
}
.lore-figure figcaption strong {
    color: var(--aka-rune-3);
    font-weight: 700;
}
.lore-figure figcaption .rune-line {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.7rem;
    color: var(--aka-rune-1);
    letter-spacing: 0.5rem;
    opacity: 0.7;
    text-shadow: 0 0 4px rgba(184, 115, 51, 0.3);
}

/* Smooth focus para teclado (accesibilidad + look) */
a:focus-visible, button:focus-visible {
    outline: 1px solid var(--aka-rune-3);
    outline-offset: 4px;
    box-shadow: 0 0 16px rgba(255, 138, 61, 0.5);
}

/* Scroll suave para anclas del TOC */
html { scroll-behavior: smooth; }

/* ============================================================
   SELLO RÚNICO (entre secciones) — para /quienes-somos
   ============================================================ */
.rune-seal {
    text-align: center;
    margin: 2.5rem 0 1.5rem;
    font-family: var(--aka-font-runic);
    letter-spacing: 1.5rem;
    font-size: 1.6rem;
    color: var(--aka-rune-1);
    text-shadow: 0 0 12px rgba(184, 115, 51, 0.5);
    line-height: 1;
}
.rune-seal span {
    display: inline-block;
    transition: transform 0.4s, color 0.4s, text-shadow 0.4s;
}
.rune-seal span:nth-child(1) { transform: rotate(-3deg); }
.rune-seal span:nth-child(2) { transform: rotate(2deg); }
.rune-seal span:nth-child(3) { transform: rotate(-1deg); }
.rune-seal span:nth-child(4) { transform: rotate(3deg); }
.rune-seal span:nth-child(5) { transform: rotate(-2deg); }
.rune-seal:hover span { color: var(--aka-rune-2); text-shadow: 0 0 18px rgba(212, 175, 55, 0.7); }
.rune-seal:hover span:nth-child(1) { transform: rotate(-12deg) translateY(-3px); }
.rune-seal:hover span:nth-child(5) { transform: rotate(12deg) translateY(-3px); }

/* ============================================================
   RESPONSIVE COMPREHENSIVO — Aka
   Estrategia mobile-first con breakpoints explícitos:
     - mobile portrait:  ≤ 480px
     - mobile landscape: ≤ 812px (iPhone Pro Max / Pixel)
     - tablet:           481px – 1024px
     - desktop:          ≥ 1025px
   Más ajustes por orientación (landscape/portrait) en mobile.
   ============================================================ */

/* --- 1) Tipografía fluida global (clamp) --- */
h1, h2, h3 {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.glitch-effect { font-size: clamp(2rem, 7vw, 6rem); line-height: 1.05; }
h2.subtitle, h2.subtitle-runic { font-size: clamp(0.95rem, 2.4vw, 1.6rem); }
h1.title-runic { font-size: clamp(1.6rem, 5vw, 3rem); }
h2 { font-size: clamp(1.1rem, 3vw, 1.7rem); }
h3 { font-size: clamp(0.95rem, 2.2vw, 1.25rem); }
.lore-body { font-size: clamp(0.9rem, 1.6vw, 1rem); }
.lore-body h2 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); }
.lore-body h3 { font-size: clamp(0.9rem, 1.8vw, 1.05rem); }
.intro-text { font-size: clamp(0.9rem, 1.8vw, 1.05rem); padding-left: 0.5rem; padding-right: 0.5rem; }

/* --- 2) Imagen hero (el sello rúnico ᛟᛉᚠᚱ... sobre el H1) ---
   En móvil lo hago más pequeño y con menos tracking. */
.hero-content::before { font-size: clamp(0.6rem, 1.6vw, 0.85rem); letter-spacing: clamp(0.3rem, 1.5vw, 1.5rem); }
.hero-content { padding: clamp(2.5rem, 5vw, 5rem) 1rem clamp(3rem, 6vw, 5rem); }

/* --- 3) Main-nav responsive ---
   - En >= 700px: layout horizontal clásico (logo izquierda, links centro, lang derecha)
   - En 480-700px: scroll horizontal con scroll-snap (los links siguen en una línea)
   - En < 480px: el nav se apila vertical (logo arriba, links abajo) con padding ajustado
*/
.main-nav {
    flex-wrap: wrap;
    gap: 0.4rem 0.8rem;
    padding: 0.6rem 1rem;
}
.nav-logo { flex: 0 0 auto; min-width: 0; }
.nav-logo img { max-height: clamp(38px, 6vw, 60px); width: auto; }
.nav-links {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* IE/Edge */
    padding: 0.2rem 0;
    gap: 0.2rem;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: clamp(0.7rem, 1.3vw, 0.85rem);
    padding: 0.35rem 0.6rem;
    scroll-snap-align: start;
}
.lang-switch {
    flex: 0 0 auto;
    font-size: clamp(0.65rem, 1.1vw, 0.75rem);
    padding-left: clamp(0.4rem, 1.2vw, 1rem);
}

/* Sello rúnico debajo de la nav: en móvil lo hacemos más sutil */
.main-nav::before { font-size: clamp(0.45rem, 1.1vw, 0.7rem); letter-spacing: clamp(0.2rem, 1.2vw, 0.5rem); bottom: -1rem; }

/* --- 4) Portal-gateways grid --- */
.portal-gateways {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: clamp(0.8rem, 2vw, 1.4rem);
}
.gateway-card { padding: clamp(1.4rem, 3vw, 2rem) clamp(1rem, 2vw, 1.5rem); }
.gateway-card h3 { font-size: clamp(0.95rem, 1.8vw, 1.15rem); letter-spacing: clamp(0.15rem, 0.4vw, 0.3rem); }
.gateway-card p { font-size: clamp(0.85rem, 1.4vw, 0.92rem); }
.gateway-card::before, .gateway-card .card-content::before {
    font-size: clamp(0.5rem, 0.9vw, 0.6rem);
    letter-spacing: clamp(0.15rem, 0.4vw, 0.25rem);
}
.gateway-card::after, .gateway-card .card-content::after {
    font-size: clamp(0.5rem, 0.9vw, 0.7rem);
}

/* --- 5) Quienes-grid (2 columnas desktop, 1 columna mobile) --- */
.quienes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    padding: 0 clamp(0.5rem, 2vw, 1rem);
}
.perfil-arquitecto h2 { font-size: clamp(1.05rem, 2vw, 1.3rem); letter-spacing: clamp(0.1rem, 0.3vw, 0.3rem); }

/* --- 6) Lore-figure y la imagen del prólogo --- */
.lore-figure {
    max-width: min(720px, 100%);
    margin: clamp(1.5rem, 3vw, 2.5rem) auto;
    padding: clamp(8px, 1.5vw, 14px);
}
.lore-figure figcaption {
    font-size: clamp(0.8rem, 1.4vw, 0.95rem);
    padding: 0.5rem 0.6rem 0.3rem;
}
.lore-figure figcaption .rune-line { letter-spacing: clamp(0.2rem, 0.6vw, 0.5rem); }
.lore-figure::after { font-size: clamp(0.65rem, 1.2vw, 0.9rem); letter-spacing: clamp(0.3rem, 0.8vw, 0.6rem); }
.lore-figure img { width: 100%; height: auto; }

/* --- 7) TOC (Índice Akáshico) --- */
.toc {
    max-width: min(720px, 100%);
    margin: 0 auto clamp(1rem, 2vw, 2rem);
    padding: clamp(0.8rem, 1.5vw, 1.2rem) clamp(1rem, 2vw, 1.5rem);
    font-size: clamp(0.8rem, 1.3vw, 0.85rem);
}
.toc::before { font-size: clamp(0.75rem, 1.4vw, 0.9rem); }

/* --- 8) Header del lore-body y del manifest --- */
.slab-content { padding: clamp(1rem, 2.5vw, 1.5rem); }
.slab-content p { margin-bottom: clamp(0.7rem, 1.2vw, 1rem); }

/* --- 9) Manifiesto (quienes-somos) --- */
.highlight-runic { padding: clamp(1.2rem, 2.5vw, 1.6rem); }
.highlight-runic p { font-size: clamp(0.88rem, 1.5vw, 0.95rem); }

/* --- 10) Rune-seal entre secciones --- */
.rune-seal { font-size: clamp(1.1rem, 3vw, 1.6rem); letter-spacing: clamp(0.6rem, 2vw, 1.5rem); }

/* --- 11) Footer --- */
footer { padding: clamp(1rem, 2vw, 1.4rem) clamp(1rem, 3vw, 1.5rem); font-size: clamp(0.7rem, 1.2vw, 0.78rem); }
footer p { margin: 0.25rem 0; }
footer p.cite { font-size: clamp(0.75rem, 1.4vw, 0.85rem); letter-spacing: clamp(0.05rem, 0.2vw, 0.2rem); }

/* --- 12) Cursor rúnico: solo desktop con puntero fino. Ya hecho. --- */

/* ============================================================
   BREAKPOINTS ESPECÍFICOS
   ============================================================ */

/* SMALL MOBILE (≤ 480px): teléfonos pequeños en portrait */
@media (max-width: 480px) {
    .main-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }
    .nav-logo { text-align: center; }
    .nav-logo img { max-height: 50px; }
    .nav-links {
        justify-content: flex-start;
        padding: 0.2rem 0;
    }
    .lang-switch { text-align: center; padding-left: 0; border-left: none; }

    .hero-content h1 { letter-spacing: 0.2rem; }
    .hero-content h2.subtitle { letter-spacing: 0.3rem; }

    .about-background { padding: 0 0.5rem; }
    .quienes-grid { gap: 1rem; }

    /* lore-figure: en muy pequeño quitamos el sello rúnico para no saturar */
    .lore-figure::after { display: none; }

    .highlight-runic { padding: 1rem 0.8rem; }
}

/* MOBILE LANDSCAPE (≤ 812px alto) o TABLET portrait (481-768px) */
@media (max-width: 812px), (max-height: 812px) and (orientation: landscape) {
    .hero-content { padding: 2.5rem 1rem 3rem; }
    .hero-content::before { display: none; }   /* quita el sello sobre el H1 en pantallas pequeñas para limpiar */
}

/* TABLET (768-1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .main-nav { padding: 0.7rem 1.5rem; }
    .nav-links a { font-size: 0.8rem; }
}

/* LARGE DESKTOP (≥ 1280px) */
@media (min-width: 1280px) {
    .main-nav { padding: 0.8rem 3rem; }
    .portal-gateways { max-width: 1200px; }
}

/* ORIENTACIÓN LANDSCAPE en móviles: el nav sigue horizontal con scroll
   (ya está cubierto por los estilos base), pero el hero debe ser más bajo */
@media (orientation: landscape) and (max-height: 500px) {
    .hero-content { padding: 1.2rem 1rem 1.5rem; }
    .hero-content::before { display: none; }
    .glitch-effect { font-size: clamp(1.6rem, 5vw, 3rem); margin: 0.2em 0; }
    h2.subtitle { margin: 0.2rem 0 0.8rem; }
    .intro-text { margin: 0 auto 1.2rem; }
    .portal-gateways { gap: 0.7rem; }
    .gateway-card { padding: 1rem 0.8rem; }
    .gateway-card h3 { font-size: 0.95rem; }
}

/* PRINT (bonus): en impresión ocultamos nav, video, minijuego, etc. */
@media print {
    .main-nav, footer, .vig-arena, #vig-overlay, .lore-figure::after { display: none; }
    body { background: #fff; color: #000; }
    .lore-body, .slab-content { background: #fff; color: #000; border-color: #000; }
}