@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;800;900&family=Rajdhani:wght@600;700&family=Inter:wght@400;700&display=swap');

/* Variables globales de marca, tipografía y layout. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --gh-magenta: #FF00C8;
    --gh-purple: #6A00FF;
    --gh-pink-btn: #FF4F9D;
    --gh-admin-card-color: #D8B4FE;
    --gh-admin-glow: 0 0 15px rgba(216, 180, 254, 0.4);
    --gh-dark: #0A0A0F;
    --gh-white: #F2F2F2;
    --gh-gris-claro: #D2D2D2;
    --gh-gradient: linear-gradient(135deg, var(--gh-purple), var(--gh-magenta));
    --font-header: 'Orbitron', sans-serif;
    --font-body: 'Inter', sans-serif;
    --fs-h1: 2.25rem;
    --fs-h2: 1.625rem;
    --fs-body: 0.875rem;
    --fs-btn: 1.125rem;
    --gh-glow: 0 0 15px var(--gh-pink-btn);
    --transition: all 0.3s ease;
    --gh-darker: #050508;
    --gh-border: rgba(255, 255, 255, 0.08);
    --radius: 12px;
}

/* Base visual compartida. */
html {
    background-color: #05060a;
    /* Fallback para evitar flashes blancos al scroll */
}

body {
    background-color: var(--gh-dark);
    color: var(--gh-white);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.6;
    margin: 0;
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow-x: hidden;
    width: 100%;
}

/* --- SISTEMA DE BACKGROUND CONTINUO (GLOBAL) --- */
.gh-global-background {
    position: fixed;
    top: -20vh;
    left: 0;
    width: 100%;
    height: 140vh;
    background: #05060a;
    z-index: -10;
    overflow: hidden;
    pointer-events: none;
    will-change: transform;
}

/* Capa 0: Rejilla Cyberpunk */
.gh-grid-layer {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(106, 0, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(106, 0, 255, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(circle at center, black, transparent 90%);
    opacity: 0.4;
}

/* Capa 1: Gradiente de profundidad */
.gh-global-background::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(10, 11, 20, 0.5) 0%, #05060a 100%);
}

/* Capa 2: Energía Visual (Glows) */
.gh-energy-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 15% 25%, rgba(106, 0, 255, 0.04) 0%, transparent 35%),
        radial-gradient(circle at 85% 75%, rgba(255, 0, 200, 0.03) 0%, transparent 35%),
        radial-gradient(circle at 50% 50%, rgba(106, 0, 255, 0.02) 0%, transparent 50%);
}

/* Capa 3: Grain/Noise sutil */
.gh-grain-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.025;
    mix-blend-mode: overlay;
}

/* Cuando estamos en la index, el body debe ser transparente para ver el fondo fijo */
body.gh-index-page {
    background-color: transparent !important;
    max-width: 100%;
    overflow-x: hidden;
}

.grecaptcha-badge {
    visibility: hidden !important;
}

body.gh-admin-page {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

h1,
h2,
h3 {
    font-family: var(--font-header);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

h1 {
    font-size: var(--fs-h1);
    font-weight: 900;
}

h2 {
    font-size: var(--fs-h2);
}

/* Formularios de autenticación. */
.tituloH1LoginRegistro {
    font-size: var(--fs-h1);
    font-weight: 900;
    color: var(--gh-white);
    text-align: center;
}

.btn-gh {
    background-color: var(--gh-pink-btn);
    color: white;
    font-family: var(--font-header);
    font-weight: 700;
    font-size: var(--fs-btn);
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition);
    text-transform: uppercase;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    width: 100%;
}

.btn-gh:hover {
    box-shadow: var(--gh-glow);
    transform: translateY(-2px);
}

.card-gradient {
    background: rgba(15, 15, 25, 0.85);
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: 24px;
    width: 100%;
    max-width: 450px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        inset 0 0 20px rgba(168, 85, 247, 0.05);
    position: relative;
    overflow: hidden;
}

.card-gradient::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--gh-gradient);
    z-index: -1;
    border-radius: 26px;
    opacity: 0.3;
}

/* Panel de administración. */
.admin-container {
    display: flex;
    min-height: 100vh;
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 0, 200, 0.14), transparent 28%),
        radial-gradient(circle at 88% 4%, rgba(34, 211, 238, 0.12), transparent 26%),
        linear-gradient(135deg, #08080f 0%, #101019 52%, #08080f 100%);
    color: var(--gh-white);
    font-family: var(--font-body);
}

.admin-sidebar {
    width: 250px;
    background:
        linear-gradient(180deg, rgba(20, 14, 31, 0.96), rgba(7, 8, 15, 0.98)),
        #0D0D14;
    padding: 20px;
    border-right: 1px solid rgba(216, 180, 254, 0.14);
    box-shadow: 12px 0 35px rgba(0, 0, 0, 0.24);
}

.admin-mobile-menu-toggle,
.admin-mobile-menu-button,
.admin-mobile-menu-backdrop {
    display: none;
}

.admin-sidebar .logo {
    font-family: var(--font-header);
    font-size: var(--fs-h2);
    margin-bottom: 30px;
    background: var(--gh-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.admin-sidebar ul {
    list-style: none;
    padding: 0;
}

.admin-sidebar li {
    margin-bottom: 15px;
}

.admin-sidebar a {
    color: var(--gh-white);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
    border-radius: 8px;
    transition: var(--transition);
    border: 1px solid transparent;
}

.admin-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

.admin-sidebar li.active a,
.admin-sidebar a:hover {
    background:
        linear-gradient(135deg, rgba(106, 0, 255, 0.35), rgba(255, 0, 200, 0.25)),
        rgba(255, 255, 255, 0.04);
    border-color: rgba(216, 180, 254, 0.22);
    box-shadow: 0 0 22px rgba(255, 0, 200, 0.22);
}

.admin-main {
    --admin-section-accent: var(--gh-magenta);
    --admin-section-accent-alt: var(--gh-purple);
    --admin-section-gradient: var(--gh-gradient);
    --admin-section-accent-soft: rgba(255, 0, 200, 0.14);
    --admin-section-accent-border: rgba(255, 0, 200, 0.28);
    --admin-section-accent-glow: rgba(255, 0, 200, 0.18);
    flex: 1;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.admin-section-users {
    --admin-section-accent: #22d3ee;
    --admin-section-accent-alt: #6A00FF;
    --admin-section-gradient: linear-gradient(90deg, #22d3ee, #6A00FF);
    --admin-section-accent-soft: rgba(34, 211, 238, 0.12);
    --admin-section-accent-border: rgba(34, 211, 238, 0.28);
    --admin-section-accent-glow: rgba(34, 211, 238, 0.18);
}

.admin-section-forum {
    --admin-section-accent: #FF4F9D;
    --admin-section-accent-alt: #D8B4FE;
    --admin-section-gradient: linear-gradient(90deg, #FF00C8, #7C00FF);
    --admin-section-accent-soft: rgba(255, 0, 200, 0.14);
    --admin-section-accent-border: rgba(255, 0, 200, 0.28);
    --admin-section-accent-glow: rgba(255, 0, 200, 0.18);
}

.admin-section-social {
    --admin-section-accent: #4ade80;
    --admin-section-accent-alt: #22d3ee;
    --admin-section-gradient: linear-gradient(90deg, #22c55e, #22d3ee);
    --admin-section-accent-soft: rgba(34, 197, 94, 0.12);
    --admin-section-accent-border: rgba(34, 197, 94, 0.26);
    --admin-section-accent-glow: rgba(34, 197, 94, 0.16);
}

.admin-section-guides {
    --admin-section-accent: #fbbf24;
    --admin-section-accent-alt: #FF4F9D;
    --admin-section-gradient: linear-gradient(90deg, #f59e0b, #FF4F9D);
    --admin-section-accent-soft: rgba(245, 158, 11, 0.12);
    --admin-section-accent-border: rgba(245, 158, 11, 0.26);
    --admin-section-accent-glow: rgba(245, 158, 11, 0.16);
}

.admin-section-categories {
    --admin-section-accent: #c084fc;
    --admin-section-accent-alt: #22d3ee;
    --admin-section-gradient: linear-gradient(90deg, #a855f7, #22d3ee);
    --admin-section-accent-soft: rgba(168, 85, 247, 0.13);
    --admin-section-accent-border: rgba(168, 85, 247, 0.28);
    --admin-section-accent-glow: rgba(168, 85, 247, 0.18);
}

.admin-main::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 68%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 68%);
    pointer-events: none;
}

.admin-main>* {
    position: relative;
    z-index: 1;
}

.admin-main h1 {
    font-family: var(--font-header);
    font-size: var(--fs-h1);
    margin-bottom: 30px;
    color: var(--gh-magenta);
}

.admin-header {
    background:
        radial-gradient(circle at 8% 50%, rgba(255, 0, 200, 0.22), transparent 34%),
        radial-gradient(circle at 90% 12%, rgba(34, 211, 238, 0.14), transparent 28%),
        linear-gradient(110deg, rgba(20, 14, 31, 0.92), rgba(12, 14, 24, 0.88));
    padding: 30px 40px;
    border-radius: 12px;
    border: 1px solid rgba(216, 180, 254, 0.16);
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 10;
    overflow: hidden;
    backdrop-filter: blur(8px);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.34);
}

.admin-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--admin-section-accent), transparent);
    opacity: 0.5;
}

.admin-header::before {
    content: '';
    position: absolute;
    width: 160px;
    height: 160px;
    right: -64px;
    top: -86px;
    background: rgba(216, 180, 254, 0.12);
    border-radius: 999px;
    filter: blur(16px);
    pointer-events: none;
}

.admin-header-left {
    display: flex;
    align-items: center;
    gap: 25px;
}

.admin-header-content {
    display: flex;
    flex-direction: column;
}

.admin-header h1 {
    font-size: 2.2rem;
    margin: 0;
    color: var(--gh-white) !important;
    letter-spacing: 3px;
    text-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
}

.admin-header h1 span {
    background: var(--gh-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 8px rgba(255, 0, 200, 0.4));
}

.admin-header p {
    color: var(--gh-gris-claro);
    font-family: var(--font-header);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 5px;
    opacity: 0.7;
}

.admin-header-icon {
    width: 48px;
    height: 48px;
    color: var(--admin-section-accent);
    background: var(--admin-section-accent-soft);
    border: 1px solid var(--admin-section-accent-border);
    border-radius: 12px;
    padding: 10px;
    filter: drop-shadow(0 0 10px var(--admin-section-accent-glow));
}

.admin-header-right {
    display: flex;
    gap: 15px;
}

.admin-status-badge {
    background: rgba(10, 10, 15, 0.64);
    border: 1px solid var(--admin-section-accent-border);
    padding: 8px 16px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    box-shadow: inset 0 0 18px var(--admin-section-accent-soft);
}

.admin-badge-label {
    font-size: 0.6rem;
    font-family: var(--font-header);
    color: var(--admin-section-accent);
    letter-spacing: 1.5px;
}

.admin-badge-value {
    font-family: var(--font-header);
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
    align-self: center;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* Dashboard de administración. */
.admin-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
}

.card {
    background: #111118;
    padding: 20px;
    border-radius: 12px;
    transition: var(--transition);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.card,
.admin-card {
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
        rgba(13, 13, 20, 0.94);
    border: 1px solid rgba(216, 180, 254, 0.12);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}

.admin-card {
    border-radius: 12px;
    padding: 24px;
    position: relative;
    overflow: hidden;
}

.admin-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--admin-section-accent), var(--admin-section-accent-alt), transparent);
    opacity: 0.86;
}

.admin-dashboard-card {
    min-height: 210px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
        #101018;
    border-color: rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
    position: relative;
}

.admin-dashboard-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--admin-card-accent, var(--gh-gradient));
}

.admin-dashboard-card::after {
    content: '';
    position: absolute;
    width: 145px;
    height: 145px;
    right: -54px;
    bottom: -64px;
    background: var(--admin-card-glow, rgba(255, 0, 200, 0.14));
    border-radius: 999px;
    filter: blur(18px);
    opacity: 0.75;
    pointer-events: none;
}

.admin-dashboard-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.admin-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.admin-module-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--admin-card-accent-soft, rgba(255, 0, 200, 0.14));
    color: var(--admin-card-icon, var(--gh-magenta));
    border: 1px solid var(--admin-card-border, rgba(255, 0, 200, 0.22));
}

.admin-module-icon svg {
    width: 21px;
    height: 21px;
}

.admin-card-kicker {
    color: var(--gh-gris-claro);
    font-family: var(--font-header);
    font-size: 0.68rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.admin-dashboard-card h2 {
    margin: 6px 0 0;
}

.admin-dashboard-card p {
    color: #c7c9d4;
    margin: 0;
    max-width: 24ch;
}

.admin-card-action {
    margin-top: auto;
    color: var(--admin-card-icon, var(--gh-magenta));
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-header);
    font-size: 0.76rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.admin-card-action svg {
    width: 16px;
    height: 16px;
}

.admin-accent-users {
    --admin-card-accent: linear-gradient(90deg, #22d3ee, #6A00FF);
    --admin-card-accent-soft: rgba(34, 211, 238, 0.12);
    --admin-card-border: rgba(34, 211, 238, 0.26);
    --admin-card-glow: rgba(34, 211, 238, 0.2);
    --admin-card-icon: #22d3ee;
}

.admin-accent-forum {
    --admin-card-accent: linear-gradient(90deg, #FF00C8, #D8B4FE);
    --admin-card-accent-soft: rgba(255, 0, 200, 0.14);
    --admin-card-border: rgba(255, 0, 200, 0.28);
    --admin-card-glow: rgba(255, 0, 200, 0.18);
    --admin-card-icon: #FF4F9D;
}

.admin-accent-social {
    --admin-card-accent: linear-gradient(90deg, #22c55e, #22d3ee);
    --admin-card-accent-soft: rgba(34, 197, 94, 0.12);
    --admin-card-border: rgba(34, 197, 94, 0.24);
    --admin-card-glow: rgba(34, 197, 94, 0.16);
    --admin-card-icon: #4ade80;
}

.admin-accent-guides {
    --admin-card-accent: linear-gradient(90deg, #f59e0b, #FF4F9D);
    --admin-card-accent-soft: rgba(245, 158, 11, 0.12);
    --admin-card-border: rgba(245, 158, 11, 0.24);
    --admin-card-glow: rgba(245, 158, 11, 0.16);
    --admin-card-icon: #fbbf24;
}

.admin-accent-categories {
    --admin-card-accent: linear-gradient(90deg, #a855f7, #22d3ee);
    --admin-card-accent-soft: rgba(168, 85, 247, 0.13);
    --admin-card-border: rgba(168, 85, 247, 0.26);
    --admin-card-glow: rgba(168, 85, 247, 0.18);
    --admin-card-icon: #c084fc;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--gh-admin-glow);
}

.card h2 {
    margin-bottom: 10px;
    color: var(--gh-admin-card-color);
}

.admin-dashboard-card:hover {
    box-shadow: 0 18px 38px var(--admin-card-glow, rgba(255, 0, 200, 0.18));
}

.admin-dashboard-card h2 {
    color: var(--admin-card-icon, var(--gh-admin-card-color));
    margin-bottom: 0;
}

.admin-grid-layout {
    align-items: start;
}

@media (max-width: 900px) {
    .admin-container {
        display: block;
        min-height: 100vh;
    }

    .admin-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1002;
        width: min(86vw, 320px);
        max-width: 320px;
        padding: 24px 18px calc(104px + env(safe-area-inset-bottom));
        border-right: 1px solid rgba(216, 180, 254, 0.2);
        border-bottom: 0;
        overflow-y: auto;
        transform: translateX(-105%);
        transition: transform 0.28s ease, box-shadow 0.28s ease;
        will-change: transform;
    }

    .admin-mobile-menu-toggle {
        position: fixed;
        inline-size: 1px;
        block-size: 1px;
        opacity: 0;
        pointer-events: none;
    }

    .admin-mobile-menu-button {
        position: fixed;
        left: 50%;
        bottom: calc(16px + env(safe-area-inset-bottom));
        z-index: 20050;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-width: 142px;
        min-height: 52px;
        padding: 0 18px;
        color: var(--gh-white);
        font-family: var(--font-header);
        font-size: 0.9rem;
        letter-spacing: 0;
        text-transform: uppercase;
        cursor: pointer;
        user-select: none;
        border: 1px solid rgba(216, 180, 254, 0.28);
        border-radius: 8px;
        background:
            linear-gradient(135deg, rgba(106, 0, 255, 0.95), rgba(255, 0, 200, 0.9)),
            #14101f;
        box-shadow: 0 18px 34px rgba(0, 0, 0, 0.42), 0 0 22px rgba(255, 0, 200, 0.26);
        transform: translateX(-50%);
    }

    .admin-mobile-menu-icon {
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
    }

    .admin-mobile-menu-icon-close {
        display: none;
    }

    .admin-sidebar .logo {
        margin-bottom: 22px;
        text-align: center;
    }

    .admin-sidebar ul {
        display: grid;
        gap: 10px;
        margin: 0;
    }

    .admin-sidebar li {
        margin-bottom: 0;
    }

    .admin-sidebar a {
        min-height: 48px;
        padding: 12px 14px;
        border-radius: 8px;
        line-height: 1.15;
        box-sizing: border-box;
    }

    .admin-mobile-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 20030;
        background: rgba(3, 4, 10, 0.68);
        backdrop-filter: blur(6px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s ease;
    }

    .admin-mobile-menu-toggle:checked~.admin-sidebar {
        z-index: 20040;
        transform: translateX(0);
        box-shadow: 18px 0 44px rgba(0, 0, 0, 0.46);
    }

    .admin-mobile-menu-toggle:checked~.admin-mobile-menu-backdrop {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    .admin-mobile-menu-toggle:checked~.admin-mobile-menu-button .admin-mobile-menu-icon-open {
        display: none;
    }

    .admin-mobile-menu-toggle:checked~.admin-mobile-menu-button .admin-mobile-menu-icon-close {
        display: block;
    }

    .admin-main {
        padding: 28px 18px calc(140px + env(safe-area-inset-bottom));
        min-width: 0;
    }

    .admin-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 22px;
        padding: 26px 22px;
    }

    .admin-header h1 {
        font-size: clamp(1.35rem, 4.8vw, 1.85rem);
        letter-spacing: 0;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .admin-header p {
        letter-spacing: 1px;
        line-height: 1.35;
    }

    .admin-header-right {
        width: 100%;
        flex-wrap: wrap;
    }

    .admin-status-badge {
        flex: 1 1 150px;
        align-items: flex-start;
    }

    .admin-grid-layout {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 900px) {

    html,
    body {
        overflow-x: hidden;
    }

    body.gh-admin-page>footer {
        display: none;
    }

    body.gh-admin-page>header {
        display: flex;
    }

    .admin-container,
    .admin-main,
    .admin-center-wrapper,
    .admin-card,
    .admin-filters-minimal,
    .gh-tabla-contenedor,
    .admin-grid-content,
    .admin-dashboard-grid,
    .cards {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .admin-center-wrapper {
        margin: 0;
    }

    .admin-dashboard-grid,
    .cards {
        grid-template-columns: 1fr;
    }

    .admin-card,
    .card {
        padding: 20px;
    }

    .admin-card-header {
        align-items: flex-start;
        flex-wrap: wrap;
        justify-content: flex-start !important;
        gap: 12px;
    }

    .admin-card-header h2,
    .admin-card-header h3 {
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .admin-grid-content {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .admin-filters-minimal {
        padding: 16px;
    }

    .admin-filter-form,
    .admin-filter-actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .admin-filter-group,
    .admin-filter-actions,
    .admin-filter-input,
    .admin-filter-select,
    .admin-filter-titulo,
    .admin-filter-autor {
        width: 100% !important;
        max-width: 100%;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    .admin-filter-actions .gh-btn-accion,
    .admin-filter-btn,
    .admin-filter-reset {
        justify-content: center;
        width: 100%;
        min-height: 44px;
        margin-left: 0;
    }

    .admin-form-control,
    .admin-card input:not([type="checkbox"]),
    .admin-card textarea,
    .admin-card select,
    .card input:not([type="checkbox"]),
    .card textarea,
    .card select {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    .admin-form-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-btn,
    .admin-btn-secondary,
    .admin-btn-primary {
        justify-content: center;
        width: 100%;
        margin-left: 0;
        box-sizing: border-box;
        text-align: center;
    }

    .gh-tabla-contenedor {
        margin-top: 22px;
        padding: 0;
        overflow: visible;
        border-radius: 12px;
    }

    .gh-tabla {
        display: block;
        min-width: 0;
        width: 100%;
        border-spacing: 0;
        table-layout: fixed;
    }

    .gh-tabla thead {
        display: none;
    }

    .gh-tabla tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .gh-tabla tr {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
        padding: 12px;
        border: 1px solid rgba(216, 180, 254, 0.12);
        border-radius: 10px;
        background: rgba(13, 13, 20, 0.94);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
        min-width: 0;
    }

    .gh-tabla th,
    .gh-tabla td {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        width: 100%;
        padding: 10px 0;
        border: 0;
        background: transparent;
        vertical-align: top;
        box-sizing: border-box;
        overflow-wrap: anywhere;
        min-width: 0;
    }

    .gh-tabla td::before {
        content: attr(data-label);
        color: var(--admin-section-accent);
        font-family: var(--font-header);
        font-size: 0.66rem;
        letter-spacing: 1px;
        text-transform: uppercase;
        line-height: 1.1;
    }

    .gh-tabla td>* {
        min-width: 0;
    }

    .gh-tabla td[colspan] {
        display: block;
        padding: 18px 0;
        text-align: center;
    }

    .gh-tabla td[colspan]::before {
        content: none;
    }

    .gh-tabla td:not([data-label])::before {
        content: none;
    }

    .gh-tabla td {
        border-bottom: 1px solid rgba(216, 180, 254, 0.08);
    }

    .gh-tabla td:last-child {
        border-bottom: 0;
    }

    .gh-tabla td[data-label="Acciones"] {
        padding-bottom: 0;
        gap: 10px;
        align-items: stretch;
    }

    .admin-table-cell-title {
        max-width: none;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .gh-tabla tr:hover td {
        background: transparent;
        box-shadow: none;
    }

    .gh-acciones-grupo,
    .gh-tabla td>div[style*="display: flex"] {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px !important;
    }

    .gh-tabla td[data-label="Acciones"] .gh-btn-accion,
    .gh-tabla td[data-label="Acciones"] form,
    .gh-tabla td[data-label="Acciones"] a {
        width: 100%;
        box-sizing: border-box;
    }

    .gh-tabla td[data-label="Acciones"] .gh-acciones-grupo {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        justify-content: stretch;
    }

    .gh-btn-accion {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        margin-left: 0;
        white-space: nowrap;
        box-sizing: border-box;
        text-align: center;
        width: 100%;
        flex: 1 1 auto;
    }

    .post-moderation-detail {
        padding: 18px !important;
    }

    .post-moderation-detail h2 {
        font-size: 1.35rem;
        overflow-wrap: anywhere;
    }

    .post-moderation-detail>div[style*="display: flex"] {
        align-items: flex-start !important;
        flex-direction: column;
        gap: 10px !important;
    }
}

@media (max-width: 640px) {
    .admin-main {
        padding-inline: 12px;
    }

    .admin-sidebar {
        width: min(88vw, 320px);
    }

    .admin-sidebar .logo {
        font-size: 1.55rem;
        margin-bottom: 22px;
    }

    .admin-sidebar a {
        min-height: 46px;
    }

    .admin-header {
        gap: 18px;
        margin-bottom: 26px;
        padding: 22px 16px;
        border-radius: 10px;
    }

    .admin-header-left {
        align-items: flex-start;
        gap: 14px;
        width: 100%;
    }

    .admin-header-icon {
        align-self: flex-start;
        margin-top: 2px;
    }

    .admin-header-icon {
        width: 42px;
        height: 42px;
        padding: 9px;
    }

    .admin-header h1 {
        font-size: 1.45rem;
        letter-spacing: 0;
        line-height: 1.12;
        overflow-wrap: anywhere;
    }

    .admin-header p {
        font-size: 0.72rem;
        letter-spacing: 1px;
        line-height: 1.35;
    }

    .admin-header-right {
        flex-direction: column;
        gap: 12px;
    }

    .admin-status-badge,
    .admin-header-right .gh-alerta,
    .admin-header-right .admin-btn,
    .admin-header-right .gh-btn-accion {
        width: 100%;
        box-sizing: border-box;
    }

    .admin-status-badge {
        flex-basis: auto;
    }

    .admin-header,
    .admin-card-header {
        align-items: flex-start;
    }

    .admin-header-right {
        align-items: flex-start;
    }

    .admin-card,
    .card {
        padding: 16px;
        border-radius: 10px;
    }

    .admin-card-header h2 {
        font-size: 1.15rem;
    }

    .admin-card-header h3 {
        font-size: 0.95rem;
    }

    .admin-dashboard-card {
        min-height: 176px;
    }

    .admin-form-group {
        margin-bottom: 18px;
    }

    .admin-form-group label {
        font-size: 0.78rem;
        line-height: 1.3;
    }

    .admin-form-control,
    .admin-filter-input {
        font-size: 0.95rem;
    }

    .gh-alerta {
        align-items: flex-start;
        line-height: 1.35;
    }

    .gh-tabla {
        min-width: 0;
        border-spacing: 0 8px;
    }

    .gh-tabla th,
    .gh-tabla td {
        padding: 10px;
        font-size: 0.85rem;
    }

    .admin-table-cell-title {
        max-width: 200px;
    }

    .gh-btn-accion {
        min-height: 36px;
        padding: 8px 10px;
        font-size: 0.66rem;
    }

    .admin-mobile-menu-button {
        bottom: calc(12px + env(safe-area-inset-bottom));
        left: 50%;
        min-width: 132px;
        min-height: 50px;
    }
}

/* Panel de usuario. */
.user-container {
    display: flex;
    min-height: 100vh;
    background: var(--gh-dark);
}

.user-sidebar {
    width: 250px;
    background: #0D0D14;
    padding: 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.user-sidebar .logo {
    font-family: var(--font-header);
    font-size: var(--fs-h2);
    margin-bottom: 30px;
    background: var(--gh-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.user-sidebar ul {
    list-style: none;
    padding: 0;
}

.user-sidebar li {
    margin-bottom: 15px;
}

.user-sidebar a {
    color: var(--gh-white);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    transition: var(--transition);
}

.user-sidebar li.active a,
.user-sidebar a:hover {
    background: var(--gh-gradient);
    box-shadow: var(--gh-glow);
}

.user-main {
    flex: 1;
    padding: 40px;
}

.panel-header {
    background: linear-gradient(90deg, rgba(106, 0, 255, 0.07) 0%, rgba(255, 0, 200, 0.07) 100%);
    padding: 35px 40px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.panel-header-right {
    display: flex;
    gap: 15px;
}

.panel-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: var(--gh-gradient);
}

.panel-header-text {
    display: flex;
    flex-direction: column;
}

.panel-header h1 {
    font-size: 2.8rem;
    margin: 0;
    line-height: 1.1;
}

.panel-header h1 span {
    background: var(--gh-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 8px rgba(255, 0, 200, 0.4));
}

.panel-header p {
    color: var(--gh-gris-claro);
    font-family: var(--font-header);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.8;
    margin: 5px 0 0 0;
}

.panel-header-icon {
    color: var(--gh-magenta);
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.status-badge {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 120px;
}

.badge-label {
    font-size: 0.65rem;
    font-family: var(--font-header);
    color: var(--gh-magenta);
    letter-spacing: 1px;
}

.badge-value {
    font-family: var(--font-header);
    font-size: 1rem;
    font-weight: 700;
    color: var(--gh-white);
}

.info-card {
    background: #111118;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    max-width: 500px;
}

.info-card h3 {
    color: var(--gh-pink-btn);
    margin-bottom: 15px;
}

.edit-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.edit-section {
    height: 100%;
}

.avatar-edit {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}

.big-avatar {
    width: 100px;
    height: 100px;
    font-size: 2rem;
    overflow: hidden;
}

.big-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.help-text {
    font-size: 0.8rem;
    color: #9ca3af;
    margin-top: 5px;
}

.help-text-security {
    font-size: 0.9rem;
    color: var(--gh-magenta);
    margin-bottom: 15px;
}

.form-actions {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
    margin-left: 2rem;
}

.avatar-controls {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.info-card-header {

    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.info-card-header .big-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--gh-magenta);
}

.info-card-header .big-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.8fr);
    gap: 24px;
    align-items: stretch;
}

.profile-hero-card,
.profile-side-panel {
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
        rgba(13, 13, 20, 0.94);
    border: 1px solid rgba(216, 180, 254, 0.12);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}

.profile-hero-card {
    padding: 30px;
    position: relative;
    overflow: hidden;
}

.profile-hero-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--gh-gradient);
}

.profile-hero-card::after {
    content: '';
    position: absolute;
    width: 210px;
    height: 210px;
    right: -80px;
    top: -90px;
    background: rgba(255, 0, 200, 0.14);
    border-radius: 999px;
    filter: blur(22px);
    pointer-events: none;
}

.profile-hero-main {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
}

.profile-avatar-frame {
    width: 118px;
    height: 118px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    overflow: hidden;
    background:
        linear-gradient(var(--gh-dark), var(--gh-dark)) padding-box,
        var(--gh-gradient) border-box;
    border: 2px solid transparent;
    box-shadow: 0 0 28px rgba(255, 0, 200, 0.18);
}

.profile-avatar-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar-frame span {
    font-family: var(--font-header);
    font-size: 3rem;
    font-weight: 900;
    background: var(--gh-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.profile-kicker {
    color: var(--gh-magenta);
    font-family: var(--font-header);
    font-size: 0.72rem;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.profile-identity h2 {
    margin: 6px 0 6px;
    font-size: 2rem;
    line-height: 1.1;
}

.profile-identity p {
    margin: 0;
    color: #c7c9d4;
    font-size: 0.95rem;
}

.profile-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    position: relative;
    z-index: 1;
}

.profile-detail-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 74px;
    padding: 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.profile-detail-item i {
    width: 22px;
    height: 22px;
    color: var(--gh-pink-btn);
    flex-shrink: 0;
}

.profile-detail-item span {
    color: var(--gh-gris-claro);
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.profile-detail-item strong {
    color: var(--gh-white);
    display: block;
    font-size: 0.94rem;
    margin-top: 2px;
}

.profile-side-panel {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.profile-stat-card {
    min-height: 88px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(216, 180, 254, 0.12);
    transition: var(--transition);
}

.profile-stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 0, 200, 0.28);
    box-shadow: 0 12px 28px rgba(255, 0, 200, 0.12);
}

.profile-stat-card span {
    color: var(--gh-white);
    font-family: var(--font-header);
    font-size: 1.7rem;
    font-weight: 900;
}

.profile-stat-card p {
    color: var(--gh-gris-claro);
    margin: 4px 0 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.profile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
}

.profile-action-primary,
.profile-action-secondary {
    min-height: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--gh-white);
    font-family: var(--font-header);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    transition: var(--transition);
}

.profile-action-primary {
    background: var(--gh-gradient);
    box-shadow: 0 10px 24px rgba(255, 0, 200, 0.18);
}

.profile-action-secondary {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-action-primary:hover,
.profile-action-secondary:hover {
    transform: translateY(-2px);
}

.profile-action-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.profile-action-disabled:hover {
    transform: none;
}

.profile-action-primary i,
.profile-action-secondary i {
    width: 17px;
    height: 17px;
}

@media (max-width: 980px) {
    .profile-overview {
        grid-template-columns: 1fr;
    }

    .profile-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .profile-hero-main {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-avatar-frame {
        width: 96px;
        height: 96px;
        border-radius: 18px;
    }

    .profile-identity h2 {
        font-size: 1.55rem;
    }

    .profile-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Header principal y navegación. */
header#gh-main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem 1%;
    background-color: var(--gh-dark);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    margin-bottom: 20vh;
}

header#gh-main-header.header-hidden {
    transform: translate3d(0, -100%, 0) !important;
}

.header-spacer-desktop {
    height: 84px;
    width: 100%;
    display: block; /* Aseguramos que se muestre */
}

@media (max-width: 992px) {
    .header-spacer-desktop {
        display: block !important; /* Mantenemos el escudo activo, NO lo escondemos */
        height: 70px !important;   /* La altura exacta de tu header en móvil */
    }
}

.header-contenedor {
    width: 95%;
    margin: 0 auto;
}

.header-fila {
    min-height: 84px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-logo-imagen a {
    display: block;
    text-decoration: none;
}

.header-logo img {
    width: 58px;
    height: auto;
    display: block;
}

.header-logo-texto {
    display: block;
    text-decoration: none;
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.04em;

    background: linear-gradient(90deg,
    #a855f7,
    #ec4899,
    #a855f7);
    background-size: 200% auto;

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.header-logo-texto:hover {
    animation: gradientFlow 3s linear infinite;
}

@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

.header-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex: 1;
}

.header-nav a {
    position: relative;
    text-decoration: none;
    color: #d1d5db;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    transition: color 0.25s ease, text-shadow 0.25s ease;
}

.header-nav a:hover,
.header-nav a.active {
    color: #d8b4fe;
    text-shadow: 0 0 14px rgba(216, 180, 254, 0.45);
}

.header-nav a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #a855f7 0%, #ec4899 100%);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.45);
}

.header-usuario {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.header-usuario>a {
    text-decoration: none;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    transition: all 0.25s ease;
}

.header-usuario>a:first-child {
    color: #e5e7eb;
}

.header-usuario>a:first-child:hover {
    color: #d8b4fe;
}

.header-usuario>a:last-child {
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 12px;
    background: linear-gradient(90deg, #7c3aed 0%, #db2777 100%);
    box-shadow: 0 8px 18px rgba(168, 85, 247, 0.22);
}

.header-usuario>a:last-child:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(168, 85, 247, 0.32);
}

.header-admin-btn {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 10px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #d1d5db;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.25s ease;
    margin-right: 4px;
}

.header-admin-btn i {
    width: 17px;
    height: 17px;
    color: #a855f7;
    transition: all 0.25s ease;
}

.header-admin-btn span {
    margin-top: 0;
}

.header-admin-btn:hover {
    color: #ffffff;
    background: rgba(168, 85, 247, 0.08);
    border-color: rgba(168, 85, 247, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.header-admin-btn:hover i {
    color: #d8b4fe;
    transform: translateY(-1px);
}

.header-admin-btn.active {
    color: #ffffff;
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: inset 0 0 10px rgba(168, 85, 247, 0.05);
}

.header-admin-btn.active i {
    color: #d8b4fe;
}

.header-auth-group {
    display: flex;
    align-items: center;
    gap: 18px;
    background: rgba(255, 255, 255, 0.03);
    padding: 6px 6px 6px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.header-auth-group:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(168, 85, 247, 0.25);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.header-perfil-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

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

.header-avatar {
    width: 44px;

    height: 44px;
    border-radius: 12px;

    background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.header-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    pointer-events: none;
}

.header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-avatar span {
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
}

.header-datos {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header-nombre {
    color: #ffffff;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.header-rol {
    color: #a855f7;
    font-size: 0.7rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 2px;
}

.header-logout-btn {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #f87171;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
}

.header-logout-btn:hover {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}

.header-logout-btn svg {
    width: 18px;
    height: 18px;
}

/*====================================================================/*
/* Footer principal - Refactorizado para continuidad */
/*===================================================================*/
footer {
    background: transparent;
    color: #ffffff;
    padding: 80px 0 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-family: 'Rajdhani', sans-serif;
    position: relative;
    z-index: 1;
}

.footer-contenido {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-superior {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
}

.footer-marca-encabezado {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.footer-logo {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    font-weight: 900;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.footer-nombre {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 1px;
    background: var(--gh-gradient);
    -webkit-background-clip: text;
    color: transparent;
}

.footer-texto {
    color: #8e9199;
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 20px;
    max-width: 280px;
}

.footer-estadisticas {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #a855f7;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.status-dot {
    width: 6px;
    height: 6px;
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 8px #22c55e;
}

.footer-columna h3 {
    margin: 0 0 20px;
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.9;
}

.footer-columna ul {
    list-style: none;
    padding: 0;
}

.footer-columna li {
    margin-bottom: 10px;
}

.footer-columna a {
    text-decoration: none;
    color: #8e9199;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.footer-columna a:hover {
    color: #d946ef;
    transform: translateX(5px);
}

.footer-inferior {
    margin-top: 50px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #555;
}

.footer-destacados {
    display: flex;
    gap: 20px;
}

.footer-destacados span {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
}
/*===========================================
FIN DEL FOOTER
=============================================*/

.nav-link {
    font-family: var(--font-header);
    color: var(--gh-white);
    text-decoration: none;
    margin: 0 15px;
    font-size: var(--fs-body);
    transition: 0.3s;
}

.nav-link:hover {
    color: var(--gh-magenta);
}

.auth-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-header);
    font-size: 1rem;
    font-weight: 550;
    color: var(--gh-white);
}

.form-group input {
    width: 100%;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--gh-white);
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 1rem;
    box-sizing: border-box;
    transition: var(--transition);
}

.form-group input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--gh-magenta);
    box-shadow: 0 0 15px rgba(255, 0, 200, 0.15);
}

.error {
    color: #ff4444;
    font-size: 0.75rem;
    margin-top: 5px;
    display: block;
}

.auth-footer {
    margin-top: 20px;
    text-align: center;
}

.auth-footer a {
    color: var(--gh-white);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
}

.auth-footer a:hover {

    font-weight: 700;
}

.logo {
    font-family: var(--font-header);
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--gh-magenta);
    text-decoration: none;
}

.logo span {
    color: var(--gh-white);
}

.checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.checkbox-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 0;
    cursor: pointer;
    font-size: 0.85rem;
    user-select: none;
    font-family: var(--font-body);
}

.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    transition: var(--transition);
}

.checkbox-container:hover input~.checkmark {
    border-color: var(--gh-magenta);
}

.checkbox-container input:checked~.checkmark {
    background-color: var(--gh-magenta);
    border-color: var(--gh-magenta);
    box-shadow: 0 0 5px var(--gh-magenta);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-container input:checked~.checkmark:after {
    display: block;
}

.checkbox-container .checkmark:after {
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.admin-form-group {
    margin-bottom: 25px;
}

.admin-form-group label {
    display: block;
    font-family: var(--font-header);
    color: var(--gh-white);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.admin-form-control {
    width: 90%;
    background: rgba(8, 8, 15, 0.72);
    border: 1px solid rgba(216, 180, 254, 0.14);
    color: var(--gh-white);
    padding: 12px 15px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: var(--transition);
}

.admin-form-control option {
    background-color: #1a1a24;
    color: white;
}

.admin-form-control:focus {
    outline: none;
    border-color: var(--admin-section-accent-border);
    box-shadow: 0 0 16px var(--admin-section-accent-glow);
    background: rgba(18, 18, 30, 0.9);
}

.admin-btn {
    font-family: var(--font-header);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 10px 20px;
    font-size: 0.95rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.admin-btn-primary {
    background: var(--gh-gradient);
    color: #fff;
    box-shadow: 0 4px 15px var(--admin-section-accent-glow);
}

.admin-btn-primary:hover {
    box-shadow: 0 0 18px var(--admin-section-accent-glow);
    transform: translateY(-2px);
}

.admin-btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--gh-white);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-left: 10px;
    padding: 8px 16px;
    font-size: 0.85rem;
}

.admin-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.panel-header {
    margin-bottom: 2.5rem;
}

.user-cancel-btn-edit {
    background: rgba(255, 255, 255, 0.05);
    color: var(--gh-white);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-left: 10px;
    height: 2rem;
}

.user-cancel-btn-edit:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.gh-tabla-contenedor {
    margin-top: 30px;
    overflow-x: auto;
    background: rgba(9, 10, 18, 0.48);
    border: 1px solid rgba(216, 180, 254, 0.1);
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.gh-tabla {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
}

.gh-tabla th {
    font-family: var(--font-header);
    color: var(--admin-section-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 15px;
    text-align: left;
    border-bottom: 2px solid var(--admin-section-accent-border);
    position: relative;
}

.gh-tabla th a {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -15px;
    padding: 15px;
    transition: var(--transition);
    cursor: pointer;
}

.gh-tabla th a:hover {
    color: var(--gh-white);
    background: var(--admin-section-accent-soft);
    filter: drop-shadow(0 0 5px var(--admin-section-accent));
}

.gh-tabla th a i {
    transition: transform 0.2s ease;
}

.gh-tabla th a:hover i {
    transform: translateY(-2px);
}

.user-table-icon-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.user-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    font-family: var(--font-header);
    font-weight: 700;
    letter-spacing: 0.6px;
}

.user-count-badge i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.user-count-badge-comentarios {
    color: var(--gh-gris-claro);
}

.user-count-badge-likes {
    color: var(--gh-magenta);
}

.gh-tabla td {
    background: rgba(17, 17, 26, 0.9);
    padding: 15px;
    color: var(--gh-white);
    border: 1px solid rgba(216, 180, 254, 0.06);
}

.gh-tabla tr td:first-child {
    border-radius: 8px 0 0 8px;
    border-right: none;
}

.gh-tabla tr td:last-child {
    border-radius: 0 8px 8px 0;
    border-left: none;
}

.gh-tabla tr:hover td {
    background: rgba(22, 22, 34, 0.96);
    box-shadow: inset 0 0 18px var(--admin-section-accent-soft);
    border-color: var(--admin-section-accent-border);
}

.admin-center-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.admin-breadcrumb {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.admin-breadcrumb h1 {
    margin: 0;
}

.admin-icon-sm {
    width: 14px;
    height: 14px;
}

.admin-icon-md {
    width: 24px;
    height: 24px;
}

.admin-btn-icon-only {
    padding: 10px;
    margin: 0;
}

.admin-table-cell-title {
    max-width: 300px;
    font-weight: 500;
}

.admin-table-cell-bold {
    font-weight: bold;
}

.admin-table-cell-muted {
    color: var(--gh-gris-claro);
    font-size: 0.85rem;
}

.admin-main .gh-text-magenta {
    color: var(--admin-section-accent);
}

.admin-table-empty {
    text-align: center;
    padding: 2rem;
    color: var(--gh-gris-claro);
}

.admin-inline-form {
    display: inline;
}

.admin-card-link {
    text-decoration: none;
    display: block;
    color: inherit;
}

.admin-card-header {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(216, 180, 254, 0.14);
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-card-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--gh-magenta);
}

.admin-card-header h3 {
    margin: 0;
    color: var(--admin-section-accent);
    font-family: var(--font-header);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.admin-form-footer {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
    margin-top: 25px;

    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.gh-btn-accion {
    padding: 8px 14px;
    border-radius: 6px;
    font-family: var(--font-header);
    font-size: 0.7rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    display: inline-block;
    text-transform: uppercase;
}

.gh-btn-edit {
    background-color: #f59e0b;
    color: #000;
    margin-right: 5px;
}

.gh-btn-delete {
    background-color: #ef4444;
    color: #fff;
}

.gh-btn-view {
    background: var(--gh-gradient);
    color: #fff;
    margin-left: 5px;
}

.gh-btn-accion:hover {
    transform: translateY(-2px);
    filter: brightness(1.2);
}

.gh-alerta {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 25px;
    font-family: var(--font-body);
    font-weight: 600;
}

.gh-alerta-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid #22c55e;
    color: #4ade80;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.2);
    display: flex;
    gap: 1em;
}

/* Hero Refactorizado para Parallax Avanzado */
.home-hero {
    position: relative;
    height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
    overflow: hidden;
    background: #05060a;
}

.hero-parallax-bg {
    position: absolute;
    top: -15%;
    left: -5%;
    width: 110%;
    height: 130%;
    background: url("../images/portadahome.gif");
    background-size: cover;
    background-position: center;
    z-index: 0;
    will-change: transform;
    filter: brightness(0.8) contrast(1.1);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(5, 6, 10, 0.3) 0%, rgba(5, 6, 10, 0.85) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    will-change: transform;
}

/* Transición suave del Hero al fondo global */
.home-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 250px;
    background: linear-gradient(to bottom, transparent, #05060a);
    z-index: 3;
}

.hero-title {
    font-size: 4rem;
    font-weight: 900;
    text-transform: uppercase;

    background: linear-gradient(90deg, #a855f7, #ec4899, #a855f7);
    background-size: 200% auto;

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    animation: gradientFlow 4s linear infinite;
}

@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

.hero-subtitle {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto 2rem;
    color: #ccc;
}

.btn-pro {
    background: var(--gh-gradient);
    color: white;
    font-family: var(--font-header);
    font-weight: 800;
    font-size: var(--fs-btn);
    padding: 16px 40px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    letter-spacing: 2px;
    box-shadow: 0 10px 30px rgba(255, 0, 200, 0.25);
    position: relative;
    overflow: hidden;
}

.btn-pro:hover {
    box-shadow: 0 15px 40px rgba(255, 0, 200, 0.4);
    transform: translateY(-5px) scale(1.02);
}

.btn-pro::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(45deg);
    transition: 0.5s;
    pointer-events: none;
}

.btn-pro:hover::after {
    left: 120%;
}

/*=========================================================================================================================
NOTICIAS DESTACADAS HOME(CARRUSEL)
==================================================================================================================================================*/
.news-section {
    padding: 120px 5%;
    position: relative;
    background: transparent;
    overflow: hidden;
}

.news-container {
    display: flex;
    justify-content: flex-start;
    gap: 25px;
    padding: 20px 0 40px 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    width: 100%;
}

.news-card {
    flex: 0 0 340px;
    height: 520px;
    /* Aumentado ligeramente para que quepa la imagen + texto */
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)), rgba(13, 13, 20, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(216, 180, 254, 0.15);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/*Imagen en la parte superior */
.card-img {
    width: 100%;
    height: 180px;
    /* Altura de la imagen */
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    /* Que no se encoja */
}

.stretched-link::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    /* Cubre la card */
}

.news-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--gh-gradient);
    opacity: 0.9;
    transition: all 0.4s ease;
    z-index: 2;
    /* Por encima de la imagen */
}

.news-card:hover {
    transform: translateY(-15px) scale(1.02);
    border-color: rgba(255, 0, 200, 0.4);
    background: rgba(22, 18, 35, 0.85);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 0, 200, 0.2);
}

.card-content {
    padding: 25px;
    /* Reducido un poco para equilibrar con la imagen */
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

/* Ajustes de wrappers para que el contenido no se pise */
.title-wrapper {
    height: 3.5rem;
    margin-bottom: 10px;
    overflow: hidden;
}

.desc-wrapper {
    height: 4.5rem;
    overflow: hidden;
    margin-bottom: 15px;
}

.card-header-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.card-tag {
    background: var(--gh-magenta);
    color: white;
    font-size: 0.65rem;
    padding: 2px 10px;
    border-radius: 3px;
    position: relative;
    /* Para que quede por encima del link */
    z-index: 2;
}

.card-title {
    font-size: 1.15rem;
    color: white;
    line-height: 1.4;
    margin: 0;
}

.card-description {
    font-size: 0.85rem;
    color: #888bb0;
    line-height: 1.6;
    margin: 0;
}

.card-footer {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-read {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: white;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: 0.3s;
}

/* Sincronizamos el hover de la card con el botón */
.news-card:hover .btn-read {
    background: var(--gh-magenta);
    border-color: var(--gh-magenta);
    box-shadow: 0 0 20px rgba(255, 0, 200, 0.4);
}

.news-container::-webkit-scrollbar {
    height: 8px;
    display: block;
}

.news-container::-webkit-scrollbar-thumb {
    background: var(--gh-magenta);
    border-radius: 10px;
}

/* --- ACTIVAR Y ESTILIZAR LA BARRA DE NAVEGACIÓN DE NOTICIAS --- */

.news-container {
    display: flex;
    justify-content: flex-start;
    gap: 25px;
    padding: 20px 0 40px 0;
    /* Espacio abajo para que la barra no pise las cards */
    overflow-x: auto;
    /* Permite el scroll */
    scroll-snap-type: x mandatory;

    /* CAMBIO CLAVE: Cambiamos 'none' por 'thin' para que se vea en Firefox */
    scrollbar-width: thin;
    scrollbar-color: #e91e63 rgba(255, 255, 255, 0.03);

    width: 100%;
}

/* Personalización para Chrome, Safari y Edge (Webkit) */
.news-container::-webkit-scrollbar {
    height: 10px;
    /* Un poco más de grosor para que sea fácil de clicar */
    display: block !important;
    /* Forzamos que se muestre */
}

.news-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    /* Fondo oscuro casi invisible */
    border-radius: 10px;
    margin: 0 50px;
    /* Margen para que la barra no pegue en los bordes de la pantalla */
}

.news-container::-webkit-scrollbar-thumb {
    background: #e91e63;
    /* magenta neón */
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(233, 30, 99, 0.6);
    /* Brillo neón en la barra */
    border: 2px solid #0d0d14;
    /* Un borde oscuro para que resalte */
    cursor: pointer;
}

.news-container::-webkit-scrollbar-thumb:hover {
    background: #ff2d7a;
    /* Color un poco más claro al pasar el ratón */
    box-shadow: 0 0 20px rgba(233, 30, 99, 0.8);
}

/*=============================================================================
                                    FIN
==================================================================================*/
/* Foro: listado y detalle de publicaciones. */
.foro {
    padding: 32px 5%;
}

.foro-contenedor {
    max-width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 20% 1fr;
    gap: 25px;
    align-items: start;
}

.foro-lateral {
    position: sticky;
    top: 120px;
}

.bloque-lateral {
    background: #111118;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.titulo-bloque {
    margin: 0;
    padding: 18px 20px;
    background: linear-gradient(90deg, rgba(106, 0, 255, 0.22), rgba(255, 0, 200, 0.18));
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: clamp(1rem, 1.5vw, 1.4rem);
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.2;
}

.boton-crear-categoria {
    display: inline-block;
    width: 100%;
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--gh-gradient);
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-family: var(--font-header);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    transition: var(--transition);
    box-sizing: border-box;
}

.boton-crear-categoria:hover {
    box-shadow: var(--gh-glow);
    transform: translateY(-2px);
}

.titulo-bloque-link {
    text-decoration: none;
}

.lista-categorias {
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: var(--transition);
}

.lista-categorias-cerrada {
    max-height: 260px;
    overflow: hidden;
}

.lista-categorias-abierta {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 6px;
}

.lista-categorias-abierta::-webkit-scrollbar {
    width: 6px;
}

.lista-categorias-abierta::-webkit-scrollbar-thumb {
    background: var(--gh-magenta);
    border-radius: 999px;
}

.categoria-activa a {
    background: var(--gh-gradient);
    color: #fff !important;
    box-shadow: var(--gh-glow);
}

.lista-categorias {
    list-style: none;
    margin: 0;
    padding: 0;
}

.categoria-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.categoria-item a {
    display: block;
    padding: 15px 18px;
    color: #d1d5db;
    text-decoration: none;
    transition: var(--transition);
}

.categoria-item a:hover {
    background: rgba(255, 255, 255, 0.04);
}

.categoria-oculta {
    display: none;
}

.lista-categorias-abierta .categoria-oculta {
    display: block;
}

.boton-mostrar-categorias {
    width: 100%;
    padding: 12px;
    background: transparent;
    border: none;
    color: var(--gh-magenta);
    font-family: var(--font-header);
    font-weight: 700;
    cursor: pointer;
}

.foro-principal {
    background: #111118;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 26px;
}

.foro-cabecera {
    margin-bottom: 22px;
}

.foro-cabecera h1 {
    color: var(--gh-magenta);
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1;
}

.foro-posts {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.boton-crear {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 4px;
    padding: 12px 18px;
    border-radius: 8px;
    background: var(--gh-gradient);
    color: #fff;
    text-decoration: none;
    font-family: var(--font-header);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    transition: var(--transition);
}

.boton-crear:hover {
    box-shadow: var(--gh-glow);
    transform: translateY(-2px);
}

.acciones-publicacion {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0;
}

.acciones-publicacion form {
    margin: 0;
}

.acciones-publicacion .post-accion-editar,
.acciones-publicacion .post-accion-eliminar {
    margin-top: 0;
}

.post-accion-eliminar {
    display: inline-block;
    margin-top: 14px;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-family: var(--font-header);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.post-accion-eliminar:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.sin-posts {
    margin: 0;
    color: #9ca3af;
}

.enlace-posts {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    color: inherit;
    text-decoration: none;
}

.post-card {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 22px;
    background: #0d0d14;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: var(--transition);
}

.post-card:hover {
    border-color: rgba(255, 0, 200, 0.28);
    box-shadow: 0 0 18px rgba(255, 0, 200, 0.08);
}

.post-titulo {
    margin: 0 0 10px 0;
    color: var(--gh-magenta);
}

.post-respuestas {
    min-width: 120px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #cbd5e1;
    font-size: 0.95rem;
    flex-direction: column;
    gap: 10px;
}

.post-respuestas strong {
    color: var(--gh-magenta);
    margin-right: 4px;
}

.post-ver-mas {
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--gh-gradient);
    color: #fff;
    text-decoration: none;
    font-family: var(--font-header);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: var(--transition);
    cursor: pointer;
}

.post-ver-mas:hover {
    box-shadow: var(--gh-glow);
    transform: translateY(-2px);
}

.foro-busqueda {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.foro-busqueda-input {
    flex: 1;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #0d0d14;
    color: var(--gh-white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    box-sizing: border-box;
}

.foro-busqueda-input::placeholder {
    color: #9ca3af;
}

.foro-busqueda-input:focus {
    outline: none;
    border-color: var(--gh-magenta);
    box-shadow: 0 0 10px rgba(255, 0, 200, 0.15);
}

.foro-busqueda-boton {
    padding: 14px 18px;
    border: none;
    border-radius: 10px;
    background: var(--gh-gradient);
    color: #fff;
    font-family: var(--font-header);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.foro-busqueda-boton:hover {
    box-shadow: var(--gh-glow);
    transform: translateY(-2px);
}

.modal-login-foro {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.modal-login-foro.activo {
    display: flex;
}

.modal-login-caja {
    background: #111118;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 30px;
    max-width: 420px;
    text-align: center;
    box-shadow: var(--gh-glow);
}

.modal-login-caja h2 {
    color: var(--gh-magenta);
}

.modal-login-caja p {
    color: #d1d5db;
}

.modal-login-botones {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 24px 0;
}

.modal-btn {
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-family: var(--font-header);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.modal-btn-registro {
    background: var(--gh-gradient);
    color: #fff;
}

.modal-btn-login {
    background: #f59e0b;
    color: #111;
}

.modal-cerrar {
    background: transparent;
    color: #9ca3af;
    border: none;
    cursor: pointer;
}

.autor-admin {
    margin: 4px 0 10px 0;
    color: #facc15;
    font-family: var(--font-header);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.post-show {
    padding: 32px;
}

.post-show-contenedor {
    max-width: 65%;
    margin: 0 auto;
    background: #111118;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 30px;
}

.post-show-cabecera {
    margin-bottom: 22px;
}

.post-show-categoria {
    display: inline-block;
    margin: 10px 0 14px 0;
    padding: 6px 12px;
    border-radius: 40px;
    background: rgba(255, 0, 200, 0.12);
    color: var(--gh-magenta);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.post-show-titulo {
    margin: 0 0 12px 0;
    color: var(--gh-magenta);
    font-size: 2.2rem;
    line-height: 1.1;
}

.post-show-meta {
    color: #9ca3af;
    font-size: 0.95rem;
}

.post-accion-editar {
    display: inline-block;
    margin-top: 14px;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: #f59e0b;
    color: #fff;
    font-family: var(--font-header);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.post-accion-editar:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.post-show-contenido img {
    max-width: 100%;
    max-height: 420px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 20px auto;
    border-radius: 5px;
}

.post-show-contenido p {
    margin: 0 0 14px 0;
}

.post-show-linea {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 30px 0;
}

.comentarios-titulo {
    margin-bottom: 20px;
    color: var(--gh-white);
    font-size: 1.5rem;
}

.comentario-form {
    margin-bottom: 30px;
}

.comentario-textarea {
    width: 100%;
    min-height: 120px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #0d0d14;
    color: var(--gh-white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    resize: none;
    box-sizing: border-box;
    margin-bottom: 14px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.comentario-textarea:focus {
    outline: none;
    border-color: var(--gh-magenta);
    box-shadow: 0 0 10px rgba(255, 0, 200, 0.15);
}

.comentario-boton {
    padding: 12px 18px;
    border: none;
    border-radius: 8px;
    background: var(--gh-gradient);
    color: #fff;
    font-family: var(--font-header);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
}

.comentario-boton:hover {
    box-shadow: var(--gh-glow);
    transform: translateY(-2px);
}

.sin-comentarios {
    color: #9ca3af;
    margin: 0;
}

.comentarios-lista {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.comentario-card {
    background: #0d0d14;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 18px;
}

.comentario-meta {
    margin: 0 0 10px 0;
    color: #9ca3af;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.comentario-meta strong {
    color: var(--gh-white);
}

.comentario-contenido {
    margin: 0;
    color: #e5e7eb;
    line-height: 1.6;
}

/* Formularios de creación y edición de posts. */
.crear-post {
    padding: 32px 5%;
}

.crear-post-contenedor {
    width: 70%;
    margin: 0 auto;
    background: #111118;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.crear-post-cabecera {
    margin-bottom: 28px;
}

.crear-post-cabecera h1 {
    margin: 0 0 10px 0;
    color: var(--gh-magenta);
    font-size: 2.1rem;
    line-height: 1.1;
}

.crear-post-cabecera p {
    color: #9ca3af;
    font-size: 0.95rem;
}

.crear-post-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.crear-campo {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.crear-campo label {
    color: var(--gh-white);
    font-family: var(--font-header);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.crear-input,
.crear-select {
    width: 100%;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #0d0d14;
    color: var(--gh-white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    box-sizing: border-box;
}

.crear-input:focus,
.crear-select:focus {
    outline: none;
    border-color: var(--gh-magenta);
    box-shadow: 0 0 10px rgba(255, 0, 200, 0.15);
}

.crear-select option {
    background: #111118;
    color: var(--gh-white);
}

.crear-editor {
    min-height: 220px;
    border-radius: 10px;
    overflow: hidden;
}

.crear-editor .ql-toolbar.ql-snow {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: none;
    background: #14141d;
}

.crear-editor .ql-container.ql-snow {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #0d0d14;
    color: var(--gh-white);
    font-family: var(--font-body);
    min-height: 220px;
}

.crear-editor .ql-editor {
    min-height: 220px;
    color: var(--gh-white);
    font-size: 0.95rem;
    line-height: 1.7;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.crear-editor .ql-picker {
    color: #d1d5db;
}

.crear-boton {
    align-self: flex-start;
    padding: 12px 20px;
    border-radius: 8px;
    background: var(--gh-gradient);
    color: #fff;
    font-family: var(--font-header);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition);
}

.crear-boton:hover {
    box-shadow: var(--gh-glow);
    transform: translateY(-2px);
}

.admin-filters-minimal {
    margin-bottom: 30px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
        rgba(10, 10, 16, 0.7);
    border: 1px solid rgba(216, 180, 254, 0.1);
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.admin-filter-form {
    display: flex;
    align-items: center;
    gap: 1em;
    flex-wrap: wrap;
}

.admin-filter-group {
    position: relative;
}

.admin-filter-input {
    background: rgba(8, 8, 15, 0.72);
    border: 1px solid rgba(216, 180, 254, 0.15);
    color: white;
    padding: 10px 12px 10px 38px;
    border-radius: 8px;
    font-size: 0.85rem;
    outline: none;
    transition: all 0.3s ease;
}

.admin-filter-select {
    width: 15em;
    cursor: pointer;
    appearance: none;
    padding-left: 38px !important;
    padding-right: 30px;
}

.admin-filter-titulo {
    width: 37.5rem;
    margin-right: 2em;
}

.admin-filter-autor {
    width: 20em;
    margin-right: 2em;
}

.admin-filter-input:focus,
.admin-filter-select:focus {
    border-color: var(--admin-section-accent-border);
    background: rgba(18, 18, 30, 0.9);
}

.admin-filter-icon-left {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--admin-section-accent);
    pointer-events: none;
}

.admin-filter-icon-right {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--admin-section-accent);
    pointer-events: none;
}

.admin-filter-select,
.admin-filter-input select,
.admin-filter-select option,
.admin-filter-input option {
    background-color: #111118 !important;
    color: var(--gh-white) !important;
    color-scheme: dark;
}

.admin-filter-input:focus {
    border-color: var(--admin-section-accent-border) !important;
    box-shadow: 0 0 14px var(--admin-section-accent-glow);
    outline: none;
    background: var(--admin-section-accent-soft);
}

.admin-filter-select option:hover,
.admin-filter-input option:hover,
.admin-filter-select option:checked {
    background-color: var(--gh-magenta) !important;
    color: white !important;
}

.admin-filter-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.admin-filter-btn {
    padding: 10px 22px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.admin-filter-reset {
    color: var(--gh-magenta);
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
}

.admin-filter-reset:hover {
    transform: scale(1.1);
}

.crear-campo {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.crear-campo label {
    color: var(--gh-white);
    font-family: var(--font-header);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.crear-input,
.crear-select {
    width: 100%;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #0d0d14;
    color: var(--gh-white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    box-sizing: border-box;
}

.crear-input:focus,
.crear-select:focus {
    outline: none;
    border-color: var(--gh-magenta);
    box-shadow: 0 0 10px rgba(255, 0, 200, 0.15);
}

.crear-select option {
    background: #111118;
    color: var(--gh-white);
}

.crear-editor {
    min-height: 220px;
    border-radius: 10px;
    overflow: hidden;
}

.crear-editor .ql-toolbar.ql-snow {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: none;
    background: #14141d;
}

.crear-editor .ql-container.ql-snow {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #0d0d14;
    color: var(--gh-white);
    font-family: var(--font-body);
    min-height: 220px;
}

.crear-editor .ql-editor {
    min-height: 220px;
    color: var(--gh-white);
    font-size: 0.95rem;
    line-height: 1.7;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.crear-editor .ql-editor.ql-blank::before {
    color: #6b7280;
    font-style: normal;
}

.crear-editor .ql-stroke {
    stroke: #d1d5db;
}

.crear-editor .ql-fill {
    fill: #d1d5db;
}

.crear-editor .ql-picker {
    color: #d1d5db;
}

.crear-boton {
    align-self: flex-start;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    background: var(--gh-gradient);
    color: #fff;
    font-family: var(--font-header);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition);
}

.crear-boton:hover {
    box-shadow: var(--gh-glow);
    transform: translateY(-2px);
}

.crear-categoria {
    padding: 32px 5%;
}

.crear-categoria-contenedor {
    max-width: 700px;
    margin: 0 auto;
    background: #111118;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.crear-categoria-cabecera {
    margin-bottom: 28px;
}

.crear-categoria-cabecera h1 {
    margin: 0 0 10px 0;
    color: var(--gh-magenta);
    font-size: 2rem;
    line-height: 1.1;
}

.crear-categoria-cabecera p {
    margin: 0;
    color: #9ca3af;
    font-size: 0.95rem;
}

.crear-categoria-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.crear-categoria-errores {
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

.crear-categoria-errores ul {
    margin: 0;
    padding-left: 18px;
}

.crear-categoria-boton {
    align-self: flex-start;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    background: var(--gh-gradient);
    color: #fff;
    font-family: var(--font-header);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition);
}

.crear-categoria-boton:hover {
    box-shadow: var(--gh-glow);
    transform: translateY(-2px);
}

.categorias-foro {
    padding: 32px 5%;
}

.categorias-foro-contenedor {
    max-width: 900px;
    margin: 0 auto;
    background: #111118;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.categorias-foro-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
}

.categorias-foro-cabecera h1 {
    margin: 0 0 8px 0;
    color: var(--gh-magenta);
    font-size: 2rem;
}

.categorias-foro-cabecera p {
    margin: 0;
    color: #9ca3af;
}

.categorias-foro-boton {
    display: inline-block;
    padding: 12px 18px;
    border-radius: 8px;
    background: var(--gh-gradient);
    color: #fff;
    text-decoration: none;
    font-family: var(--font-header);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition);
    white-space: nowrap;
}

.categorias-foro-boton:hover {
    box-shadow: var(--gh-glow);
    transform: translateY(-2px);
}

.categorias-foro-alerta {
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #86efac;
}

.categorias-foro-vacio {
    margin: 0;
    color: #9ca3af;
}

.categorias-foro-lista {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.categoria-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: #0d0d14;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.categoria-card h2 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--gh-white);
}

.categoria-card-acciones {
    display: flex;
    align-items: center;
    gap: 10px;
}

.categoria-card-acciones form {
    margin: 0;
}

.categoria-btn {
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-family: var(--font-header);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
}

.categoria-btn-editar {
    background: #f59e0b;
    color: #111;
}

.categoria-btn-eliminar {
    background: #ef4444;
    color: #fff;
}

.categoria-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.guias {
    padding: 32px 5%;
}

.guias-contenedor {
    max-width: 90%;
    margin: 0 auto;
}

.guias-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    margin-bottom: 28px;
}

.guias-cabecera h1 {
    margin: 0 0 8px 0;
    color: var(--gh-magenta);
    font-size: 2.2rem;
    line-height: 1;
}

.guias-cabecera p {
    margin: 0;
    color: #9ca3af;
}

.sin-guias {
    color: #9ca3af;
}

.guias-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.guia-card {
    background: #111118;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
    transition: var(--transition);
}

.guia-card:hover {
    border-color: rgba(255, 0, 200, 0.28);
    box-shadow: 0 0 18px rgba(255, 0, 200, 0.08);
    transform: translateY(-3px);
}

.guia-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.guia-imagen {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0d0d14;
    overflow: hidden;
}

.guia-imagen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.guia-sin-imagen {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(106, 0, 255, 0.25), rgba(255, 0, 200, 0.18));
    color: #9ca3af;
}

.guia-info {
    padding: 18px;
}

.guia-juego {
    display: inline-block;
    margin: 0 0 10px 0;
    padding: 5px 10px;
    border-radius: 40px;
    background: rgba(255, 0, 200, 0.12);
    color: var(--gh-magenta);
    font-size: 0.75rem;
    font-weight: 700;
}

.guia-titulo {
    margin: 0 0 10px 0;
    color: var(--gh-white);
    font-size: 1.1rem;
    line-height: 1.3;
}

.guia-meta {
    margin: 0 0 12px 0;
    color: #9ca3af;
    font-size: 0.85rem;
}

.guia-preview {
    margin: 0;
    color: #d1d5db;
    font-size: 0.9rem;
}

.guia-show-imagen {
    width: 100%;
    aspect-ratio: 16 / 6;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
    background: #0d0d14;
}

.guia-show-imagen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.guia-like-form {
    margin-top: 16px;
}

.guia-like-boton {
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: var(--gh-gradient);
    color: #fff;
    font-family: var(--font-header);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.guia-like-boton:hover {
    box-shadow: var(--gh-glow);
    transform: translateY(-2px);
}

.guia-likes-texto {
    color: #d1d5db;
}

.comentario-responder-boton {
    margin-top: 10px;
    background: transparent;
    border: none;
    color: var(--gh-magenta);
    font-family: var(--font-header);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.comentario-form-respuesta {
    display: none;
    margin-top: 14px;
}

.comentario-form-respuesta.activo {
    display: block;
}

.comentario-respuesta {
    margin-top: 14px;
    margin-left: 5%;
    border-left: 3px solid var(--gh-magenta);
}

.comentario-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.comentario-like-form {
    margin-top: 10px;
}

.comentario-like-boton {
    background: transparent;
    border: none;
    color: var(--gh-magenta);
    font-family: var(--font-header);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.comentario-like-boton:hover {
    transform: scale(1.08);
    text-shadow: var(--gh-glow);
}

.comentario-like-texto {
    display: inline-block;
    margin-top: 10px;
    color: var(--gh-magenta);
    font-family: var(--font-header);
    font-size: 0.9rem;
}

.comentario-card-moderado {
    border-left: 4px solid var(--gh-magenta);
    background: rgba(255, 0, 200, 0.05);
}

.comentario-moderado {
    color: #f87171;
    font-style: italic;
}

.comentario-moderado strong {
    color: var(--gh-magenta);
}

/* Detalle de noticias. */
.news-detail-wrapper {
    background-color: #0a0a0a;
    min-height: 100vh;
    color: #eeeeee;
}

.game-hero {
    position: relative;
    height: 500px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding-bottom: 60px;
    border-bottom: 4px solid var(--gh-magenta);
}

.game-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #0a0a0a 0%, rgba(0, 0, 0, 0.4) 100%);
}

.hero-info {
    position: relative;
    z-index: 10;
    max-width: 1200px;
    margin: 0 auto;
    width: 90%;
}

.hero-info h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 3.5rem;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
}

.news-meta {
    font-family: 'Rajdhani', sans-serif;
    color: var(--gh-magenta);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 2px;
}

.game-content-grid {
    max-width: 1200px;
    margin: 40px auto;
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 50px;
    padding: 0 20px;
}

.main-column {
    font-family: 'Inter', sans-serif;
    line-height: 1.8;
    font-size: 1.1rem;
    color: #ccc;
}

.description-text p {
    margin-bottom: 20px;
}

.side-card {
    background: #141414;
    border-radius: 15px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    height: fit-content;
    position: sticky;
    top: 100px;
}

.data-row {
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.data-row:last-child {
    border: none;
}

.data-label {
    display: block;
    font-family: 'Orbitron', sans-serif;
    color: var(--gh-magenta);
    font-size: 0.75rem;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.data-value {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
}

.actions-bar {
    margin-top: 40px;
    display: flex;
    gap: 20px;
}

.btn-volver,
.btn-web {
    padding: 12px 25px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: 0.3s;
}

.btn-volver {
    background: #222;
    color: #fff;
}

.btn-volver:hover {
    background: #333;
}

.btn-web {
    background: var(--gh-magenta);
    color: #fff;
    box-shadow: 0 4px 15px rgba(233, 30, 99, 0.3);
}

.btn-web:hover {
    transform: translateY(-3px);
}

@media (max-width: 900px) {
    .game-content-grid {
        grid-template-columns: 1fr;
    }

    .hero-info h1 {
        font-size: 2.2rem;
    }
}

.news-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin: 0 auto 34px;
    width: 100%;
    max-width: 1400px;
    padding: 0 6px;
    box-sizing: border-box;
}

.news-header-flex h2,
.foro-header-flex h2 {
    position: relative;
    margin: 0;
    color: #fff;
    line-height: 1.05;
    text-shadow: 0 0 18px rgba(216, 180, 254, 0.18);
}

.news-header-flex h2::after,
.foro-header-flex h2::after {
    content: "";
    display: block;
    width: 72px;
    height: 3px;
    margin-top: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gh-magenta), #22ffe5);
    box-shadow: 0 0 16px rgba(255, 0, 200, 0.34);
}

.btn-view-all {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border: 1px solid rgba(255, 0, 200, 0.74);
    color: #fff;
    background:
        linear-gradient(135deg, rgba(255, 0, 200, 0.08), rgba(106, 0, 255, 0.12)),
        rgba(255, 255, 255, 0.02);
    padding: 11px 22px;
    border-radius: 8px;
    text-decoration: none;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
    box-shadow: inset 0 0 0 1px rgba(216, 180, 254, 0.08);
    overflow: hidden;
}

.btn-view-all::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.13), transparent);
    transform: translateX(-110%);
    transition: transform 0.45s ease;
    pointer-events: none;
}

.btn-view-all:hover {
    transform: translateY(-2px);
    border-color: rgba(34, 255, 229, 0.72);
    background:
        linear-gradient(135deg, rgba(255, 0, 200, 0.18), rgba(34, 255, 229, 0.12)),
        rgba(255, 255, 255, 0.04);
    box-shadow:
        0 0 18px rgba(255, 0, 200, 0.3),
        0 0 26px rgba(34, 255, 229, 0.12);
}

.btn-view-all:hover::before {
    transform: translateX(110%);
}

/* ==========================================================
CONTENEDOR PRINCIPAL ARCHIVE
=============================================================*/
.archive-main-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 120px 20px 60px;
    display: flex;
    gap: 30px;
    background-color: #050505;
    min-height: 100vh;
}

/* --- BARRA LATERAL (SIDEBAR) --- */
.archive-sidebar {
    flex: 0 0 280px;
}

.sidebar-box {
    background: #0d0d10;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.sidebar-header {
    background: linear-gradient(90deg, #2a1a35 0%, #1a1025 100%);
    padding: 15px 20px;
    border-bottom: 2px solid var(--gh-magenta);
}

.sidebar-header h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    color: #fff;
    margin: 0;
    letter-spacing: 2px;
}

.genre-list {
    list-style: none;
    padding: 10px 0;
}

.genre-list li a {
    display: block;
    padding: 12px 20px;
    color: #bbb;
    text-decoration: none;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    transition: 0.3s;
    text-transform: uppercase;
}

.genre-list li a:hover,
.genre-list li a.active {
    color: #fff;
    background: rgba(233, 30, 99, 0.1);
    padding-left: 25px;
}

/* --- CONTENIDO Y BUSCADOR --- */
.archive-content {
    flex: 1;
}

.archive-top-bar {
    background: #0d0d10;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.search-form-foro {
    display: flex;
    gap: 15px;
}

.search-form-foro input {
    flex: 1;
    background: #050505;
    border: 1px solid #222;
    padding: 12px 20px;
    color: #fff;
    border-radius: 4px;
    outline: none;
}

.btn-foro-gradient {
    background: linear-gradient(45deg, #8e2de2, #f000ff);
    border: none;
    color: #fff;
    padding: 0 30px;
    border-radius: 4px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

.btn-foro-gradient:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 15px rgba(240, 0, 255, 0.4);
}

.archive-section-title {
    font-family: 'Orbitron', sans-serif;
    color: var(--gh-magenta);
    font-size: 1.8rem;
    margin-bottom: 25px;
    text-transform: uppercase;
}

/* --- TARJETAS ESTILO FORO --- */
.news-post-card {
    background: #0d0d10;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: 0.3s;
}

.news-post-card:hover {
    border-color: rgba(233, 30, 99, 0.3);
    background: #121217;
}

.post-card-layout {
    display: flex;
    gap: 25px;
}

.post-thumbnail {
    flex: 0 0 180px;
    height: 120px;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
}

.post-details {
    flex: 1;
}

.post-title {
    font-family: 'Orbitron', sans-serif;
    color: var(--gh-magenta);
    font-size: 1.2rem;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.post-meta {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 12px;
    font-family: 'Rajdhani', sans-serif;
}

.post-excerpt {
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 15px;
}

.post-footer {
    display: flex;
    justify-content: flex-end;
}

.btn-ver-mas {
    background: linear-gradient(45deg, #8e2de2, #f000ff);
    color: #fff;
    text-decoration: none;
    padding: 8px 20px;
    border-radius: 4px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
}

.pagination-foro {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: #0d0d10;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.page-info {
    font-family: 'Orbitron', sans-serif;
    color: #fff;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.btn-page {
    background: linear-gradient(45deg, #8e2de2, #f000ff);
    color: #fff;
    text-decoration: none;
    padding: 10px 25px;
    border-radius: 4px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    transition: 0.3s;
    border: none;
}

.btn-page:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 15px rgba(240, 0, 255, 0.4);
    transform: translateY(-2px);
}

/*================================================
SECCIÓN FORO EN HOME
==================================================*/

.foro-home-section {
    margin-top: 50px;
    background: transparent;
    position: relative;
    padding: 100px 0 120px 5%;
    overflow-x: hidden;
}

/* Sutil acento de color para la sección de foro */
.foro-home-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(106, 0, 255, 0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* Reutilizamos el header flex de noticias */
.foro-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    max-width: 1400px;
    /* Ajusta según tu contenedor de noticias */
    margin: 0 auto 40px;
    padding: 0 20px 0 0;
    box-sizing: border-box;
}

.foro-header-flex h2 {
    font-family: 'Orbitron', sans-serif;
    color: #ffffff;
    font-size: 2rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Estilo específico para las etiquetas del foro (Cian/Azul para diferenciar de noticias) */
.tag-foro {
    background: rgba(0, 255, 242, 0.1) !important;
    color: #00fff2 !important;
    border: 1px solid rgba(0, 255, 242, 0.3) !important;
}

/* Fallback de imagen para posts si no quieres que salgan vacíos */
.foro-img-fallback {
    background-image: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    position: relative;
}

/* GUIA*/

.social {
    padding: 32px 5%;
}

.social-contenedor {
    width: 100%;
    margin: 0;
}

.social-cabecera {
    margin-bottom: 24px;
}

.social-cabecera h1 {
    color: var(--gh-magenta);
    font-size: 2.2rem;
    margin-bottom: 8px;
}

.social-cabecera p {
    color: #9ca3af;
    margin: 0;
}

.social-form {
    background: #111118;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.social-textarea,
.social-input,
.social-select {
    width: 100%;
    padding: 14px 16px;
    background: #0d0d14;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: var(--gh-white);
    font-family: var(--font-body);
    box-sizing: border-box;
}

.social-textarea {
    min-height: 100px;
    resize: none;
}

.social-textarea:focus,
.social-input:focus,
.social-select:focus {
    outline: none;
    border-color: var(--gh-magenta);
    box-shadow: 0 0 10px rgba(255, 0, 200, 0.15);
}

.social-boton {
    align-self: flex-end;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    background: var(--gh-gradient);
    color: #fff;
    font-family: var(--font-header);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.social-boton:hover {
    box-shadow: var(--gh-glow);
    transform: translateY(-2px);
}

.social-login-aviso {
    color: #9ca3af;
}

.social-feed {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.social-post {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    background: #111118;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 18px;
}

.social-avatar img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}

.social-post-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    color: #9ca3af;
    margin-bottom: 10px;
}
.social-post-meta a {
    text-decoration: none;
}
.social-post-meta span {
    color: white;
}
.social-post-meta strong {
    color: var(--gh-white);
}

.social-post-texto {
    color: #e5e7eb;
    margin: 0 0 14px 0;
    line-height: 1.6;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* Moderación y posts generales */
.post-content-text {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.social-post-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.social-media {
    width: 100%;
    max-height: 450px;
    object-fit: contain;
    background: #0d0d14;
    border-radius: 12px;
    margin-bottom: 14px;
}

.social-video {
    margin-bottom: 14px;
}

.social-acciones {
    display: flex;
    align-items: center;
    gap: 18px;
}

.social-like,
.social-comentar,
.social-like-texto {
    background: transparent;
    border: none;
    color: var(--gh-magenta);
    font-family: var(--font-header);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.social-like:hover,
.social-comentar:hover {
    text-shadow: var(--gh-glow);
}

.social-eliminar {
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    font-family: var(--font-header);
    font-weight: 700;
    cursor: pointer;
}

.social-post-clickable {
    cursor: pointer;
}


.perfil-social {
    padding: 32px 5%;
}

.perfil-contenedor {
    width: 100%;
    margin: 0;
}

.perfil-cabecera {
    background: #111118;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 24px;
}

.perfil-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gh-magenta);
}

.perfil-info {
    flex: 1;
}

.perfil-info h1 {
    margin: 0 0 8px 0;
    color: var(--gh-magenta);
}

.perfil-info .perfil-boton {
    display: inline-block;
    margin: 14px 0 12px 0;
}

.perfil-fecha {
    color: #9ca3af;
    margin: 0 0 12px 0;
}

.perfil-stats {
    display: flex;
    gap: 18px;
    color: #d1d5db;
}

.perfil-stats strong {
    color: var(--gh-white);
}

.perfil-boton {
    padding: 12px 18px;
    border: none;
    border-radius: 8px;
    background: var(--gh-gradient);
    color: #fff;
    font-family: var(--font-header);
    font-weight: 700;
    cursor: pointer;
}

.perfil-tabs {
    display: flex;
    gap: 14px;
    margin-bottom: 20px;
}

.perfil-tab {
    padding: 12px 18px;
    border-radius: 8px;
    background: #111118;
    color: #d1d5db;
    text-decoration: none;
    font-family: var(--font-header);
    font-weight: 700;
}

.perfil-tab.activo {
    background: var(--gh-gradient);
    color: #fff;
}

.perfil-feed {
    display: flex;
    flex-direction: column;
    gap: 18px;

}

.perfil-feed .social-media {
    width: 100%;
    max-width: 650px;
    max-height: 520px;
    object-fit: contain;
    display: block;
    margin: 14px auto;
    border-radius: 12px;
    background: #0d0d14;
}

.perfil-feed .social-post {
    display: block;
}

.perfil-feed .social-post-contenido {
    width: 100%;
}

.perfil-feed .social-media {
    width: 100%;
    max-width: 650px;
    max-height: 520px;
    object-fit: contain;
    display: block;
    margin: 14px auto;
    border-radius: 12px;
    background: #0d0d14;
}

.perfil-feed video.social-media {
    width: 100%;
}

.social-usuario-link {
    text-decoration: none;
    color: inherit;
}

.social-layout {
    display: grid;
    grid-template-columns: 18% minmax(0, 1fr);
    gap: 24px;
    width: 100%;
    padding: 0 5% 0 0;
    box-sizing: border-box;
}

.social-layout-contenido,
.social-contenedor,
.perfil-contenedor {
    min-width: 0;
    max-width: 100%;
}

.social-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100vh;
    align-self: start;
    border-radius: 0;
    border-left: none;
    border-top: none;
    border-bottom: none;
    padding: 90px 24px 32px 24px;
    box-sizing: border-box;
    background-color: #111118;
    z-index: 100;
    border-right: 1px solid rgba(216, 180, 254, 0.14);
    box-shadow: 12px 0 35px rgba(0, 0, 0, 0.24);
    overflow-y: auto;
}

.social-sidebar-logo {
    margin-bottom: 28px;
}

.social-sidebar-logo h2 {
    margin: 0;
    color: var(--gh-magenta);
    font-size: clamp(1.2rem, 2vw, 1.8rem);
}

.social-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.social-sidebar-link {
    padding: 14px 16px;
    border-radius: 10px;
    text-decoration: none;
    color: #d1d5db;
    font-family: var(--font-header);
    font-weight: 700;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

.social-sidebar-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--gh-magenta);
}

.social-sidebar-link i,
.social-sidebar-link svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.social-layout-contenido {
    padding: 32px 0;
    min-width: 0;
}

.social-sidebar-perfil {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    margin-top: 8px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

.social-sidebar-perfil:hover {
    background: rgba(255, 255, 255, 0.05);
}

.social-sidebar-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}

.social-sidebar-usuario {
    display: flex;
    flex-direction: column;
}

.social-sidebar-usuario strong {
    color: var(--gh-white);
}

.social-sidebar-usuario span {
    color: #9ca3af;
    font-size: 0.9rem;
}



/* Botón Volver (SEO y Experiencia de Usuario) */
.gh-back-container {
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.gh-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--gh-gris-claro);
    text-decoration: none;
    font-family: var(--font-header);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.gh-btn-back:hover {
    background: var(--gh-magenta);
    color: white;
    border-color: var(--gh-magenta);
    box-shadow: 0 0 15px rgba(255, 0, 200, 0.3);
    transform: translateX(-4px);
}

.gh-btn-back i {
    transition: transform 0.3s ease;
}

.gh-btn-back:hover i {
    transform: translateX(-2px);
}

/* --- ANIMACIONES DE REVELADO --- */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-on-scroll.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

.social-error {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.social-sidebar-busqueda {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.social-sidebar-input {
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #0d0d14;
    color: var(--gh-white);
    font-family: var(--font-body);
}

.social-sidebar-input:focus {
    outline: none;
    border-color: var(--gh-magenta);
}

.social-sidebar-boton {
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    background: var(--gh-gradient);
    color: #fff;
    font-family: var(--font-header);
    font-weight: 700;
    cursor: pointer;
}

.buscar-usuarios-contenedor {
    width: 100%;
}

.buscar-usuarios h1 {
    color: var(--gh-magenta);
}

.buscar-info {
    color: #9ca3af;
}

.usuarios-lista {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.usuario-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: #111118;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

.usuario-card:hover {
    border-color: rgba(255, 0, 200, 0.28);
    box-shadow: 0 0 18px rgba(255, 0, 200, 0.08);
}

.usuario-card-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}

.usuario-card div {
    display: flex;
    flex-direction: column;
}

.usuario-card strong {
    color: var(--gh-white);
}

.usuario-card span {
    color: #9ca3af;
    font-size: 0.9rem;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
}

.pagination nav {
    display: flex;
    justify-content: center;
}

.pagination a,
.pagination span {
    padding: 10px 14px;
    border-radius: 8px;
    background: #111118;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--gh-white);
    text-decoration: none;
    font-family: var(--font-header);
    font-size: 0.85rem;
}

.pagination a:hover {
    background: var(--gh-gradient);
    box-shadow: var(--gh-glow);
}

.pagination .active span {
    background: var(--gh-gradient);
    color: #fff;
    /*
    pagina de legal y contacto
    */
    /* Contenedor General Legal/Soporte */
}

.legal-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 150px 20px 100px;
    color: #ccc;
    font-family: 'Rajdhani', sans-serif;
}

.legal-container h1 {
    font-family: 'Orbitron', sans-serif;
    color: #fff;
    font-size: 2.5rem;
    margin-bottom: 40px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
}

/* Estilo para los textos legales */

.legal-text section {
    background: #0d0d10;
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid var(--gh-magenta);
}

.legal-text h3 {
    color: var(--gh-magenta);
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 15px;
}

.last-update {
    display: block;
    text-align: center;
    margin-bottom: 40px;
    color: #666;
    font-size: 0.8rem;
}

/* Formulario de Contacto Pro */

.contact-box {
    background: #0d0d10;
    padding: 50px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.gh-form .form-group {
    margin-bottom: 25px;
}

.gh-form label {
    display: block;
    color: var(--gh-magenta);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.gh-form input,
.gh-form select,
.gh-form textarea {
    width: 100%;
    background: #050505;
    border: 1px solid #333;
    padding: 15px;
    color: #fff;
    border-radius: 5px;
    outline: none;
    transition: 0.3s;
}

.gh-form input:focus {
    border-color: var(--gh-magenta);
    box-shadow: 0 0 10px rgba(233, 30, 99, 0.2);
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.faq-item {
    background: #0d0d10;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Estilos para páginas legales */

.legal-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 120px 20px 80px;
}

.legal-text h1 {
    font-family: 'Orbitron', sans-serif;
    color: #fff;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 5px;
}

.legal-text section {
    background: #0d0d10;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 30px;
    margin-top: 30px;
    border-radius: 8px;
    border-left: 5px solid #e91e63;
    /* Tu magenta */
}

.legal-text h3 {
    font-family: 'Orbitron', sans-serif;
    color: #e91e63;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.legal-text p,
.legal-text li {
    font-family: 'Rajdhani', sans-serif;
    color: #ccc;
    line-height: 1.6;
    font-size: 1.1rem;
}

.legal-text ul {
    padding-left: 20px;
    margin-top: 10px;
}

/*===============================================
    SECCION SEO - REDISEÑO PROFESIONAL Y AGRACIADO
    =============================================*/

.seo-community-section {
    padding: 150px 20px;
    /* Aumentado padding para más aire */
    background: radial-gradient(circle at top right, #1a0b2e 0%, #050505 100%);
    /* degradado de fondo más profundo */
    overflow: hidden;
    border-top: 1px solid rgba(233, 30, 99, 0.1);
}

.seo-container {
    max-width: 1100px;
    /* Ajustado max-width para mejor proporción */
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 120px;
    /* Aumentado gap para mejor proporción texto/imagen */
}

/* Lado de la Imagen - Sin cambios significativos */

.seo-image {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
}

.seo-image img {
    width: 100%;
    max-width: 600px;
    /* Un poco más grande */
    filter: drop-shadow(0 0 30px rgba(233, 30, 99, 0.3));
    border-radius: 20px;
    /* Efecto 3D suave */
    transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
}

.image-overlay-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    background: var(--gh-magenta);
    filter: blur(150px);
    opacity: 0.2;
    z-index: -1;
}

/* Lado del Contenido - Mejorado para legibilidad y jerarquía */

.seo-content {
    flex: 1.5;
    /* El texto tiene más espacio */
}

.tagline {
    color: var(--gh-magenta);
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    /* Un poco más grande */
    letter-spacing: 5px;
    display: block;
    margin-bottom: 20px;
}

.seo-content h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 3.5rem;
    /* Título mucho más imponente para SEO y estética */
    color: #fff;
    line-height: 1.1;
    /* Más apretado */
    margin-bottom: 30px;
}

.highlight {
    color: transparent;
    -webkit-text-stroke: 1px var(--gh-magenta);
    text-shadow: 0 0 10px rgba(233, 30, 99, 0.5);
}

.seo-content p {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.3rem;
    /* Un poco más grande */
    color: #bbb;
    line-height: 1.6;
    /* Más interlineado */
    margin-bottom: 40px;
    max-width: 600px;
    /* Limitado para facilidad de lectura */
}

/* Mini Features - Más estilo tarjeta de interfaz */

.seo-features {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    /* Aumentado gap */
    margin-bottom: 50px;
}

.feature {
    background: rgba(255, 255, 255, 0.03);
    padding: 15px 25px;
    /* Más padding */
    border-radius: 10px;
    /* Más redondeado */
    border: 1px solid rgba(233, 30, 99, 0.1);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.feature i {
    color: var(--gh-magenta);
    font-size: 1rem;
}

.feature:hover {
    background: rgba(233, 30, 99, 0.1);
    border-color: rgba(233, 30, 99, 0.5);
    transform: translateY(-5px);
}

/* RESPONSIVO - Mejoras */
@media (max-width: 1024px) {
    .seo-container {
        flex-direction: column-reverse;
        /* Imagen abajo para móvil */
        text-align: center;
        gap: 60px;
    }

    .seo-content h2 {
        font-size: 2.5rem;
    }

    .seo-features {
        justify-content: center;
    }

    .seo-image img {
        transform: none;
    }
}

/* NUEVO BOTÓN CYBERPUNK ÉLITE - MEJORADO Y AGRACIADO */

.btn-foro-gradient {
    /* Reseteo de estilos base */
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    /* Para contener los efectos de fondo */

    /* Tipografía */
    font-family: 'Orbitron', sans-serif;
    color: #fff;
    font-size: 0.9rem;
    /* Un poco más grande */
    font-weight: 800;
    /* Más peso */
    text-transform: uppercase;
    letter-spacing: 2px;

    /* Dimensiones base y forma */
    height: 50px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Animación más suave y con rebote */
}

/* El pseudo-borde exterior neón */

.btn-foro-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid transparent;
    /* Borde base para luego degradarlo */
    background: linear-gradient(45deg, #8e2de2, #f000ff) border-box;
    /* Degradado del borde */
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    /* Truco para borde degradado con fondo transparente */
    mask-composite: exclude;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    z-index: 1;
    transition: all 0.3s ease;
    /* Efecto geométrico: panel enmarcado con esquinas cortadas */
    clip-path: polygon(10% 0%,
    100% 0%,
    90% 100%,
    0% 100%,
        /* Recortes internos para simular el borde */
    2px 98%,
    89.5% 98%,
    99.5% 2px,
    10.5% 2px);
}

/* Pseudo-elemento para el brillo neón (box-shadow no funciona bien con clip-path) */

.btn-foro-gradient::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: 110%;
    border-radius: 5px;
    /* Ligeramente redondeado para el brillo */
    background: rgba(240, 0, 255, 0.4);
    filter: blur(15px);
    opacity: 0;
    z-index: 0;
    transition: opacity 0.3s ease;
}

/* El texto y el fondo interior */

.btn-foro-gradient span {
    position: relative;
    z-index: 2;
    padding: 0 40px;
    height: 100%;
    display: flex;
    align-items: center;
    background-color: #050505;
    /* Fondo oscuro interno para el botón base */
    transition: background-color 0.3s ease;
}

/* Efecto hover: Transformación, brillo y cambio de fondo */

.btn-foro-gradient:hover {
    transform: translateY(-4px) scale(1.05);
    /* Sube un poco más y se agranda */
}

/* El borde neón se intensifica */

.btn-foro-gradient:hover::before {
    mask: none;
    /* Quitamos la máscara para que se vea el degradado completo */
    -webkit-mask: none;
    clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
    /* Volvemos a la forma externa simple */
}

/* El brillo neón aparece */

.btn-foro-gradient:hover::after {
    opacity: 1;
}

/* El fondo interior se vuelve transparente para mostrar el degradado completo de fondo */

.btn-foro-gradient:hover span {
    background-color: transparent;
}



.legal-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 150px 20px 100px;
    color: #ccc;
    font-family: 'Rajdhani', sans-serif;
}

.legal-container h1 {
    font-family: 'Orbitron', sans-serif;
    color: #fff;
    font-size: 2.5rem;
    margin-bottom: 40px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
}

/* ============================================
    Estilo para los textos legales
    ==================================================*/

.legal-text section {
    background: #0d0d10;
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid var(--gh-magenta);
}

.legal-text h3 {
    color: var(--gh-magenta);
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 15px;
}

.last-update {
    display: block;
    text-align: center;
    margin-bottom: 40px;
    color: #666;
    font-size: 0.8rem;
}

/*==========================================
     Formulario de Contacto
     ==============================================*/

.contact-box {
    background: #0d0d10;
    padding: 50px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.gh-form .form-group {
    margin-bottom: 25px;
}

.gh-form label {
    display: block;
    color: var(--gh-magenta);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.gh-form input,
.gh-form select,
.gh-form textarea {
    width: 100%;
    background: #050505;
    border: 1px solid #333;
    padding: 15px;
    color: #fff;
    border-radius: 5px;
    outline: none;
    transition: 0.3s;
}

.gh-form input:focus {
    border-color: var(--gh-magenta);
    box-shadow: 0 0 10px rgba(233, 30, 99, 0.2);
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.faq-item {
    background: #0d0d10;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/*
    ======================================================
    Estilos para páginas legales
    ======================================================*/

.legal-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 120px 20px 80px;
}

.legal-text h1 {
    font-family: 'Orbitron', sans-serif;
    color: #fff;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 5px;
}

.legal-text section {
    background: #0d0d10;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 30px;
    margin-top: 30px;
    border-radius: 8px;
    border-left: 5px solid #e91e63;
    /* Tu magenta */
}

.legal-text h3 {
    font-family: 'Orbitron', sans-serif;
    color: #e91e63;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.legal-text p,
.legal-text li {
    font-family: 'Rajdhani', sans-serif;
    color: #ccc;
    line-height: 1.6;
    font-size: 1.1rem;
}

.legal-text ul {
    padding-left: 20px;
    margin-top: 10px;
}

/* ====================================================
    SECCION SEO - REDISEÑO PROFESIONAL Y AGRACIADO
    ========================================================*/

.seo-community-section {
    padding: 150px 20px;
    /* Aumentado padding para más aire */
    background: radial-gradient(circle at top right, #1a0b2e 0%, #050505 100%);
    /* degradado de fondo más profundo */
    overflow: hidden;
    border-top: 1px solid rgba(233, 30, 99, 0.1);
}

.seo-container {
    max-width: 1100px;
    /* Ajustado max-width para mejor proporción */
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 120px;
    /* Aumentado gap para mejor proporción texto/imagen */
}

/* Lado de la Imagen - Sin cambios significativos */

.seo-image {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
}

.seo-image img {
    width: 100%;
    max-width: 600px;
    /* Un poco más grande */
    filter: drop-shadow(0 0 30px rgba(233, 30, 99, 0.3));
    border-radius: 20px;
    /* Efecto 3D suave */
    transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
}

.image-overlay-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    background: var(--gh-magenta);
    filter: blur(150px);
    opacity: 0.2;
    z-index: -1;
}

/* Lado del Contenido - Mejorado para legibilidad y jerarquía */

.seo-content {
    flex: 1.5;
    /* El texto tiene más espacio */
}

.tagline {
    color: var(--gh-magenta);
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    /* Un poco más grande */
    letter-spacing: 5px;
    display: block;
    margin-bottom: 20px;
}

.seo-content h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 3.5rem;
    /* Título mucho más imponente para SEO y estética */
    color: #fff;
    line-height: 1.1;
    /* Más apretado */
    margin-bottom: 30px;
}

.highlight {
    color: transparent;
    -webkit-text-stroke: 1px var(--gh-magenta);
    text-shadow: 0 0 10px rgba(233, 30, 99, 0.5);
}

.seo-content p {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.3rem;
    /* Un poco más grande */
    color: #bbb;
    line-height: 1.6;
    /* Más interlineado */
    margin-bottom: 40px;
    max-width: 600px;
    /* Limitado para facilidad de lectura */
}

/* Mini Features - Más estilo tarjeta de interfaz */

.seo-features {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    /* Aumentado gap */
    margin-bottom: 50px;
}

.feature {
    background: rgba(255, 255, 255, 0.03);
    padding: 15px 25px;
    /* Más padding */
    border-radius: 10px;
    /* Más redondeado */
    border: 1px solid rgba(233, 30, 99, 0.1);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.feature i {
    color: var(--gh-magenta);
    font-size: 1rem;
}

.feature:hover {
    background: rgba(233, 30, 99, 0.1);
    border-color: rgba(233, 30, 99, 0.5);
    transform: translateY(-5px);
}

/* RESPONSIVO - Mejoras */
@media (max-width: 1024px) {
    .seo-container {
        flex-direction: column-reverse;
        /* Imagen abajo para móvil */
        text-align: center;
        gap: 60px;
    }

    .seo-content h2 {
        font-size: 2.5rem;
    }

    .seo-features {
        justify-content: center;
    }

    .seo-image img {
        transform: none;
    }
}

/* NUEVO BOTÓN CYBERPUNK ÉLITE - MEJORADO Y AGRACIADO */

.btn-foro-gradient {
    /* Reseteo de estilos base */
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    /* Para contener los efectos de fondo */

    /* Tipografía */
    font-family: 'Orbitron', sans-serif;
    color: #fff;
    font-size: 0.9rem;
    /* Un poco más grande */
    font-weight: 800;
    /* Más peso */
    text-transform: uppercase;
    letter-spacing: 2px;

    /* Dimensiones base y forma */
    height: 50px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Animación más suave y con rebote */
}

/* El pseudo-borde exterior neón */

.btn-foro-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid transparent;
    /* Borde base para luego degradarlo */
    background: linear-gradient(45deg, #8e2de2, #f000ff) border-box;
    /* Degradado del borde */
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    /* Truco para borde degradado con fondo transparente */
    mask-composite: exclude;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    z-index: 1;
    transition: all 0.3s ease;
    /* Efecto geométrico: panel enmarcado con esquinas cortadas */
    clip-path: polygon(10% 0%,
    100% 0%,
    90% 100%,
    0% 100%,
        /* Recortes internos para simular el borde */
    2px 98%,
    89.5% 98%,
    99.5% 2px,
    10.5% 2px);
}

/* Pseudo-elemento para el brillo neón (box-shadow no funciona bien con clip-path) */

.btn-foro-gradient::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: 110%;
    border-radius: 5px;
    /* Ligeramente redondeado para el brillo */
    background: rgba(240, 0, 255, 0.4);
    filter: blur(15px);
    opacity: 0;
    z-index: 0;
    transition: opacity 0.3s ease;
}

/* El texto y el fondo interior */

.btn-foro-gradient span {
    position: relative;
    z-index: 2;
    padding: 0 40px;
    height: 100%;
    display: flex;
    align-items: center;
    background-color: #050505;
    /* Fondo oscuro interno para el botón base */
    transition: background-color 0.3s ease;
}

/* Efecto hover: Transformación, brillo y cambio de fondo */

.btn-foro-gradient:hover {
    transform: translateY(-4px) scale(1.05);
    /* Sube un poco más y se agranda */
}

/* El borde neón se intensifica */

.btn-foro-gradient:hover::before {
    mask: none;
    /* Quitamos la máscara para que se vea el degradado completo */
    -webkit-mask: none;
    clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
    /* Volvemos a la forma externa simple */
}

/* El brillo neón aparece */

.btn-foro-gradient:hover::after {
    opacity: 1;
}

/* El fondo interior se vuelve transparente para mostrar el degradado completo de fondo */

.btn-foro-gradient:hover span {
    background-color: transparent;
}


@media (max-width: 900px) {

    body.gh-admin-page,
    body.gh-admin-page .admin-container,
    body.gh-admin-page .admin-main {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    body.gh-admin-page .admin-main {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body.gh-admin-page .admin-header,
    body.gh-admin-page .admin-filters-minimal,
    body.gh-admin-page .admin-card,
    body.gh-admin-page .card,
    body.gh-admin-page .gh-tabla-contenedor {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    body.gh-admin-page .admin-header,
    body.gh-admin-page .admin-filters-minimal,
    body.gh-admin-page .gh-tabla-contenedor {
        margin-bottom: 28px !important;
    }

    body.gh-admin-page .gh-tabla-contenedor {
        padding: 10px !important;
    }

    body.gh-admin-page .gh-tabla,
    body.gh-admin-page .gh-tabla thead,
    body.gh-admin-page .gh-tabla tbody,
    body.gh-admin-page .gh-tabla tr,
    body.gh-admin-page .gh-tabla th,
    body.gh-admin-page .gh-tabla td {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.gh-admin-page .gh-tabla {
        display: block !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
    }

    body.gh-admin-page .gh-tabla thead {
        display: none !important;
    }

    body.gh-admin-page .gh-tabla tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
    }

    body.gh-admin-page .gh-tabla tr {
        display: block !important;
        padding: 14px 16px !important;
        border: 1px solid rgba(216, 180, 254, 0.12) !important;
        border-radius: 10px !important;
        background: rgba(13, 13, 20, 0.94) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22) !important;
        overflow: hidden !important;
    }

    body.gh-admin-page .gh-tabla td {
        display: block !important;
        padding: 14px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(216, 180, 254, 0.08) !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--gh-white);
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        white-space: normal !important;
    }

    body.gh-admin-page .gh-tabla td:last-child {
        border-bottom: 0 !important;
    }

    body.gh-admin-page .gh-tabla td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 9px;
        color: var(--admin-section-accent);
        font-family: var(--font-header);
        font-size: 0.66rem;
        letter-spacing: 1px;
        line-height: 1.1;
        text-transform: uppercase;
    }

    body.gh-admin-page .gh-tabla td[colspan]::before,
    body.gh-admin-page .gh-tabla td:not([data-label])::before {
        content: none;
    }

    body.gh-admin-page .gh-tabla td[data-label="Titulo"],
    body.gh-admin-page .gh-tabla td[data-label="TITULO"],
    body.gh-admin-page .gh-tabla td[data-label="Título"],
    body.gh-admin-page .gh-tabla td[data-label="TÍTULO"] {
        display: block !important;
    }

    body.gh-admin-page .admin-table-cell-title,
    body.gh-admin-page .gh-text-truncate {
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }

    body.gh-admin-page .gh-tabla td[data-label*="Acciones"] {
        padding-bottom: 0 !important;
    }

    body.gh-admin-page .gh-tabla td[data-label*="Acciones"] .gh-acciones-grupo,
    body.gh-admin-page .gh-tabla td[data-label*="Acciones"]>div,
    body.gh-admin-page .gh-tabla td[data-label*="Acciones"]>form,
    body.gh-admin-page .gh-tabla td[data-label*="Acciones"]>a {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.gh-admin-page .gh-tabla td[data-label*="Acciones"] .gh-btn-accion,
    body.gh-admin-page .gh-tabla td[data-label*="Acciones"] button,
    body.gh-admin-page .gh-tabla td[data-label*="Acciones"] a {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 40px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin-bottom: 1vh !important;
    }

    body.gh-admin-page .admin-btn-icon-only {
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        height: 44px !important;
        padding: 0 !important;
        flex: 0 0 52px !important;
    }

    body.gh-admin-page .admin-form-footer,
    body.gh-admin-page .admin-actions-section {
        gap: 16px !important;
    }

    body.gh-admin-page .admin-actions-section .gh-btn-accion,
    body.gh-admin-page .admin-form-footer .admin-btn {
        display: flex !important;
        width: 100% !important;
        min-height: 42px !important;
        margin: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    body.gh-admin-page .admin-card-header h2 {
        font-size: 1.35rem !important;
        line-height: 1.18 !important;
        letter-spacing: 1px !important;
    }

    body.gh-admin-page .admin-card-header h3 {
        font-size: 1rem !important;
        line-height: 1.2 !important;
        letter-spacing: 1px !important;
    }

    body.gh-admin-page .admin-profile-header .header-avatar {
        width: 96px !important;
        height: 96px !important;
    }

    body.gh-admin-page .admin-profile-header .header-avatar span {
        font-size: 2.35rem !important;
    }

    body.gh-admin-page .admin-profile-header h2 {
        font-size: 1.65rem !important;
        line-height: 1.15 !important;
        letter-spacing: 1px !important;
    }

    body.gh-admin-page .admin-section-categories .admin-filters-tabs {
        width: 100% !important;
        flex-wrap: wrap !important;
        box-sizing: border-box !important;
    }

    body.gh-admin-page .admin-section-categories .admin-filter-tab {
        flex: 1 1 88px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    body.gh-admin-page .admin-section-categories .gh-tabla tbody {
        gap: 12px !important;
    }

    body.gh-admin-page .admin-section-categories .gh-tabla tr {
        padding: 10px 12px !important;
    }

    body.gh-admin-page .admin-section-categories .gh-tabla td {
        padding: 9px 0 !important;
    }

    body.gh-admin-page .admin-section-categories .gh-tabla tr {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-areas:
            "nombre nombre"
            "tipo elementos"
            "acciones acciones" !important;
        gap: 0 !important;
        align-items: stretch !important;
    }

    body.gh-admin-page .admin-section-categories .gh-tabla td:nth-child(1) {
        grid-area: nombre !important;
    }

    body.gh-admin-page .admin-section-categories .gh-tabla td:nth-child(2) {
        grid-area: tipo !important;
        width: auto !important;
        max-width: none !important;
    }

    body.gh-admin-page .admin-section-categories .gh-tabla td:nth-child(3) {
        grid-area: elementos !important;
        width: auto !important;
        max-width: none !important;
    }

    body.gh-admin-page .admin-section-categories .gh-tabla td:nth-child(4) {
        grid-area: acciones !important;
        padding-top: 12px !important;
    }

    body.gh-admin-page .admin-section-categories .gh-tabla td:nth-child(2)::before,
    body.gh-admin-page .admin-section-categories .gh-tabla td:nth-child(3)::before {
        margin-bottom: 4px !important;
    }

    body.gh-admin-page .admin-section-categories .gh-tabla td::before {
        margin-bottom: 5px !important;
    }

    body.gh-admin-page .admin-section-categories .gh-tabla td[data-label="Acciones"] .gh-acciones-grupo {
        gap: 8px !important;
        flex-direction: column !important;
    }

    body.gh-admin-page .admin-section-categories .gh-btn-accion {
        min-height: 36px !important;
        width: 100% !important;
    }

    body.gh-admin-page .admin-section-forum input[name="motivo_moderacion"] {
        display: none !important;
    }

    body.gh-admin-page .admin-section-guides input[name="motivo_moderacion"],
    body.gh-admin-page .admin-section-social input[name="motivo_moderacion"] {
        display: none !important;
    }

    body.gh-admin-page .admin-section-forum .gh-tabla td[data-label*="Acciones de Moderación"] form {
        gap: 10px !important;
    }
}

.user-mobile-menu-toggle,
.user-mobile-menu-button,
.user-mobile-menu-backdrop {
    display: none;
}

@media (max-width: 900px) {

    body.gh-user-page,
    body.gh-user-page .user-container,
    body.gh-user-page .user-main {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    body.gh-user-page>footer {
        display: none;
    }

    body.gh-user-page>header {
        display: flex;
    }

    body.gh-user-page .user-container {
        display: block;
        min-height: 100vh;
    }

    body.gh-user-page .user-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 20040;
        width: min(86vw, 320px);
        max-width: 320px;
        padding: 24px 18px calc(104px + env(safe-area-inset-bottom));
        border-right: 1px solid rgba(216, 180, 254, 0.16);
        border-bottom: 0;
        overflow-y: auto;
        transform: translateX(-105%);
        transition: transform 0.28s ease, box-shadow 0.28s ease;
        will-change: transform;
        background:
            linear-gradient(180deg, rgba(17, 16, 28, 0.98), rgba(8, 9, 16, 0.98)),
            #0d0d14;
        box-sizing: border-box;
    }

    body.gh-user-page .user-mobile-menu-toggle {
        position: fixed;
        inline-size: 1px;
        block-size: 1px;
        opacity: 0;
        pointer-events: none;
    }

    body.gh-user-page .user-mobile-menu-button {
        position: fixed;
        left: 50%;
        bottom: calc(16px + env(safe-area-inset-bottom));
        z-index: 20050;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-width: 150px;
        min-height: 52px;
        padding: 0 18px;
        border: 1px solid rgba(216, 180, 254, 0.28);
        border-radius: 8px;
        background:
            linear-gradient(135deg, rgba(106, 0, 255, 0.95), rgba(255, 0, 200, 0.9)),
            #14101f;
        box-shadow: 0 18px 34px rgba(0, 0, 0, 0.42), 0 0 22px rgba(255, 0, 200, 0.26);
        color: var(--gh-white);
        font-family: var(--font-header);
        font-size: 0.9rem;
        letter-spacing: 0;
        text-transform: uppercase;
        user-select: none;
        cursor: pointer;
        transform: translateX(-50%);
        box-sizing: border-box;
    }

    body.gh-user-page .user-mobile-menu-icon {
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
    }

    body.gh-user-page .user-mobile-menu-icon-close {
        display: none;
    }

    body.gh-user-page .user-mobile-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 20030;
        background: rgba(3, 4, 10, 0.68);
        backdrop-filter: blur(6px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s ease;
    }

    body.gh-user-page .user-mobile-menu-toggle:checked~.user-sidebar {
        transform: translateX(0);
        box-shadow: 18px 0 44px rgba(0, 0, 0, 0.46);
    }

    body.gh-user-page .user-mobile-menu-toggle:checked~.user-mobile-menu-backdrop {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    body.gh-user-page .user-mobile-menu-toggle:checked~.user-mobile-menu-button .user-mobile-menu-icon-open {
        display: none;
    }

    body.gh-user-page .user-mobile-menu-toggle:checked~.user-mobile-menu-button .user-mobile-menu-icon-close {
        display: block;
    }

    body.gh-user-page .user-sidebar .logo {
        margin-bottom: 22px;
        text-align: center;
    }

    body.gh-user-page .user-sidebar ul {
        display: grid;
        gap: 10px;
        margin: 0;
    }

    body.gh-user-page .user-sidebar li {
        margin-bottom: 0;
    }

    body.gh-user-page .user-sidebar a {
        min-height: 48px;
        padding: 12px 14px;
        border-radius: 8px;
        line-height: 1.15;
        box-sizing: border-box;
    }

    body.gh-user-page .user-main {
        padding: 28px 16px calc(132px + env(safe-area-inset-bottom)) !important;
        min-width: 0;
    }

    body.gh-user-page .panel-header,
    body.gh-user-page .info-card,
    body.gh-user-page .admin-card,
    body.gh-user-page .gh-tabla-contenedor,
    body.gh-user-page .profile-hero-card,
    body.gh-user-page .profile-side-panel,
    body.gh-user-page .publications-grid,
    body.gh-user-page .edit-sections,
    body.gh-user-page .profile-overview {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.gh-user-page .panel-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
        padding: 24px 18px;
        margin-bottom: 28px;
        border-radius: 12px;
    }

    body.gh-user-page .panel-header-left {
        align-items: flex-start;
        gap: 14px;
        width: 100%;
    }

    body.gh-user-page .panel-header-icon {
        align-self: flex-start;
        margin-top: 2px;
    }

    body.gh-user-page .panel-header-right {
        width: 100%;
        flex-direction: column;
        gap: 12px;
    }

    body.gh-user-page .panel-header-right .status-badge {
        align-items: flex-start;
    }

    body.gh-user-page .panel-header {
        align-items: flex-start;
    }

    body.gh-user-page .panel-header h1 {
        font-size: 1.75rem;
        line-height: 1.12;
        letter-spacing: 0;
        overflow-wrap: anywhere;
    }

    body.gh-user-page .panel-header p {
        font-size: 0.72rem;
        line-height: 1.35;
        letter-spacing: 1px;
    }

    body.gh-user-page .panel-header-icon {
        width: 42px;
        height: 42px;
    }

    body.gh-user-page .status-badge {
        width: 100%;
        min-width: 0;
        align-items: flex-start;
        box-sizing: border-box;
    }

    body.gh-user-page .profile-overview,
    body.gh-user-page .edit-sections,
    body.gh-user-page .publications-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    body.gh-user-page .profile-hero-card,
    body.gh-user-page .profile-side-panel,
    body.gh-user-page .info-card,
    body.gh-user-page .admin-card {
        padding: 18px;
        border-radius: 12px;
    }

    body.gh-user-page .profile-hero-main,
    body.gh-user-page .avatar-edit {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    body.gh-user-page .profile-avatar-frame {
        width: 96px;
        height: 96px;
        border-radius: 18px;
    }

    body.gh-user-page .profile-avatar-frame span {
        font-size: 2.35rem;
    }

    body.gh-user-page .profile-identity h2 {
        font-size: 1.6rem;
        line-height: 1.12;
    }

    body.gh-user-page .profile-detail-grid,
    body.gh-user-page .profile-stats-grid {
        grid-template-columns: 1fr;
    }

    body.gh-user-page .profile-detail-item,
    body.gh-user-page .profile-stat-card {
        min-height: 0;
    }

    body.gh-user-page .form-actions,
    body.gh-user-page .profile-actions {
        display: flex;
        flex-direction: column;
        gap: 14px;
        width: 100%;
        margin-left: 0;
    }

    body.gh-user-page .form-actions .admin-btn,
    body.gh-user-page .profile-actions .profile-action-primary,
    body.gh-user-page .profile-actions .profile-action-secondary,
    body.gh-user-page .avatar-controls .admin-btn {
        width: 100%;
        min-height: 42px;
        justify-content: center;
        box-sizing: border-box;
        margin-left: 0;
    }

    body.gh-user-page .admin-form-control,
    body.gh-user-page .info-card input,
    body.gh-user-page .info-card textarea,
    body.gh-user-page .info-card select {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    body.gh-user-page .help-text,
    body.gh-user-page .help-text-security {
        line-height: 1.35;
    }

    body.gh-user-page .gh-tabla-contenedor {
        padding: 10px !important;
        margin-top: 0;
        overflow-x: hidden !important;
        border-radius: 12px;
    }

    body.gh-user-page .gh-tabla,
    body.gh-user-page .gh-tabla thead,
    body.gh-user-page .gh-tabla tbody,
    body.gh-user-page .gh-tabla tr,
    body.gh-user-page .gh-tabla th,
    body.gh-user-page .gh-tabla td {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.gh-user-page .gh-tabla {
        display: block !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
    }

    body.gh-user-page .gh-tabla thead {
        display: none !important;
    }

    body.gh-user-page .gh-tabla tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    body.gh-user-page .gh-tabla tr {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 12px 14px !important;
        border: 1px solid rgba(216, 180, 254, 0.12) !important;
        border-radius: 10px !important;
        background: rgba(13, 13, 20, 0.94) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22) !important;
        overflow: hidden !important;
    }

    body.gh-user-page .gh-tabla td {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        padding: 12px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(216, 180, 254, 0.08) !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        white-space: normal !important;
        flex: 1 1 100% !important;
    }

    body.gh-user-page .gh-tabla td:last-child {
        border-bottom: 0 !important;
    }

    body.gh-user-page .gh-tabla td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 8px;
        color: var(--gh-magenta);
        font-family: var(--font-header);
        font-size: 0.66rem;
        letter-spacing: 1px;
        line-height: 1.1;
        text-transform: uppercase;
    }

    body.gh-user-page .gh-tabla td[colspan]::before,
    body.gh-user-page .gh-tabla td:not([data-label])::before {
        content: none;
    }

    body.gh-user-page .gh-tabla td[data-label="Comentarios"],
    body.gh-user-page .gh-tabla td[data-label="Likes"] {
        display: inline-flex !important;
        flex: 0 0 calc(50% - 6px) !important;
        width: calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
        align-self: stretch !important;
        justify-content: flex-start !important;
        min-height: 86px !important;
    }

    body.gh-user-page .gh-tabla td[data-label="Comentarios"]::before,
    body.gh-user-page .gh-tabla td[data-label="Likes"]::before {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
    }

    body.gh-user-page .gh-tabla td[data-label="Comentarios"] .user-count-badge,
    body.gh-user-page .gh-tabla td[data-label="Likes"] .user-count-badge {
        justify-content: flex-start;
    }

    body.gh-user-page .user-posts-table .gh-tabla tbody,
    body.gh-user-page .user-posts-table tbody {
        gap: 12px !important;
    }

    body.gh-user-page .user-posts-table .gh-tabla tr,
    body.gh-user-page .user-posts-table tr {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-areas:
            "titulo titulo"
            "categoria categoria"
            "fecha fecha"
            "comentarios likes"
            "acciones acciones" !important;
        gap: 0 !important;
        align-items: stretch !important;
    }

    body.gh-user-page .user-posts-table .gh-tabla td:nth-child(1),
    body.gh-user-page .user-posts-table td:nth-child(1) {
        grid-area: titulo !important;
    }

    body.gh-user-page .user-posts-table .gh-tabla td:nth-child(2),
    body.gh-user-page .user-posts-table td:nth-child(2) {
        grid-area: categoria !important;
    }

    body.gh-user-page .user-posts-table .gh-tabla td:nth-child(3),
    body.gh-user-page .user-posts-table td:nth-child(3) {
        grid-area: fecha !important;
    }

    body.gh-user-page .user-posts-table .gh-tabla td[data-label="Comentarios"],
    body.gh-user-page .user-posts-table td[data-label="Comentarios"] {
        grid-area: comentarios !important;
        width: auto !important;
        max-width: none !important;
        align-items: center !important;
        text-align: center !important;
    }

    body.gh-user-page .user-posts-table .gh-tabla td[data-label="Likes"],
    body.gh-user-page .user-posts-table td[data-label="Likes"] {
        grid-area: likes !important;
        width: auto !important;
        max-width: none !important;
        align-items: center !important;
        text-align: center !important;
    }

    body.gh-user-page .user-posts-table .gh-tabla td[data-label="Acciones"],
    body.gh-user-page .user-posts-table td[data-label="Acciones"] {
        grid-area: acciones !important;
    }

    body.gh-user-page .user-posts-table .gh-tabla td[data-label="Comentarios"]::before,
    body.gh-user-page .user-posts-table .gh-tabla td[data-label="Likes"]::before,
    body.gh-user-page .user-posts-table td[data-label="Comentarios"]::before,
    body.gh-user-page .user-posts-table td[data-label="Likes"]::before {
        margin-bottom: 4px !important;
        text-align: center !important;
    }

    body.gh-user-page .user-posts-table .gh-tabla td[data-label="Comentarios"] .user-count-badge,
    body.gh-user-page .user-posts-table .gh-tabla td[data-label="Likes"] .user-count-badge,
    body.gh-user-page .user-posts-table td[data-label="Comentarios"] .user-count-badge,
    body.gh-user-page .user-posts-table td[data-label="Likes"] .user-count-badge {
        justify-content: center !important;
        width: 100% !important;
    }

    body.gh-user-page .user-posts-table .gh-tabla td[data-label="Comentarios"] .user-count-badge span,
    body.gh-user-page .user-posts-table .gh-tabla td[data-label="Likes"] .user-count-badge span,
    body.gh-user-page .user-posts-table td[data-label="Comentarios"] .user-count-badge span,
    body.gh-user-page .user-posts-table td[data-label="Likes"] .user-count-badge span {
        text-align: center !important;
    }

    body.gh-user-page .gh-text-truncate {
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }

    body.gh-user-page .gh-tabla td[data-label="Acciones"] .gh-acciones-grupo,
    body.gh-user-page .gh-tabla td[data-label="Acciones"]>div,
    body.gh-user-page .gh-tabla td[data-label="Acciones"]>form,
    body.gh-user-page .gh-tabla td[data-label="Acciones"]>a {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.gh-user-page .gh-btn-accion,
    body.gh-user-page .gh-tabla td[data-label="Acciones"] .gh-btn-accion,
    body.gh-user-page .gh-tabla td[data-label="Acciones"] button,
    body.gh-user-page .gh-tabla td[data-label="Acciones"] a {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 40px !important;
        margin: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    body.gh-user-page .gh-tabla td[data-label="Comentarios"],
    body.gh-user-page .gh-tabla td[data-label="Likes"] {
        text-align: center !important;
        justify-content: center !important;
        min-height: 68px !important;
    }

    body.gh-user-page .user-guias-table .gh-tabla tbody,
    body.gh-user-page .user-guias-table tbody {
        gap: 12px !important;
    }

    body.gh-user-page .user-guias-table .gh-tabla tr,
    body.gh-user-page .user-guias-table tr {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-areas:
            "titulo titulo"
            "juego juego"
            "fecha fecha"
            "comentarios likes"
            "acciones acciones" !important;
        gap: 0 !important;
        align-items: stretch !important;
    }

    body.gh-user-page .user-guias-table .gh-tabla td:nth-child(1),
    body.gh-user-page .user-guias-table td:nth-child(1) {
        grid-area: titulo !important;
    }

    body.gh-user-page .user-guias-table .gh-tabla td:nth-child(2),
    body.gh-user-page .user-guias-table td:nth-child(2) {
        grid-area: juego !important;
    }

    body.gh-user-page .user-guias-table .gh-tabla td:nth-child(3),
    body.gh-user-page .user-guias-table td:nth-child(3) {
        grid-area: fecha !important;
    }

    body.gh-user-page .user-guias-table .gh-tabla td[data-label="Comentarios"],
    body.gh-user-page .user-guias-table td[data-label="Comentarios"] {
        grid-area: comentarios !important;
        width: auto !important;
        max-width: none !important;
        align-items: center !important;
        text-align: center !important;
    }

    body.gh-user-page .user-guias-table .gh-tabla td[data-label="Likes"],
    body.gh-user-page .user-guias-table td[data-label="Likes"] {
        grid-area: likes !important;
        width: auto !important;
        max-width: none !important;
        align-items: center !important;
        text-align: center !important;
    }

    body.gh-user-page .user-guias-table .gh-tabla td[data-label="Acciones"],
    body.gh-user-page .user-guias-table td[data-label="Acciones"] {
        grid-area: acciones !important;
    }

    body.gh-user-page .user-guias-table .gh-tabla td[data-label="Comentarios"] .user-count-badge,
    body.gh-user-page .user-guias-table .gh-tabla td[data-label="Likes"] .user-count-badge,
    body.gh-user-page .user-guias-table td[data-label="Comentarios"] .user-count-badge,
    body.gh-user-page .user-guias-table td[data-label="Likes"] .user-count-badge {
        justify-content: center !important;
        width: 100% !important;
    }

    body.gh-user-page .user-social-table .gh-tabla tbody,
    body.gh-user-page .user-social-table tbody {
        gap: 12px !important;
    }

    body.gh-user-page .user-social-table .gh-tabla tr,
    body.gh-user-page .user-social-table tr {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-areas:
            "id id"
            "media media"
            "contenido contenido"
            "fecha fecha"
            "comentarios likes"
            "acciones acciones" !important;
        gap: 0 !important;
        align-items: stretch !important;
    }

    body.gh-user-page .user-social-table .gh-tabla td:nth-child(1),
    body.gh-user-page .user-social-table td:nth-child(1) {
        grid-area: id !important;
    }

    body.gh-user-page .user-social-table .gh-tabla td:nth-child(2),
    body.gh-user-page .user-social-table td:nth-child(2) {
        grid-area: media !important;
    }

    body.gh-user-page .user-social-table .gh-tabla td:nth-child(3),
    body.gh-user-page .user-social-table td:nth-child(3) {
        grid-area: contenido !important;
    }

    body.gh-user-page .user-social-table .gh-tabla td:nth-child(4),
    body.gh-user-page .user-social-table td:nth-child(4) {
        grid-area: fecha !important;
    }

    body.gh-user-page .user-social-table .gh-tabla td[data-label="Comentarios"],
    body.gh-user-page .user-social-table td[data-label="Comentarios"] {
        grid-area: comentarios !important;
        width: auto !important;
        max-width: none !important;
        align-items: center !important;
        text-align: center !important;
    }

    body.gh-user-page .user-social-table .gh-tabla td[data-label="Likes"],
    body.gh-user-page .user-social-table td[data-label="Likes"] {
        grid-area: likes !important;
        width: auto !important;
        max-width: none !important;
        align-items: center !important;
        text-align: center !important;
    }

    body.gh-user-page .user-social-table .gh-tabla td[data-label="Acciones"],
    body.gh-user-page .user-social-table td[data-label="Acciones"] {
        grid-area: acciones !important;
    }

    body.gh-user-page .user-social-table .gh-tabla td[data-label="Comentarios"] .user-count-badge,
    body.gh-user-page .user-social-table .gh-tabla td[data-label="Likes"] .user-count-badge,
    body.gh-user-page .user-social-table td[data-label="Comentarios"] .user-count-badge,
    body.gh-user-page .user-social-table td[data-label="Likes"] .user-count-badge {
        justify-content: center !important;
        width: 100% !important;
    }
}

@media (max-width: 640px) {
    body.gh-user-page .user-main {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.gh-user-page .user-sidebar {
        width: min(88vw, 320px);
    }

    body.gh-user-page .user-mobile-menu-button {
        bottom: calc(12px + env(safe-area-inset-bottom));
        min-width: 138px;
        min-height: 50px;
    }

    body.gh-user-page .panel-header h1 {
        font-size: 1.52rem;
    }

    body.gh-user-page .profile-hero-card,
    body.gh-user-page .profile-side-panel,
    body.gh-user-page .info-card,
    body.gh-user-page .admin-card {
        padding: 16px;
    }
}

.static-page {
    padding: 150px 20px 100px;
    background: #050505;
    min-height: 80vh;
}

.static-container {
    max-width: 900px;
    margin: 0 auto;
}

.orbitron-title {
    font-family: 'Orbitron', sans-serif;
    color: #fff;
    font-size: 2.5rem;
    margin-bottom: 40px;
    text-align: center;
}

.content-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(233, 30, 99, 0.2);
    padding: 40px;
    border-radius: 15px;
    color: #ccc;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.2rem;
    line-height: 1.8;
}

.content-box h3 {
    color: #e91e63;
    font-family: 'Orbitron', sans-serif;
    margin-top: 30px;
    margin-bottom: 15px;
}

.content-box ul {
    margin-left: 20px;
    list-style-type: square;
}

.content-box ul li {
    margin-bottom: 10px;
}

.last-update {
    font-style: italic;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 20px;
}

.contact-mail {
    color: #fff;
    font-weight: bold;
    font-size: 1.3rem;
}

/*======================================================================================================================
ESTILOS PARA VERSION DE MOVIL
============================================================================================================== */
/* 1. Escondemos los controles de móvil en la versión de PC */
.menu-checkbox,
.menu-btn,
.mobile-user-links,
.menu-overlay {
    display: none;
}

@media (max-width: 992px) {
    header {
        padding: 0 !important;
    }

    /* Permitimos que el header se oculte también en móvil si se desea */
    header#gh-main-header.header-hidden {
        transform: translateY(-100%);
    }

    /* 2. Ajuste de la fila: Logo a la izq, botón a la der */
    .header-fila {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 15px 25px !important;
        box-sizing: border-box;
        min-height: 70px;
    }

    /* 3. Logo pegado a la izquierda */
    .header-logo {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        position: static !important;
        transform: none !important;
    }

    .header-logo-texto {
        font-size: 1.3rem !important;
        letter-spacing: 2px;
        white-space: nowrap;
        margin: 0 !important;
    }

    /* 4. El botón hamburguesa movido a la izquierda */
    .menu-btn {
        display: flex !important;
        flex-direction: column;
        gap: 6px;
        cursor: pointer;
        z-index: 11000;
        width: 32px !important;
        height: 25px !important;
        justify-content: center;
        align-items: center;
        margin: 0 !important;
        position: fixed !important;
        top: 23px;
        right: 24px;
        transform: none !important;
    }

    .menu-btn span {
        display: block;
        width: 100%;
        height: 3px;
        background: var(--gh-magenta);
        transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.25s ease, box-shadow 0.25s ease;
        border-radius: 2px;
        box-shadow: 0 0 10px rgba(255, 0, 200, 0.4);
    }

    body.mobile-menu-detached .menu-btn span {
        background: #fff;
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
    }

    .menu-checkbox:checked+.menu-btn span {
        background: var(--gh-magenta);
        box-shadow: 0 0 10px rgba(255, 0, 200, 0.55);
    }

    /* 5. El Menú Desplegable */
    .header-nav {
        display: flex !important;
        flex-direction: column !important;
        position: fixed;
        top: 0;
        right: -100%;
        width: min(82vw, 330px);
        max-width: 330px;
        height: 100vh !important;
        background:
            radial-gradient(circle at 12% 8%, rgba(255, 0, 200, 0.18), transparent 28%),
            radial-gradient(circle at 95% 18%, rgba(34, 255, 229, 0.1), transparent 26%),
            linear-gradient(180deg, rgba(14, 10, 24, 0.98), rgba(5, 6, 10, 0.98));
        backdrop-filter: blur(18px);
        padding: 92px 18px 22px !important;

        transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 9999;
        border-left: 1px solid rgba(255, 0, 200, 0.46);
        box-sizing: border-box !important;
        box-shadow: -24px 0 60px rgba(0, 0, 0, 0.55);

        /* Esto evita que el scroll afecte a lo de atrás */
        overflow-y: auto !important;
        touch-action: pan-y;
    }

    /* 6. Control del Menú */
    .menu-checkbox:checked~.header-nav {
        right: 0;
    }

    .menu-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(4px);
        z-index: 999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .menu-checkbox:checked~.menu-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    /* 7. Icono X */
    .menu-checkbox:checked+.menu-btn span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }

    .menu-checkbox:checked+.menu-btn span:nth-child(2) {
        opacity: 0;
    }

    .menu-checkbox:checked+.menu-btn span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -7px);
    }

    /* 8. Links del drawer */
    .header-nav a {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 1rem !important;
        padding: 12px 14px !important;
        margin-bottom: 8px !important;
        width: 100%;
        min-height: 46px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 8px;
        text-align: left;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.035);
    }

    .header-nav a:hover,
    .header-nav a.active {
        color: #fff;
        background: rgba(168, 85, 247, 0.14);
        border-color: rgba(216, 180, 254, 0.34);
    }

    .header-nav a.active::after {
        display: none;
    }

    /* 9. Escritorio Off */
    .desktop-only {
        display: none !important;
    }

    /* 10. Contenedor de botones pegado arriba */
    .mobile-user-links {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 14px !important;
        padding-top: 16px;
        border-top: 1px solid rgba(216, 180, 254, 0.16);
    }

    .mobile-user-links a,
    .mobile-logout {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        font-size: 0.9rem !important;
        padding: 12px 14px !important;
        border-radius: 8px;
        width: 100%;
        min-height: 46px;
        box-sizing: border-box;
        font-family: 'Rajdhani', sans-serif;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .mobile-user-links i,
    .mobile-logout i {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }

    .mobile-user-links .mobile-admin-link {
        color: #fff;
        background: linear-gradient(135deg, rgba(124, 58, 237, 0.88), rgba(255, 0, 200, 0.82));
        border-color: rgba(216, 180, 254, 0.42);
        box-shadow: 0 0 18px rgba(168, 85, 247, 0.24);
    }

    .mobile-user-links .mobile-profile-link {
        color: #dbeafe;
        background: rgba(34, 255, 229, 0.08);
        border-color: rgba(34, 255, 229, 0.18);
    }

    .mobile-logout {
        color: #fecdd3;
        background: rgba(244, 63, 94, 0.1);
        border: 1px solid rgba(244, 63, 94, 0.34);
        cursor: pointer;
        transition: var(--transition);
    }

    .mobile-logout:hover {
        color: #fff;
        background: rgba(244, 63, 94, 0.2);
        box-shadow: 0 0 18px rgba(244, 63, 94, 0.2);
    }

    /* Esto evita que la página de atrás se mueva cuando el menú está abierto */
    body:has(.menu-checkbox:checked) {
        overflow: hidden !important;
    }
}

/* ====================================================00
ADAPTACIÓN HERO PARA MÓVIL
=======================================================*/
@media (max-width: 768px) {
    body.gh-index-page {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .tituloH1LoginRegistro {
        font-size: 2rem !important;
        text-align: center !important;
        width: 100% !important;
        margin-bottom: 25px !important;
        font-family: var(--font-header);
        background: var(--gh-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        letter-spacing: 1px;
    }

    .btn-pro {
        font-size: 1rem !important;
        display: block !important;
        width: 100% !important;
        max-width: 280px;
        margin: 0 auto !important;
        text-align: center !important;
        padding: 14px 20px !important;
        border-radius: 12px !important;
        background: var(--gh-gradient) !important;
        box-shadow: 0 10px 20px rgba(168, 85, 247, 0.2) !important;
    }

    /* 1. Tu bloque original (EL QUE FUNCIONA) */
    .home-hero {
        height: 100vh !important;
        min-height: 500px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 20px !important;
        margin: 0 !important;
        position: relative !important;
        text-align: center !important;
        /* Fuerza el centro a todo lo de dentro */
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        box-sizing: border-box !important;
    }

    /* 2. Tu bloque original */
    .hero-content {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: calc(100% - 24px) !important;
        margin: 0 auto !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* 3. Título: (Tu código original) */
    .hero-title {
        font-size: 2rem !important;
        width: 100% !important;
        margin: 0 0 15px 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        display: block !important;
        text-align: center !important;
        /* Aseguramos centro */
    }

    /* 4. Subtítulo: AQUÍ ESTÁ EL CAMBIO MÍNIMO */
    .hero-subtitle {
        font-size: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 30px auto !important;
        /* Centrado horizontal */
        padding: 0 !important;
        /* Limpiamos cualquier padding de escritorio */
        line-height: 1.5 !important;
        display: block !important;
        text-align: center !important;
        /* OBLIGAMOS al texto a centrarse línea a línea */
        overflow-wrap: break-word !important;
    }



    /* 6. Parallax: (Tu código original) */
    .hero-parallax-bg {
        background-attachment: scroll !important;
        background-position: center !important;
        background-size: cover !important;
    }
}


/* Responsive foro tablet */

@media (min-width: 769px) and (max-width: 1100px) {

    .foro {
        padding: 28px 4%;
    }

    .foro-contenedor {
        max-width: 100%;
        grid-template-columns: 28% 1fr;
        gap: 20px;
    }

    .foro-principal {
        padding: 22px;
    }

    .foro-cabecera h1 {
        font-size: 1.9rem;
    }

    .foro-busqueda {
        gap: 10px;
    }

    .post-card {
        padding: 20px;
    }

    .enlace-posts {
        gap: 18px;
    }

    .post-respuestas {
        min-width: 105px;
    }

    .post-show-contenedor {
        max-width: 85%;
    }

    .crear-post-contenedor {
        width: 85%;
    }

    .post-show-titulo {
        font-size: 2rem;
    }
}

/* Responsive foro movil*/

@media (max-width: 768px) {

    .foro,
    .crear-post,
    .post-show {
        width: 100vw;
        max-width: 100vw;
        padding: 20px 4%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .foro-contenedor {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin: 0;
        box-sizing: border-box;
    }

    .foro-lateral,
    .foro-principal,
    .bloque-lateral,
    .crear-post-contenedor,
    .post-show-contenedor,
    .post-show-contenido,
    .comentarios-lista,
    .comentario-card,
    .comentario-form,
    .crear-post-form,
    .crear-campo,
    .crear-editor,
    .ql-toolbar,
    .ql-container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .foro-lateral {
        position: static;
    }

    .foro-principal,
    .crear-post-contenedor,
    .post-show-contenedor {
        padding: 20px;
    }

    .lista-categorias {
        max-width: 100%;
        overflow-x: hidden;
    }

    .lista-categorias-abierta {
        max-height: 260px;
    }

    .foro-cabecera h1 {
        font-size: 1.6rem;
        line-height: 1.2;
    }

    .foro-busqueda {
        flex-direction: column;
        gap: 10px;
    }

    .foro-busqueda-input,
    .foro-busqueda-boton,
    .boton-crear,
    .boton-crear-categoria,
    .crear-input,
    .crear-select,
    .crear-boton {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .boton-crear,
    .boton-crear-categoria,
    .foro-busqueda-boton,
    .crear-boton,
    .post-ver-mas {
        text-align: center;
        overflow: hidden;
        white-space: normal;
    }

    .post-card {
        padding: 18px;
    }

    .enlace-posts {
        flex-direction: column;
        gap: 16px;
    }

    .post-titulo {
        font-size: 1rem;
        line-height: 1.3;
        word-break: break-word;
    }

    .post-meta,
    .post-show-meta {
        font-size: 0.85rem;
    }

    .post-contenido,
    .post-show-contenido,
    .ql-editor {
        overflow-wrap: anywhere;
    }

    .post-contenido {
        font-size: 0.9rem;
    }

    .post-respuestas {
        min-width: 0;
        width: 100%;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .post-ver-mas {
        width: 100%;
        box-sizing: border-box;
    }

    .pagination-foro {
        flex-direction: column;
        gap: 10px;
    }

    .page-info {
        text-align: center;
        font-size: 0.8rem;
    }

    .post-show-titulo,
    .crear-post-cabecera h1 {
        font-size: 1.7rem;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .acciones-publicacion {
        flex-wrap: wrap;
        gap: 10px;
    }

    .post-show-contenido img,
    .post-show-contenido iframe,
    .post-show-contenido video {
        max-width: 100%;
        height: auto;
    }

    .comentario-meta {
        flex-wrap: wrap;
        gap: 8px;
    }

    .comentario-card {
        padding: 14px;
    }

    .comentario-respuesta {
        margin-left: 4%;
    }

    .comentario-textarea {
        min-height: 100px;
    }

    .crear-editor,
    .crear-editor .ql-container.ql-snow,
    .crear-editor .ql-editor {
        min-height: 180px;
    }

    .ql-toolbar.ql-snow {
        overflow-x: auto;
        white-space: nowrap;
    }

    .ql-container.ql-snow {
        overflow-x: hidden;
    }
}

@media (max-width: 1318px) {
    .titulo-bloque {
        font-size: clamp(1rem, 1.3vw, 1.3rem)
    }
}


/* Responsive guías tablet */
@media (min-width: 769px) and (max-width: 1100px) {

    .guias {
        padding: 28px 4%;
    }

    .guias-contenedor {
        max-width: 100%;
    }

    .guias-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }

    .guias-cabecera h1 {
        font-size: 2rem;
    }

    .guia-show-imagen {
        max-height: 340px;
    }

    .guia-show-imagen img {
        max-height: 340px;
    }
}

/* Responsive Guías móvil */
@media (max-width: 768px) {
    .guias {
        width: 100vw;
        max-width: 100vw;
        padding: 20px 4%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .guias-contenedor {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .guias-cabecera {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .guias-cabecera h1 {
        font-size: 1.7rem;
        line-height: 1.2;
    }

    .guias-cabecera p {
        font-size: 0.95rem;
    }

    .guias-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .guia-card {
        width: 100%;
        max-width: 100%;
    }

    .guia-imagen {
        aspect-ratio: 16 / 9;
        max-height: 220px;
    }

    .guia-info {
        padding: 16px;
    }

    .guia-titulo {
        font-size: 1rem;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .guia-meta,
    .guia-preview {
        font-size: 0.85rem;
    }

    .guia-show-imagen {
        width: 100%;
        max-height: 260px;
        overflow: hidden;
    }

    .guia-show-imagen img {
        max-width: 100%;
        max-height: 260px;
        object-fit: contain;
    }

    .guia-edit-imagen-actual img {
        max-width: 100%;
        max-height: 180px;
        object-fit: contain;
    }
}

.input-archivo {
    display: none;
}

.archivo-campo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Botones archivos*/

.boton-archivo {
    display: inline-block;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--gh-gradient);
    color: #fff;
    font-family: var(--font-header);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.boton-archivo:hover {
    box-shadow: var(--gh-glow);
    transform: translateY(-2px);
}

.archivo-nombre {
    color: #9ca3af;
    font-size: 0.9rem;
}

/* Responsive social tablet*/
@media (min-width: 769px) and (max-width: 1100px) {

    .social-layout {
        grid-template-columns: 26% minmax(0, 1fr);
        gap: 20px;
        padding-right: 4%;
    }

    .social-sidebar {
        padding: 110px 18px 28px 18px;
    }

    .social-sidebar-logo h2 {
        font-size: 1.25rem;
    }

    .social-contenedor,
    .perfil-contenedor,
    .buscar-usuarios-contenedor {
        width: 100%;
        max-width: 100%;
    }

    .social-post {
        grid-template-columns: 52px 1fr;
    }

    .social-media {
        max-height: 420px;
    }

    .perfil-cabecera {
        align-items: flex-start;
    }
}

.social-mobile-menu-toggle,
.social-mobile-menu-button,
.social-mobile-menu-backdrop {
    display: none;
}

/* Responsive social movil*/
@media (max-width: 768px) {

    .social-layout {
        width: 100vw;
        max-width: 100vw;
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 20px 4%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .social-sidebar,
    .social-layout-contenido,
    .social,
    .social-contenedor,
    .perfil-social,
    .perfil-contenedor,
    .buscar-usuarios,
    .buscar-usuarios-contenedor {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .social-sidebar {
        padding: 22px;
        border-radius: 14px;
    }

    .social {
        padding: 0;
        overflow-x: hidden;
    }

    .social-contenedor {
        margin: 0;
        padding: 0;
    }

    .social-sidebar-logo h2,
    .social-cabecera h1,
    .buscar-usuarios h1,
    .perfil-info h1 {
        font-size: 1.7rem;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .social-sidebar-nav {
        gap: 14px;
    }

    .social-sidebar-link,
    .social-sidebar-boton,
    .social-sidebar-busqueda,
    .social-sidebar-input,
    .boton-crear,
    .social-textarea,
    .social-boton,
    .boton-archivo {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .social-form {
        padding: 18px;
    }

    .social-imagen-campo,
    .archivo-campo {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .boton-archivo {
        text-align: center;
    }

    .social-post,
    .social-post-show,
    .social-comentarios-bloque,
    .comentario-form,
    .comentarios-lista,
    .comentario-card,
    .usuario-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .social-post {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 12px;
        padding: 16px;
        overflow: hidden;
    }

    .social-post-show {
        display: flex;
        flex-direction: column;
        padding: 16px;
    }

    .social-post-contenido {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .social-avatar img {
        width: 44px;
        height: 44px;
    }

    .social-post-meta,
    .social-acciones,
    .perfil-stats,
    .perfil-tabs {
        flex-wrap: wrap;
    }

    .social-post-meta {
        gap: 6px;
        font-size: 0.85rem;
    }

    .social-acciones {
        gap: 12px;
    }

    .social-post-texto {
        overflow-wrap: anywhere;
    }

    .social-media {
        width: 100%;
        max-width: 100%;
        max-height: 360px;
        height: auto;
        object-fit: contain;
        display: block;
        margin: 0;
    }

    .perfil-cabecera {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px;
    }

    .perfil-avatar {
        width: 90px;
        height: 90px;
    }

    .perfil-tab {
        flex: 1;
        text-align: center;
    }

    .perfil-feed .social-media {
        max-width: 100%;
        max-height: 360px;
    }

    .comentarios-titulo {
        font-size: 1.5rem;
        overflow-wrap: anywhere;
    }

    .pagination-foro,
    .pagination {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .social-mobile-menu-button {
        display: flex;
        position: fixed;
        left: 16px;
        bottom: 18px;
        z-index: 1001;
        align-items: center;
        gap: 10px;
        padding: 12px 18px;
        border-radius: 10px;
        background: var(--gh-gradient);
        color: #fff;
        font-family: var(--font-header);
        font-weight: 700;
        cursor: pointer;
        box-shadow: var(--gh-glow);
    }

    .social-mobile-menu-icon {
        width: 22px;
        height: 22px;
    }

    .social-mobile-menu-icon-close {
        display: none;
    }

    .social-mobile-menu-toggle:checked+.social-mobile-menu-button .social-mobile-menu-icon-open {
        display: none;
    }

    .social-mobile-menu-toggle:checked+.social-mobile-menu-button .social-mobile-menu-icon-close {
        display: block;
    }

    .social-mobile-menu-backdrop {
        display: none;
    }

    .social-mobile-menu-toggle:checked~.social-mobile-menu-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 999;
    }

    .social-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 82%;
        max-width: 320px;
        height: 100vh;
        z-index: 1000;
        transform: translateX(-105%);
        transition: transform 0.25s ease;
        border-radius: 0 14px 14px 0;
        overflow-y: auto;
        padding-top: 95px;
    }

    .social-mobile-menu-toggle:checked~.social-sidebar {
        transform: translateX(0);
    }
}


/* ============================
   PÁGINA EQUIPO
   ============================ */
/* 1. Fondo general */
.equipo-wrapper {
    padding: 120px 5% 80px 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 80vh;
    background: radial-gradient(circle at center, #1a1a2e 0%, #0a0a0f 100%);
}

/* 2. Cabecera y Títulos */
.equipo-header {
    text-align: center;
    margin-bottom: 50px;
}

.equipo-header h1 {
    font-size: 3.5rem;
    color: #fff;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.text-magenta {
    color: #e91e63;
    text-shadow: 0 0 20px rgba(233, 30, 99, 0.8);
}

.subtitle {
    color: #aaa;
    font-size: 1.2rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* 3. CAJA DEL PROYECTO TFG */
.proyecto-info-box {
    background: rgba(20, 20, 30, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(233, 30, 99, 0.3);
    border-radius: 15px;
    padding: 40px;
    max-width: 800px;
    text-align: center;
    margin-bottom: 60px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(233, 30, 99, 0.05);
    overflow: hidden;
    justify-self: center;
}

.proyecto-info-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #e91e63, transparent);
    animation: luzNeon 3s linear infinite;
}

@keyframes luzNeon {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

.proyecto-info-box h2 {
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.proyecto-info-box p {
    color: #ccc;
    font-size: 1.1rem;
    line-height: 1.8;
}

.proyecto-info-box strong {
    color: #e91e63;
    font-weight: bold;
}

/* 4. TARJETAS DEL EQUIPO */
.team-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px;
    align-items: stretch;
    /* FIX: Obliga a todas las tarjetas a medir lo mismo de alto */
}

.team-card {
    background: linear-gradient(145deg, rgba(30, 30, 45, 0.8), rgba(15, 15, 20, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 50px 30px;
    text-align: center;
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;

    /* FIX: Convertimos el interior en una columna elástica */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.team-card:hover {
    transform: translateY(-15px);
    border-color: #e91e63;
    box-shadow: 0 15px 35px rgba(233, 30, 99, 0.2), 0 0 20px rgba(233, 30, 99, 0.5);
}

.dev-avatar {
    font-size: 5rem;
    color: #fff;
    margin-bottom: 20px;
    display: inline-block;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
    transition: all 0.4s ease;
}

.team-card:hover .dev-avatar {
    color: #e91e63;
    transform: scale(1.15) rotate(5deg);
    text-shadow: 0 0 30px rgba(233, 30, 99, 0.9);
}

/* FIX: Controlamos el título de 2 líneas */
.team-card h3 {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 15px;
    letter-spacing: 1px;

    /* Reserva siempre la altura de 2 líneas para que no descuadre */
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
}

/* FIX: Anclado abajo del todo gracias al flex de la tarjeta */
.dev-role {
    color: #e91e63;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin-top: auto;
    /* Esta es la clave que empuja el texto abajo */
    width: 100%;
}

/* 5. ADAPTACIÓN MÓVIL */
@media (max-width: 768px) {

    /* 1. WRAPPER: Quitamos el flex centrado que recorta por los lados */
    body .equipo-wrapper {
        display: block !important;
        padding: 100px 15px 40px 15px !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        margin: 0 !important;
    }

    /* 2. CABECERA Y TÍTULO */
    body .equipo-header {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 30px !important;
    }

    body .equipo-header h1 {
        font-size: 2.2rem !important;
        /* Obligamos a romper la palabra si no cabe */
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        width: 100% !important;
    }

    /* 3. CAJA DEL PROYECTO (La que se cortaba) */
    body .proyecto-info-box {
        padding: 25px 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        /* Vital para que no desborde */
        box-sizing: border-box !important;
        margin: 0 0 40px 0 !important;
        /* Quitamos márgenes auto que rompen el ancho */
    }

    body .proyecto-info-box h2,
    body .proyecto-info-box p {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    body .proyecto-info-box h2 {
        font-size: 1.5rem !important;
    }

    body .proyecto-info-box p {
        font-size: 1rem !important;
    }

    /* 4. TARJETAS DEL EQUIPO */
    body .team-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 20px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    body .team-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 30px 20px !important;
        min-height: auto !important;
        margin: 0 !important;
    }

    body .team-card h3 {
        min-height: auto !important;
        /* En móvil no hace falta bloquear la altura */
        word-wrap: break-word !important;
    }
}


/* ============================================================
   OPTIMIZACIÓN SECCIÓN COMUNIDAD (MÓVIL)
   ============================================================ */
@media (max-width: 768px) {

    /* 1. ELIMINAR LA IMAGEN Y SU CONTENEDOR EN MÓVIL */
    .seo-image {
        display: none !important;
    }

    /* 2. RESET DEL CONTENEDOR SUPERIOR (El que envuelve todo) */
    .seo-community-section,
    .seo-container {
        display: block !important;
        /* Quitamos el Flex o Grid de escritorio */
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        left: 0 !important;
        transform: none !important;
        overflow: hidden !important;
    }

    /* 3. EL BLOQUE DE CONTENIDO (Ahora ocupa todo el ancho) */
    .seo-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;

        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 60px 20px !important;
        /* Espacio para que respire el texto */

        position: relative !important;
        left: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    /* 4. TEXTOS (Título y Subtítulo) */
    .seo-content h2 {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
        width: 100% !important;
    }

    .seo-content p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 30px !important;
        padding: 0 10px !important;
    }

    /* 5. FEATURES (Noticias / Debates) */
    .seo-features {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
        margin-bottom: 35px !important;
    }

    .seo-features a {
        width: 100% !important;
        text-decoration: none !important;
    }

    .seo-features .feature {
        width: 100% !important;
        margin: 0 !important;
        padding: 15px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(233, 30, 99, 0.3) !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    /* 6. BOTONES (Ancho controlado y centrado) */
    .btn-foro-gradient {
        display: block !important;
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto 15px auto !important;
        position: relative !important;
        left: 0 !important;
        transform: none !important;
    }

    .btn-foro-gradient span {
        display: block !important;
        padding: 15px !important;
        text-align: center !important;
    }
}

/*====================================================================================================
SECCION DE FORO EN EL HOME-MOVIL
=====================================================================================================*/
.news-card {
    position: relative !important;
    /* VITAL para el stretched-link */
    display: flex;
    flex-direction: column;
}

.stretched-link::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    /* Cubre toda la card por encima de todo */
}

@media (max-width: 768px) {

    .news-section,
    .foro-home-section {
        padding-left: 18px !important;
        padding-right: 18px !important;
        box-sizing: border-box !important;
    }

    .news-header-flex,
    .foro-home-section .foro-header-flex {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 18px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 28px !important;
        padding: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .news-header-flex h2,
    .foro-home-section .foro-header-flex h2 {
        font-size: clamp(1.55rem, 7vw, 2rem) !important;
        letter-spacing: 1.5px !important;
        line-height: 1.12 !important;
        width: 100% !important;
        max-width: 330px !important;
        margin: 0 auto !important;
        text-align: center !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
        white-space: normal !important;
    }

    .news-header-flex h2::after,
    .foro-home-section .foro-header-flex h2::after {
        margin: 12px auto 0 !important;
        width: 86px;
    }

    .news-header-flex .btn-view-all,
    .foro-home-section .btn-view-all {
        width: min(100%, 260px) !important;
        min-height: 48px !important;
        margin: 0 auto !important;
        padding: 12px 18px !important;
        align-self: center !important;
        text-align: center !important;
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
        white-space: normal !important;
    }

    /* 1. Alineamos el contenedor hacia la izquierda */
    .foro-home-section .foro-header-flex {
        align-items: center !important;
        text-align: center !important;
    }

    /* 2. El Título: El encaje perfecto */
    .foro-home-section .foro-header-flex h2 {
        text-align: center !important;

        /* FUERZA BRUTA: Si por un casual choca, la rompe sí o sí */
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;

        line-height: 1.4 !important;
        margin: 0 0 15px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }

    /* 3. El Botón "Ir al foro" */
    .foro-home-section .btn-view-all {
        margin-top: 0 !important;
        align-self: center !important;
    }
}


/*========================================================================
VERSION MOVIL PAGINA DE ARCHIVE(TODAS LAS NOTICIAS)
==========================================================================*/
@media (max-width: 768px) {

    /* 1. EL CONTENEDOR: Le prohibimos ser más ancho que la pantalla */
    body .archive-main-container,
    body .archive-content {
        width: 100% !important;
        max-width: 100vw !important;
        /* Máximo el 100% de la ventana */
        box-sizing: border-box !important;
        padding: 60px 15px 20px 15px !important;
        /* Espacio lateral para que no pegue al cristal */
        overflow-x: hidden !important;
        /* Prohíbe cualquier scroll horizontal */
        margin: 0 !important;
        display: block !important;
    }

    /* 2. EL TÍTULO PRINCIPAL: Centrado a la izquierda */
    body .archive-section-title {
        text-align: left !important;
        /* Lo que pediste: alineado a la izquierda */
        font-size: 1.8rem !important;
        width: 100% !important;
        margin: 0 0 15px 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
    }

    /* 3. LISTA DE NOTICIAS: Forzamos a que respete el límite de la pantalla */
    body .archive-list {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        /* No puede crecer más que el contenedor */
        box-sizing: border-box !important;
        gap: 20px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 4. LAS CARDS: Ocupan el máximo pero se adaptan por dentro */
    body .news-post-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
        /* Quitamos Flex temporalmente para que la card no se estire */
        margin: 0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        /* Corta cualquier cosa que intente salirse */
    }

    body .post-card-layout {
        display: flex !important;
        flex-direction: column !important;
        /* Imagen arriba, texto abajo */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Imagen adaptable */
    body .post-thumbnail {
        width: 100% !important;
        max-width: 100% !important;
        height: 180px !important;
        background-size: cover !important;
        background-position: center !important;
    }

    /* 5. EL CONTENIDO DE LA CARD: Adaptable al ancho */
    body .post-details {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 15px !important;
        min-width: 0 !important;
        /* CRÍTICO: Permite que el texto se encoja si es necesario */
    }

    /* Título de la noticia (evita que rompa la caja) */
    body .post-title {
        text-align: left !important;
        font-size: 1.2rem !important;
        width: 100% !important;
        max-width: 100% !important;

        /* Combo destructor de textos largos */
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: anywhere !important;
        /* Si no cabe, salta a la siguiente línea cueste lo que cueste */

        margin: 0 0 10px 0 !important;
        line-height: 1.3 !important;
    }

    /* Metadatos y descripción (Ajustes para que no se salgan) */
    body .post-meta,
    body .post-excerpt {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }
}

/* ============================================================
   VISTA DETALLE DE NOTICIA/JUEGO - VERSIÓN MÓVIL
   ============================================================ */

@media (max-width: 768px) {

    /* 1. CONTENEDOR GLOBAL */
    body .news-detail-wrapper {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        /* Corta por lo sano cualquier desborde */
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    /* 2. EL HERO Y EL TÍTULO (FIX PARA EL CORTE DE PRINCE OF PERSIA) */
    body .game-hero {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 100px 20px 40px 20px !important;
        /* Espacio arriba para la navbar */
        background-position: center !important;
        background-size: cover !important;
    }

    body .hero-info {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body .hero-info h1 {
        font-size: 1.8rem !important;
        /* Tamaño adaptable */
        text-align: left !important;
        line-height: 1.2 !important;

        /* EL COMBO ANTI-CORTES VITAL */
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        /* Obliga a romper la palabra antes de salir de la pantalla */

        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        width: 100% !important;
        display: block !important;
    }

    body .news-meta {
        font-size: 0.9rem !important;
        text-align: left !important;
        display: block !important;
    }

    /* 3. GRID PRINCIPAL: Pasamos de Columnas a Filas (Apilado) */
    body .game-content-grid {
        display: flex !important;
        flex-direction: column !important;
        /* Texto principal arriba, datos técnicos abajo */
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 20px !important;
        gap: 30px !important;
        /* Espacio entre el texto y la tarjeta lateral */
        margin: 0 !important;
    }

    body .main-column,
    body .side-column {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* 4. TEXTO DESCRIPTIVO (El contenido de la noticia) */
    body .description-text {
        width: 100% !important;
        font-size: 0.95rem !important;
        line-height: 1.6 !important;

        /* Por si la descripción tiene enlaces largos que rompan la web */
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Ajuste para las listas de viñetas (como la de la captura) */
    body .description-text ul,
    body .description-text ol {
        padding-left: 20px !important;
        margin-bottom: 15px !important;
    }

    /* 5. BOTONES DE ACCIÓN (Atrás y Sitio Oficial) */
    body .actions-bar {
        display: flex !important;
        flex-direction: column !important;
        /* Apilamos los botones para el móvil */
        gap: 15px !important;
        margin-top: 30px !important;
        width: 100% !important;
    }

    body .btn-volver,
    body .btn-web {
        width: 100% !important;
        /* Botones de ancho completo para pulsarlos fácil */
        text-align: center !important;
        box-sizing: border-box !important;
        padding: 15px !important;
        display: block !important;
    }

    /* 6. TARJETA LATERAL (Datos Técnicos) */
    body .side-card {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 20px !important;
    }

    body .data-row {
        display: flex !important;
        flex-direction: column !important;
        /* Título del dato arriba, valor abajo */
        margin-bottom: 15px !important;
        gap: 5px !important;
    }

    body .data-label {
        font-size: 0.8rem !important;
        color: #aaa !important;
        /* Color atenuado para el título (Metacritic, etc) */
    }

    body .data-value {
        font-size: 1rem !important;
        word-break: break-word !important;
        /* Por si hay muchas plataformas sin espacios */
    }
}

/* ============================================================
   FOOTER - VERSIÓN MÓVIL (BLINDADA)
   ============================================================ */
@media (min-width: 769px) {
    .footer-superior {
        display: grid !important;
        grid-template-columns: 1.5fr 1fr 1fr 1fr !important; /* Fuerza las 4 columnas */
        gap: 40px !important;
        align-items: start !important;
        width: 100% !important;
    }

    .footer-superior > div,
    .footer-columna {
        display: block !important;
        width: auto !important;
    }
}
@media (max-width: 768px) {
    /* 1. Ajuste general súper compacto */
    footer {
        padding: 30px 0 20px !important; /* Menos espacio muerto arriba y abajo */
    }

    .footer-contenido {
        padding: 0 20px !important;
    }

    /* 2. Grid principal y Stats */
    .footer-superior {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 25px 15px !important; /* Menos aire entre filas */
        width: 100% !important;
    }

    /* Logo y Stats (Ocupan las 2 columnas) */
    .footer-superior > div:first-child {
        grid-column: span 2 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin-bottom: 0 !important;
    }

    .footer-marca-encabezado {
        justify-content: center !important;
        margin-bottom: 10px !important;
    }

    .footer-texto {
        font-size: 0.85rem !important; /* Letra más fina */
        margin: 0 auto 12px !important;
        line-height: 1.3 !important;
    }

    .footer-estadisticas {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .stat-item {
        font-size: 0.75rem !important; /* Stats más compactas */
    }

    /* 3. Columnas de enlaces (Todo centrado en su columna) */
    .footer-columna {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Magia: Centra el título y la lista en medio de la columna */
        text-align: center !important;
        width: 100% !important;
    }

    /* Soporte vuelve a ocupar todo el ancho abajo y se centra */
    .footer-columna:last-child {
        grid-column: span 2 !important;
        margin-top: 15px !important;
    }

    .footer-columna h3 {
        font-size: 0.85rem !important;
        margin-bottom: 10px !important;
        padding-bottom: 4px !important;
        display: inline-block !important;
    }

    .footer-columna ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Magia: Centra cada enlace justo debajo del título */
        gap: 8px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .footer-columna a {
        font-size: 0.85rem !important;
        color: #ccc !important;
        padding: 2px 0 !important;
        text-align: center !important; /* Asegura que el texto esté centrado */
    }

    /* 4. Zona Inferior (Copyright) */
    .footer-inferior {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-top: 25px !important;
        padding-top: 15px !important;
        text-align: center !important;
    }

    .footer-copy {
        font-size: 0.75rem !important;
    }

    .footer-destacados {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        font-size: 0.7rem !important; /* Destacados finos y estéticos */
    }
}

/* Dropdown buscador categorías*/

.ts-wrapper.single .ts-control {
    background: #111118;
    border: 1px solid var(--gh-magenta);
    color: #fff;
    border-radius: 8px;
    padding: 12px;
    font-family: var(--font-body);
}

.ts-wrapper.single .ts-control input {
    color: #fff;
}

.ts-dropdown {
    background: #111118;
    border: 1px solid var(--gh-magenta);
    color: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.ts-dropdown .option {
    color: #fff;
    background: #111118;
    padding: 10px 12px;
}

.ts-dropdown .option.active {
    background: var(--gh-gradient);
    color: #fff;
}

.ts-wrapper.focus .ts-control {
    box-shadow: var(--gh-glow);
}

.ts-wrapper.single .ts-control {
    background: transparent;
}

.ts-wrapper.single.input-active .ts-control {
    background: #111118;
}

.ts-control,
.ts-control input {
    background: #111118 !important;
    color: #fff !important;
}

.ts-control input::placeholder {
    color: #9ca3af !important;
}

.ts-wrapper.single .ts-control .item {
    color: #fff;
}

.ts-dropdown-content {
    background: #111118;
}

/* ============================================================
   FORO-HOME (CARRUSEL Y BARRA)
   ============================================================ */
/* 1. EL CONTENEDOR CARRUSEL */
.home-forum-grid {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    width: 100%;
    margin-top: 20px;
    padding: 10px 5px 30px 5px;
    box-sizing: border-box;

    /* Efecto imán al deslizar */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #a78bfa rgba(139, 92, 246, 0.12);
}

/* ============================================================
   2. LA BARRA DE SCROLL (Diseño Morado Neón)
   ============================================================ */
.home-forum-grid::-webkit-scrollbar {
    height: 14px !important;
    display: block !important;
}

.home-forum-grid::-webkit-scrollbar-track {
    background:
        linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.18), transparent),
        rgba(255, 255, 255, 0.04) !important;
    border-radius: 999px !important;
    margin: 0 56px !important;
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.16) !important;
}

.home-forum-grid::-webkit-scrollbar-thumb {
    background:
        linear-gradient(90deg, #6d28d9 0%, #a78bfa 48%, #22ffe5 100%) !important;
    border-radius: 999px !important;
    box-shadow:
        0 0 16px rgba(139, 92, 246, 0.75),
        0 0 28px rgba(34, 255, 229, 0.22) !important;
    border: 3px solid #05050a !important;
    cursor: pointer !important;
}

.home-forum-grid::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(90deg, #7c3aed 0%, #c4b5fd 48%, #00ffe1 100%) !important;
    box-shadow:
        0 0 20px rgba(167, 139, 250, 0.9),
        0 0 34px rgba(34, 255, 229, 0.34) !important;
}

/* Fallback para Firefox */
@-moz-document url-prefix() {
    .home-forum-grid {
        scrollbar-width: thin;
        scrollbar-color: #a78bfa rgba(139, 92, 246, 0.12);
    }
}

/* ============================================================
   3. LAS TARJETAS DEL FORO
   ============================================================ */

/* Tarjeta Base */
.home-forum-card {
    background: rgba(20, 20, 25, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 4px solid #8b5cf6;
    border-radius: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* Fijamos el ancho para que funcionen como carrusel */
    flex: 0 0 320px;
    scroll-snap-align: start;
}

/* Efecto Hover */
.home-forum-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.5);
    background: rgba(30, 30, 35, 0.95);
}

/* Contenido interior */
.home-forum-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

/* Meta: Etiqueta y Fecha */
.home-forum-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.home-forum-tag {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.home-forum-date {
    color: #888;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Título */
.home-forum-title {
    font-size: 1.3rem;
    color: #fff;
    margin: 0 0 12px 0;
    line-height: 1.4;
    font-weight: 700;
}

/* Descripción */
.home-forum-desc {
    color: #aaa;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 20px 0;
    flex-grow: 1;
    /* Empuja el footer hacia abajo */
}

/* Footer y Botón */
.home-forum-footer {
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 15px;
    display: flex;
    justify-content: flex-end;
}

.btn-home-forum {
    color: #00ffcc;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s ease;
}

.home-forum-card:hover .btn-home-forum {
    color: #fff;
}

/* 4. Enlace expandido (Toda la tarjeta clicable) */
.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
}

/* ============================================================
   HOME SOCIAL + GUIAS
   ============================================================ */
.home-seo-band,
.home-carousel-section {
    --home-accent: #4ade80;
    --home-accent-alt: #22d3ee;
    --home-gradient: linear-gradient(90deg, #22c55e, #22d3ee);
    --home-soft: rgba(34, 197, 94, 0.12);
    --home-border: rgba(34, 197, 94, 0.26);
    --home-glow: rgba(34, 197, 94, 0.16);
    position: relative;
    overflow-x: hidden;
}

.home-seo-social,
.home-social-section {
    --home-accent: #4ade80;
    --home-accent-alt: #22d3ee;
    --home-gradient: linear-gradient(90deg, #22c55e, #22d3ee);
    --home-soft: rgba(34, 197, 94, 0.12);
    --home-border: rgba(34, 197, 94, 0.26);
    --home-glow: rgba(34, 197, 94, 0.16);
}

.home-seo-guides,
.home-guides-section {
    --home-accent: #fbbf24;
    --home-accent-alt: #FF4F9D;
    --home-gradient: linear-gradient(90deg, #f59e0b, #FF4F9D);
    --home-soft: rgba(245, 158, 11, 0.12);
    --home-border: rgba(245, 158, 11, 0.26);
    --home-glow: rgba(245, 158, 11, 0.16);
}

.home-seo-news,
.news-section {
    --home-accent: #f43f5e;
    --home-accent-alt: #fb7185;
    --home-gradient: linear-gradient(90deg, #f43f5e, #fb7185);
    --home-soft: rgba(244, 63, 94, 0.12);
    --home-border: rgba(244, 63, 94, 0.26);
    --home-glow: rgba(244, 63, 94, 0.16);
}

.home-seo-forum,
.foro-home-section {
    --home-accent: #FF4F9D;
    --home-accent-alt: #D8B4FE;
    --home-gradient: linear-gradient(90deg, #FF00C8, #7C00FF);
    --home-soft: rgba(255, 0, 200, 0.14);
    --home-border: rgba(255, 0, 200, 0.28);
    --home-glow: rgba(255, 0, 200, 0.18);
}

.home-seo-band {
    padding: 100px 0 140px;
    background-color: #08090f; /* Aseguramos un fondo base sólido */
}

.home-seo-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 16% 38%, var(--home-soft), transparent 70%),
        radial-gradient(circle at 86% 8%, rgba(34, 211, 238, 0.1), transparent 60%);
    pointer-events: none;
    opacity: 0.8;
}

.home-seo-guides::before {
    background:
        radial-gradient(circle at 16% 38%, var(--home-soft), transparent 34%),
        radial-gradient(circle at 86% 8%, rgba(255, 79, 157, 0.11), transparent 32%);
}

.home-seo-band-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px 60px;
    text-align: center;
    border: 1px solid var(--home-border);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
        rgba(8, 9, 15, 0.72);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
}

.home-seo-kicker {
    display: inline-flex;
    margin-bottom: 14px;
    color: var(--home-accent);
    font-family: var(--font-header);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.home-seo-band h2 {
    max-width: 900px;
    margin: 0 auto 20px;
    color: #fff;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.08;
}

.home-seo-band h2::after {
    content: "";
    display: block;
    width: 92px;
    height: 3px;
    margin: 18px auto 0;
    border-radius: 999px;
    background: var(--home-gradient);
    box-shadow: 0 0 18px var(--home-glow);
}

.home-seo-band p {
    max-width: 900px;
    margin: 0 auto;
    color: #d7dce7;
    font-size: 1rem;
    line-height: 1.75;
}

.home-seo-actions {
    margin-top: 28px;
    display: flex;
    justify-content: center;
    gap: 20px;


}

.home-carousel-section {
    /*padding: 30px 20px 80px 20px; /* Padding simétrico para que respire en móviles */
    /*position: relative;
    overflow-x: hidden;*/
    padding: 30px 0 80px 0 !important; /* Quitamos el 5% que empujaba todo */
    width: 100%;
    position: relative;
    overflow-x: hidden;
}

.home-carousel-section::before {
    content: "";
    position: absolute;
    inset: 18% 0 auto 20%;
    width: 54%;
    height: 54%;
    background: radial-gradient(circle, var(--home-soft), transparent 68%);
    pointer-events: none;
    z-index: -1;
}

.home-section-header {
    /*display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto 36px;
    padding: 0 20px 0 0;
    box-sizing: border-box;*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 100% !important; /* Rompemos la caja central de 1400px */
    margin: 0 0 36px 0 !important;
    padding: 0 60px !important; /* Los 60px de espacio por la izquierda */
    box-sizing: border-box;

}

/* Ajustes cuando el header está dentro de la banda SEO */
.home-seo-band-inner .home-section-header {
    margin: 0 0 24px 0;
    max-width: none;
    padding: 0;
    text-align: left;
}

.home-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto 36px;
    padding: 0 20px 0 0;
    box-sizing: border-box;
}

.home-section-header h2 {
    margin: 10vh 0 0 10vh;
    color: #fff;
    font-size: 2rem;
    line-height: 1.05;
    text-shadow: 0 0 18px var(--home-glow);
}

.home-section-header h2::after {
    content: "";
    display: block;
    width: 78px;
    height: 3px;
    margin-top: 14px;
    border-radius: 999px;
    background: var(--home-gradient);
    box-shadow: 0 0 18px var(--home-glow);
}

.home-cards-row {
    display: flex;
    gap: 20px;
    width: 100%;
    max-width: 100% !important;
    margin: 0 50px 0 0;
    padding: 0px 0px 25px 0 !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--home-accent) rgba(34, 197, 94, 0.14);
}

.home-guides-grid {
    scrollbar-color: var(--home-accent) rgba(245, 158, 11, 0.14);
}

.home-cards-row::-webkit-scrollbar {
    height: 14px;
}

.home-cards-row::-webkit-scrollbar-track {
    background:
        linear-gradient(90deg, transparent, var(--home-soft), transparent),
        rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    margin: 0 56px;
    box-shadow: inset 0 0 0 1px var(--home-border);
}

.home-cards-row::-webkit-scrollbar-thumb {
    background: var(--home-gradient);
    border-radius: 999px;
    border: 3px solid #05050a;
    box-shadow: 0 0 16px var(--home-glow);
}

.home-social-card,
.home-guide-card,
.home-empty-card {
    flex: 0 0 320px;
    scroll-snap-align: start;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-left: 4px solid var(--home-accent);
    border-radius: 8px;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
        rgba(16, 17, 24, 0.92);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
}

.home-social-card:hover,
.home-guide-card:hover,
.home-empty-card:hover {
    transform: translateY(-5px);
    border-color: var(--home-border);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.28), 0 0 26px var(--home-glow);
}

.home-social-card {
    min-height: 430px;
    padding: 22px;
    display: flex;
    flex-direction: column;
}

.home-social-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.home-social-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    padding: 2px;
    background: var(--home-gradient);
    flex: 0 0 44px;
}

.home-social-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    background: #07070d;
}

.home-social-user,
.home-social-date {
    display: block;
}

.home-social-user {
    color: #fff;
    font-family: var(--font-header);
    font-size: 0.88rem;
    line-height: 1.2;
}

.home-social-date {
    color: #9ca3af;
    font-size: 0.78rem;
    font-weight: 700;
}

.home-social-text {
    color: #eef2f7;
    font-weight: 700;
    line-height: 1.55;
    min-height: 88px;
    margin: 0 0 18px;
}

.home-social-media {
    height: 132px;
    margin-top: auto;
    border: 1px solid var(--home-border);
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.home-social-video,
.home-social-empty,
.home-guide-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 20% 20%, var(--home-soft), transparent 42%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
}

.home-social-video span,
.home-social-empty span,
.home-guide-fallback span {
    color: var(--home-accent);
    font-family: var(--font-header);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.home-card-stats {
    display: flex;
    gap: 14px;
    margin: 18px 0;
    color: #cbd5e1;
    font-size: 0.82rem;
    font-weight: 800;
}

.home-card-link {
    margin-top: auto;
    color: var(--home-accent-alt);
    font-family: var(--font-header);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-align: right;
}

.home-guide-card {
    display: flex;
    flex-direction: column;
    min-height: 475px;
}

.home-guide-image {
    height: 168px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--home-border);
}

.home-guide-image img,
.home-guide-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-guide-content {
    padding: 22px;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.home-guide-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    color: var(--home-accent);
    font-family: var(--font-header);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-guide-content h3,
.home-empty-card h3 {
    margin: 0 0 14px;
    color: #fff;
    font-size: 1.18rem;
    line-height: 1.35;
}

.home-guide-content p,
.home-empty-card p {
    margin: 0;
    color: #d8dee9;
    line-height: 1.6;
}

.home-empty-card {
    min-height: 320px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 768px) {
    .home-seo-band {
        padding: 50px 15px !important;
    }

    .home-seo-band-inner {
        padding: 32px 20px !important;
        width: 100% !important;
    }

    .home-seo-band h2 {
        font-size: 1.6rem !important;
        line-height: 1.2 !important;
        text-align: center;
    }

    .home-seo-band p {
        font-size: 0.94rem;
        line-height: 1.65;
    }

    .home-carousel-section {
        padding: 72px 18px 86px !important;
        box-sizing: border-box;
    }

    .home-section-header {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 18px;
        width: 100%;
        margin: 0 auto 28px;
        padding: 0;
        text-align: center;
    }

    .home-section-header h2 {
        width: 100%;
        max-width: 330px;
        margin: 5vh 0 0 0;
        font-size: clamp(1.55rem, 7vw, 2rem);
        line-height: 1.12;
        letter-spacing: 1.5px;
    }

    .home-section-header h2::after {
        margin: 12px auto 0;
        width: 86px;
    }

    .home-section-header .btn-view-all {
        width: min(100%, 260px);
        min-height: 48px;
        margin: 0 auto;
        padding: 12px 18px;
        font-size: 0.75rem;
        line-height: 1.3;
        white-space: normal;
    }

    .home-cards-row {
        gap: 16px;
        padding: 6px 0 28px;
    }

    .home-social-card,
    .home-guide-card,
    .home-empty-card {
        flex-basis: min(84vw, 310px);
    }
}

/* ============================================================
BARRA MORADA INDEPENDIENTE
============================================================ */

/* Nos aseguramos de limpiar cualquier rastro que bloquee el diseño */
.scroll-morado {
    scrollbar-width: thin !important;
    scrollbar-color: #a78bfa rgba(139, 92, 246, 0.12) !important;
}

/* CTA Final - Community Section */
.seo-actions-cta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 30px;
}

@media (max-width: 768px) {
    .seo-actions-cta {
        justify-content: center;
    }
}

/* Diseño Webkit (Chrome, Edge, Safari) */
.scroll-morado::-webkit-scrollbar {
    height: 14px !important;
    display: block !important;
    -webkit-appearance: none !important;
}

.scroll-morado::-webkit-scrollbar-track {
    background:
        linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.18), transparent),
        rgba(255, 255, 255, 0.04) !important;
    border-radius: 999px !important;
    margin: 0 56px !important;
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.16) !important;
}

.scroll-morado::-webkit-scrollbar-thumb {
    background:
        linear-gradient(90deg, #6d28d9 0%, #a78bfa 48%, #22ffe5 100%) !important;
    border-radius: 999px !important;
    box-shadow:
        0 0 16px rgba(139, 92, 246, 0.75),
        0 0 28px rgba(34, 255, 229, 0.22) !important;
    border: 3px solid #05050a !important;
    cursor: pointer !important;
}

.scroll-morado::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(90deg, #7c3aed 0%, #c4b5fd 48%, #00ffe1 100%) !important;
    box-shadow:
        0 0 20px rgba(167, 139, 250, 0.9),
        0 0 34px rgba(34, 255, 229, 0.34) !important;
}

/* --- ESTILOS DINÁMICOS DEL FORO (MIGRADOS DESDE INDEX) --- */
.foro-home-section {
    overflow-x: hidden;
}

/* Aseguramos que el contenedor permita hacer scroll */
.home-forum-grid {
    display: flex !important;
    overflow-x: auto !important;
    gap: 20px;
    padding-bottom: 28px !important; /* Espacio para que la barra no pise las tarjetas */
    box-sizing: border-box;

    /* Firefox */
    scrollbar-width: thin !important;
    scrollbar-color: #a78bfa rgba(139, 92, 246, 0.12) !important;
}

/* MAGIA PARA CHROME / EDGE / SAFARI */
.home-forum-grid::-webkit-scrollbar {
    height: 14px !important; /* La hacemos visible y fácil de clickear */
    display: block !important;
}

.home-forum-grid::-webkit-scrollbar-track {
    background:
        linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.18), transparent),
        rgba(255, 255, 255, 0.04) !important;
    border-radius: 999px !important;
    margin: 0 56px !important;
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.16) !important;
}

.home-forum-grid::-webkit-scrollbar-thumb {
    background:
        linear-gradient(90deg, #6d28d9 0%, #a78bfa 48%, #22ffe5 100%) !important;
    border-radius: 999px !important;
    border: 3px solid #05050a !important;
    box-shadow:
        0 0 16px rgba(139, 92, 246, 0.75),
        0 0 28px rgba(34, 255, 229, 0.22) !important;
}

.home-forum-grid::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(90deg, #7c3aed 0%, #c4b5fd 48%, #00ffe1 100%) !important;
    box-shadow:
        0 0 20px rgba(167, 139, 250, 0.9),
        0 0 34px rgba(34, 255, 229, 0.34) !important;
}

/* Ajustes para los headers y carruseles integrados en las bandas */
.home-seo-band .home-section-header {
    max-width: 1400px;
    margin: 60px auto 30px;
    padding: 0 20px;
}

.home-seo-band {
    padding: 100px 0 120px;
}

.home-seo-band .news-container,
.home-seo-band .home-forum-grid,
.home-seo-band .home-cards-row {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    overflow-x: auto;
    padding: 20px 0 40px 0;
    box-sizing: border-box;
    scroll-padding-left: 7.5%;
}

.home-seo-band .news-container::before,
.home-seo-band .home-forum-grid::before,
.home-seo-band .home-cards-row::before {
    content: "";
    display: block;
    flex: 0 0 7.5%;
    min-width: 7.5%;
    pointer-events: none;
}

.home-carousel-section {
    padding: 0;
}

/* ============================================================
   FIX: BAJAR LOS HUMOS AL BOTÓN FLOTANTE
   ============================================================ */

/* 1. Aplastamos el z-index del botón de admin permanentemente */
.admin-mobile-menu-button,
.user-mobile-menu-button {
    z-index: 900 !important;
}

/* 2. Aseguramos que el menú principal y su fondo sean reyes */
.menu-overlay {
    z-index: 9998 !important;
}

.header-nav {
    z-index: 9999 !important;
}

.menu-btn {
    z-index: 10000 !important;
}

/* 3. Por si tu navegador no leía bien el :has() anterior, usamos una técnica clásica */
input#menu-toggle:checked ~ * .admin-mobile-menu-button,
input#menu-toggle:checked ~ * .user-mobile-menu-button {
    display: none !important;
}