:root {
            --bg-dark: #080808;
            --bg-panel: #111111;
            --text-main: #d1d1d1;
            --accent-blood: #8b0000;
            --accent-gold: #6D8C8B;
            --accent-blue-spectral: #262e32;
            --font-display: 'Forum', serif; /* Cambiado de Rye a Forum */
            --font-body: 'EB Garamond', serif;
        }

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

        body {
            background-color: var(--bg-dark);
            color: var(--text-main);
            font-family: var(--font-body);
            overflow-x: hidden;
        }

        /* Noise Overlay */
        .noise {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: url("https://grainy-gradients.vercel.app/noise.svg");
            opacity: 0.05; pointer-events: none; z-index: 9999;
        }

        h1, h2, h3 { 
            font-family: var(--font-display); 
            text-transform: uppercase; 
            letter-spacing: 2px; /* Añade un poco de espacio entre letras */
            font-weight: 400;    /* Forum se ve mejor en su peso natural */
        }

        /* --- NAVIGATION --- */
        nav {
            position: fixed; top: 0; width: 100%; padding: 25px 50px;
            display: flex; justify-content: space-between; align-items: center;
            z-index: 1000; transition: 0.4s;
        }
        nav.scrolled { background: rgba(5, 5, 5, 0.95); padding: 15px 50px; border-bottom: 1px solid #222; }

        .logo { font-size: 1.8rem; letter-spacing: 3px; color: #fff; text-decoration: none; }
        .logo span { color: var(--accent-blood); }

        .nav-links a {
            color: #aaa; text-decoration: none; margin-left: 30px;
            font-size: 0.85rem; letter-spacing: 2px; text-transform: uppercase;
            transition: 0.3s;
        }
        .nav-links a:hover { color: var(--accent-gold); }

        /* --- HERO RESPONSIVE FIX --- */
.hero {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    padding: 20px; /* Evita que el contenido toque los bordes en móviles */
}

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: #000; /* Fondo negro mientras carga */
}

.video-container video {
    width: 100%;
    height: 100%;
    /* La clave: object-fit cover asegura que llene el espacio sin deformarse */
    object-fit: cover; 
    filter: brightness(0.85) sepia(20%) contrast(1.1);
}

.hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 90vw; /* No permite que el logo exceda el ancho de la pantalla */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- LOGO RESPONSIVE --- */
.logo-container {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 800px; /* Tamaño máximo en PC */
    height: auto;
    margin: 0 auto;
}

.main-logo-img {
    width: 100%;
    height: auto; /* Mantiene la proporción siempre */
    display: block;
    animation: img-flicker 6s infinite;
}

/* Ajustes específicos para móviles */
@media (max-width: 768px) {
    .logo-container {
        max-width: 90%; /* Logo más pequeño en móviles */
    }
    
    .tagline {
        font-size: 0.9rem; /* Texto más pequeño para que no rompa en dos líneas */
        letter-spacing: 3px;
        margin-bottom: 30px;
    }
    
    .wishlist-container h3 {
        font-size: 0.9rem;
        letter-spacing: 3px;
    }
}
        
        .main-title {
            font-size: clamp(3rem, 10vw, 7rem);
            margin-bottom: 10px; letter-spacing: 10px;
            text-shadow: 0 0 20px rgba(0,0,0,0.8);
        }

        .tagline {
            font-size: 1.2rem; letter-spacing: 5px; color: var(--accent-gold);
            margin-bottom: 40px; text-transform: uppercase;
        }

        .btn {
            padding: 15px 45px; background: transparent;
            border: 1px solid var(--accent-gold); color: var(--accent-gold);
            font-family: var(--font-display); cursor: pointer;
            transition: 0.3s; text-transform: uppercase; text-decoration: none;
        }
        .btn:hover { background: var(--accent-gold); color: #000; box-shadow: 0 0 15px var(--accent-gold); }

        /* --- SECTIONS --- */
        .section { padding: 100px 10%; border-bottom: 1px solid #151515; }
        .section-title { font-size: 3rem; text-align: center; margin-bottom: 40px; color: #eee; }
        .section-title span { color: var(--accent-blood); }

        /* Lore Section */
        .lore-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
        .lore-text p { font-size: 1.1rem; line-height: 1.8; color: #888; margin-bottom: 20px; }
        .lore-img { /*border: 1px solid #333;*/ padding: 10px; /*background: #0c0c0c; */}
        .lore-img img { width: 100%; display: block; /*filter: grayscale(1) contrast(1.1);*/ }

        /* Features Grid */
        /* Modificación para lograr 3 arriba y 2 abajo */
.features { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 30px; 
    justify-content: center; /* Esto centra las 2 de abajo */
}

.f-card { 
    background: var(--bg-panel); 
    padding: 40px; 
    border: 1px solid #222; 
    text-align: center; 
    transition: 0.3s;
    /* Calculamos el ancho para que quepan 3 por fila (menos el gap) */
    flex: 0 1 calc(33.333% - 30px); 
    min-width: 300px; /* Mantiene un tamaño mínimo para que no se vean mal */
}

.f-card:hover { 
    border-color: var(--accent-blood); 
    transform: translateY(-10px); 
}

.f-card i { 
    font-size: 3rem; 
    color: var(--accent-blood); 
    margin-bottom: 20px; 
}

.f-card h3 { 
    margin-bottom: 15px; 
    color: var(--accent-gold); 
}

/* Ajuste para móviles: que se vea 1 sola por fila */
@media (max-width: 992px) {
    .f-card {
        flex: 0 1 100%;
    }
}

        /* --- PARALLAX SECTION --- */
.parallax-row {
    height: 60vh; /* Altura de la sección */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    
    /* El truco del Parallax */
    background-image: url('../assets/cordura_screenshot_2.jpg');
    background-attachment: fixed; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
    border-top: 1px solid var(--accent-blue-spectral);
    border-bottom: 1px solid var(--accent-blue-spectral);
}

/* Oscurecer un poco la imagen para que el texto resalte */
.parallax-row::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.parallax-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 0 20px;
}

.parallax-content h2 {
    font-size: clamp(2rem, 5vw, 4rem);
    color: #fff;
    margin-bottom: 20px;
    letter-spacing: 5px;
    line-height: 1.1;
}

.parallax-content p {
    font-size: 1.2rem;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
}


        /* --- MODIFICACIÓN GALERÍA --- */
.gallery { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; /* Centra las imágenes si no llenan la fila */
    gap: 15px; 
}

.gallery img { 
    width: 320px; /* Tamaño fijo para mantener simetría */
    height: 180px; 
    object-fit: cover; 
    filter: grayscale(1); 
    transition: 0.5s; 
    cursor: zoom-in; /* Cambiado de crosshair a zoom para mejor UX */
    border: 1px solid #222;
}

.gallery img:hover { 
    filter: grayscale(0); 
    border-color: var(--accent-gold);
}

/* --- LIGHTBOX (Imagen ampliada) --- */
.lightbox {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: none; /* Oculto por defecto */
    justify-content: center;
    align-items: center;
    z-index: 2000;
    cursor: zoom-out;
}

.lightbox img {
    max-width: 90%;
    max-height: 80%;
    border: 2px solid var(--accent-gold);
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    animation: zoomIn 0.3s ease-out;
}

@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

        /* --- FOOTER --- */
        footer { padding: 80px 50px; background: #050505; text-align: center; }
        /* --- NUEVA ESTRUCTURA PARA EL LOGO DEL FOOTER --- */
.footer-logo-container {
    display: flex;
    justify-content: center; /* Centra la imagen horizontalmente */
    margin-bottom: 40px;    /* Espacio con las redes sociales */
}

.footer-logo-img {
    height: 60px;          /* Altura fija para el logo */
    width: auto;           /* Mantiene la proporción */
    display: block;
    filter: brightness(0.8); /* Efecto oscuro para el footer */
    transition: filter 0.3s ease;
}

/* Efecto al pasar el ratón por el logo del footer */
.footer-logo-img:hover {
    filter: brightness(1.0);
}
        .socials { margin-bottom: 30px; }
        .socials a { color: #555; font-size: 1.5rem; margin: 0 15px; transition: 0.3s; }
        .socials a:hover { color: var(--accent-gold); }

        /* Animations */
        @keyframes flicker {
            0% { opacity: 0.8; } 5% { opacity: 0.2; } 10% { opacity: 0.8; } 100% { opacity: 1; }
        }
        .flicker { animation: flicker 6s infinite linear; }

        @media (max-width: 768px) {
            .lore-grid { grid-template-columns: 1fr; }
            .nav-links { display: none; }
        }


      /* --- BUY & SPECS SECTION --- */
.buy-banner {
    background: linear-gradient(90deg, #000 0%, #0b1012 50%, #000 100%);
    padding: 60px 10%;
    border-top: 2px solid var(--accent-blue-spectral);
    border-bottom: 2px solid var(--accent-blue-spectral);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}

.buy-content h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

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

.price-tag {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--accent-gold);
}

.specs-container {
    background: #050505;
    padding: 50px 10%;
}

.specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2px;
    background: #222; /* Color de las líneas divisorias */
    border: 1px solid #222;
}

.spec-item {
    background: var(--bg-dark);
    padding: 30px;
    text-align: center;
}

.spec-item h4 {
    color: var(--accent-gold);
    font-size: 0.8rem;
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.spec-item p {
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
}

@media (max-width: 768px) {
    .buy-banner { justify-content: center; text-align: center; }
    .buy-actions { flex-direction: column; }
}

/* --- EFECTO TELEVISIÓN ANTIGUA (FAST GLITCH) --- */
.glitch-effect {
    position: relative;
    display: inline-block;
    color: #fff;
}

/* --- EFECTO TV ANALÓGICA (GHOST GLITCH) --- */
.glitch-effect {
    position: relative;
    display: inline-block;
    color: #fff;
    /* El texto base nunca se mueve para evitar que parezca un bug */
}

/* Copias invisibles que solo aparecen durante el glitch */
.glitch-effect::before,
.glitch-effect::after {
    content: attr(data-text); /* Lee el texto del atributo HTML */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

/* Animación rápida cada 4 segundos */
.glitch-effect::before {
    color: #0ff; /* Cian */
    z-index: -1;
}

.glitch-effect::after {
    color: #f0f; /* Magenta/Rojo */
    z-index: -2;
}

.glitch-effect:not(:hover)::before {
    animation: glitch-anim-1 6s infinite;
}

.glitch-effect:not(:hover)::after {
    animation: glitch-anim-2 6s infinite;
}

@keyframes glitch-anim-1 {
    0%, 90%, 100% { opacity: 0; transform: translate(0); }
    91% { opacity: 1; transform: translate(-5px, -2px); filter: blur(1px); }
    93% { opacity: 1; transform: translate(5px, 2px); }
    95% { opacity: 0; transform: translate(0); }
}

@keyframes glitch-anim-2 {
    0%, 90%, 100% { opacity: 0; transform: translate(0); }
    91% { opacity: 1; transform: translate(5px, 2px); filter: blur(1px); }
    93% { opacity: 1; transform: translate(-5px, -2px); }
    95% { opacity: 0; transform: translate(0); }
}

/* Efecto de parpadeo de brillo en el texto principal */
@keyframes tv-flicker {
    0%, 90%, 100% { opacity: 1; filter: brightness(1); }
    92% { opacity: 0.7; filter: brightness(2); }
}

.glitch-effect {
    animation: tv-flicker 6s infinite;
}

/* --- IMAGE GLITCH EFFECT --- */
.logo-container {
    position: relative;
    display: inline-block;
    /* Ajusta este ancho según el tamaño que quieras en pantalla */
    width: 800px; 
    height: auto;
}

.main-logo-img {
    width: 100%;
    display: block;
    position: relative;
    z-index: 2;
}

/* Las capas fantasma (roja y cian) */
.logo-container::before,
.logo-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--logo-url); /* Usa la variable definida en el HTML */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 1;
    mix-blend-mode: screen; /* Mezcla los colores para que se vea luminoso */
}

/* Capa Cian */
.logo-container::before {
    /* Filtro para teñir la imagen blanca a Cian */
    filter: brightness(0.5) sepia(1) hue-rotate(130deg) saturate(10) blur(0.5px);
    animation: img-glitch-1 6s infinite;
}

/* Capa Roja/Magenta */
.logo-container::after {
    /* Filtro para teñir la imagen blanca a Rojo */
    filter: brightness(0.5) sepia(1) hue-rotate(-50deg) saturate(10) blur(0.5px);
    animation: img-glitch-2 6s infinite;
}

/* Animaciones idénticas a las de texto pero adaptadas a imagen */
@keyframes img-glitch-1 {
    0%, 90%, 100% { opacity: 0; transform: translate(0); }
    91% { opacity: 0.8; transform: translate(-5px, -2px); }
    93% { opacity: 0.8; transform: translate(5px, 2px); }
    95% { opacity: 0; transform: translate(0); }
}

@keyframes img-glitch-2 {
    0%, 90%, 100% { opacity: 0; transform: translate(0); }
    91% { opacity: 0.8; transform: translate(5px, 2px); }
    93% { opacity: 0.8; transform: translate(-5px, -2px); }
    95% { opacity: 0; transform: translate(0); }
}

/* Parpadeo de brillo en la imagen principal */
@keyframes img-flicker {
    0%, 90%, 100% { filter: brightness(1) contrast(1); }
    92% { filter: brightness(1.5) contrast(1.2); }
}

.main-logo-img {
    animation: img-flicker 6s infinite;
}

/* Estilo unificado para los botones de tienda */
.btn-store {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* Centra el contenido horizontalmente */
    gap: 12px;
    padding: 15px 0 !important; /* Padding vertical, el horizontal lo controla el width */
    width: 240px; /* Ancho fijo para que sean iguales */
    font-size: 0.95rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.btn-store i {
    font-size: 1.3rem;
}

.btn-store:hover {
    border-color: var(--accent-gold);
    background: var(--accent-gold) !important;
    color: #000 !important;
    box-shadow: 0 0 20px rgba(207, 170, 110, 0.3);
}

/* Contenedor para asegurar que se apilen bien en móviles */
.wishlist-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
}

.wishlist-container {
    animation: fadeInScale 1s ease-out 0.5s both;
    margin-top: 30px;
}
/* Contenedor relativo para el dropdown */
.nav-wishlist-wrapper {
    position: relative;
    display: inline-block;
}

/* El menú oculto */
.wishlist-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    background: #111;
    border: 1px solid var(--accent-gold);
    min-width: 180px;
    z-index: 1100;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    animation: fadeInDown 0.3s ease;
}

.wishlist-dropdown.active {
    display: block;
}

.wishlist-dropdown a {
    color: #fff;
    padding: 12px 20px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    font-family: var(--font-body);
    transition: 0.3s;
    border-bottom: 1px solid #222;
}

.wishlist-dropdown a:last-child { border-bottom: none; }

.wishlist-dropdown a:hover {
    background: var(--accent-gold);
    color: #000;
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Estilo para el logo de la navegación */
.logo-nav-img {
    height: 40px; /* Ajusta la altura a tu gusto */
    width: auto;
    display: block;
    transition: transform 0.3s ease;
}

.logo-nav-img:hover {
    transform: scale(1.05);
}

/* --- NAV IMAGE GLITCH EFFECT --- */
.logo-nav-container {
    position: relative;
    display: inline-block;
    width: 180px; /* Ancho ajustado para la barra de navegación */
    height: auto;
    --logo-url: url('../assets/Logo_Cordura.png'); /* Asegura que la variable esté disponible */
}

.logo-nav-img {
    width: 100%;
    display: block;
    position: relative;
    z-index: 2;
    filter: brightness(1);
    transition: 0.3s;
}

/* Capas de color para el glitch del Nav */
.logo-nav-container::before,
.logo-nav-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--logo-url);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 1;
    mix-blend-mode: screen;
}

.logo-nav-container::before {
    filter: brightness(0.8) sepia(1) hue-rotate(130deg) saturate(10);
    animation: img-glitch-1 6s infinite;
}

.logo-nav-container::after {
    filter: brightness(0.8) sepia(1) hue-rotate(-50deg) saturate(10);
    animation: img-glitch-2 6s infinite;
}

/* Reducimos el flicker en el nav para que no distraiga tanto al leer el menú */
.logo-nav-img {
    animation: img-flicker 6s infinite;
}





/* --- REVEAL ANIMATIONS (HORROR STYLE) --- */
.reveal {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    filter: blur(10px) grayscale(1) brightness(0);
    transition: all 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    visibility: hidden;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0) grayscale(0) brightness(1);
    visibility: visible;
}

/* Efecto extra para las imágenes de la galería: aparecen en cascada */
.gallery img {
    transition-delay: calc(var(--i) * 0.1s);
}

/* --- NUEVOS EFECTOS PARA PÁRRAFOS --- */

/* Entrada desde la izquierda */
.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    filter: blur(10px);
    transition: all 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Entrada desde la derecha */
.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    filter: blur(10px);
    transition: all 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Clase activa para ambos */
.reveal-left.active, .reveal-right.active {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
}

/* --- FEATURES ENHANCED --- */
.f-card { 
    background: var(--bg-panel); 
    padding: 40px; 
    border: 1px solid #222; 
    text-align: center; 
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    flex: 0 1 calc(33.333% - 30px); 
    min-width: 300px;
    position: relative;
    overflow: hidden; /* Importante para el efecto de brillo */
}

/* Efecto de resplandor interno (Vignette roja) al hacer hover */
.f-card:hover { 
    border-color: var(--accent-blood); 
    transform: translateY(-15px); 
    box-shadow: inset 0 0 50px rgba(139, 0, 0, 0.3), 0 15px 30px rgba(0, 0, 0, 0.5);
}

/* Línea de escaneo tipo TV antigua que pasa por la tarjeta */
.f-card::after {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(139, 0, 0, 0.1), transparent);
    transition: none;
    pointer-events: none;
}

.f-card:hover::after {
    animation: scanline 2s linear infinite;
}

@keyframes scanline {
    0% { top: -100%; }
    100% { top: 100%; }
}

/* Animación del icono */
.f-card i { 
    font-size: 3rem; 
    color: var(--accent-blood); 
    margin-bottom: 20px; 
    transition: 0.4s;
}

.f-card:hover i { 
    color: var(--accent-gold);
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px var(--accent-blood));
    animation: pulse-horror 1.5s infinite;
}

@keyframes pulse-horror {
    0% { opacity: 1; }
    50% { opacity: 0.7; transform: scale(1.05) skewX(2deg); }
    100% { opacity: 1; }
}

.f-card h3 { 
    margin-bottom: 15px; 
    color: var(--accent-gold); 
    letter-spacing: 2px;
}


/* --- NUEVO PARALLAX PARA "ABOUT" --- */
.parallax-about {
    position: relative;
    min-height: 70vh; /* Altura de la sección */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    
    /* Configuración de la imagen que antes estaba en About */
    background-image: url('../assets/key_art.jpg'); 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
    border-bottom: 1px solid var(--accent-blue-spectral);
    padding: 100px 10% !important;
}

/* Oscurece el fondo para que el texto blanco sea legible */
.parallax-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, 
        rgba(8, 8, 8, 1) 0%, 
        rgba(0, 0, 0, 0.6) 50%, 
        rgba(8, 8, 8, 1) 100%);
    z-index: 1;
}

.about-content {
    position: relative;
    z-index: 2;
}

/* Ajuste para que el texto resalte más sobre la imagen */
.parallax-about p {
    font-size: 1.25rem;
    line-height: 1.8;
    color: #eee;
}


/* El efecto de distorsión (Paranoia) */
.parallax-row::after, .parallax-about::after {
    content: '';
    position: absolute;
    inset: 0;
    
    /* Replicamos el fondo */
    background-image: inherit;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    
    /* Máscara para que el centro siempre sea un poco más claro que los bordes */
    mask-image: radial-gradient(circle, black 30%, transparent 90%);
    -webkit-mask-image: radial-gradient(circle, black 30%, transparent 90%);
    
    z-index: 1;
    pointer-events: none;
    
    /* Estado inicial: invisible y normal */
    opacity: 0;
    transform: scale(1);
    filter: blur(0px);
    
    /* Animación de ataque de paranoia */
    animation: paranoia-attack 12s infinite;
}

/* Animación: 12 segundos de ciclo, pero el efecto ocurre rápido al final */
@keyframes paranoia-attack {
    0%, 80% { 
        opacity: 0; 
        transform: scale(1); 
        filter: blur(0px) contrast(1); 
    }
    82% { 
        opacity: 0.8; 
        transform: scale(1.2); /* Ampliación súbita del FOV */
        filter: blur(15px) contrast(1.5) saturate(2); 
    }
    84% { 
        opacity: 0.4; 
        transform: scale(1.1); 
        filter: blur(5px) contrast(1.2); 
    }
    86% { 
        opacity: 0.9; 
        transform: scale(1.3); /* Segundo pico de distorsión */
        filter: blur(20px) contrast(1.8) brightness(0.5); 
    }
    90%, 100% { 
        opacity: 0; 
        transform: scale(1); 
        filter: blur(0px); 
    }
}


#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0; /* Por defecto invisible */
    visibility: hidden;
    transition: opacity 0.5s ease;
}

/* Esta clase se activará solo si la carga no es instantánea */
#loader.visible {
    opacity: 1;
    visibility: visible;
}

.loader-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.loading-bar-container {
    width: 200px;
    height: 2px;
    background: #111;
    border: 1px solid #222;
    margin-top: 10px;
    position: relative;
    overflow: hidden;
}

.loading-bar {
    width: 30%; /* Tamaño de la barrita que se mueve */
    height: 100%;
    background: var(--accent-blood);
    box-shadow: 0 0 15px var(--accent-blood);
    position: absolute;
    /* Animación de ida y vuelta infinita */
    animation: loading-scanner 1.5s infinite ease-in-out;
}

@keyframes loading-scanner {
    0% { left: -30%; }
    50% { left: 100%; }
    100% { left: -30%; }
}

.loading-text {
    font-family: var(--font-display);
    color: var(--accent-gold);
    letter-spacing: 5px;
    font-size: 1.2rem;
    text-transform: uppercase;
}

@keyframes load-progress {
    0% { width: 0%; }
    100% { width: 100%; }
}

/* Clase para ocultar el loader */
#loader.loaded {
    opacity: 0;
    visibility: hidden;
}

.dots::after {
    content: '';
    animation: dots-animation 2s steps(4, end) infinite;
}

@keyframes dots-animation {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
    100% { content: ''; }
}

/* Opcional: un ligero parpadeo rojo para los puntos */
.dots {
    color: var(--accent-blood);
    text-shadow: 0 0 5px var(--accent-blood);
}
span{
    font-weight: 800;
}


/* Contenedor del logo */
.glitch-img-container {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 800px;
}

/* Imagen principal */
.main-logo-img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
    animation: img-flicker 6s infinite;
}

/* Las capas de colores (Cian y Rojo) */
.glitch-img-container::before,
.glitch-img-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--logo-url);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 1;
    mix-blend-mode: screen;
}

.glitch-img-container::before {
    filter: brightness(0.6) sepia(1) hue-rotate(130deg) saturate(10);
    animation: img-glitch-1 6s infinite;
}

.glitch-img-container::after {
    filter: brightness(0.6) sepia(1) hue-rotate(-50deg) saturate(10);
    animation: img-glitch-2 6s infinite;
}

/* Animaciones de movimiento súbito */
@keyframes img-glitch-1 {
    0%, 90%, 100% { opacity: 0; transform: translate(0); }
    91% { opacity: 0.8; transform: translate(-8px, -3px); }
    93% { opacity: 0.8; transform: translate(8px, 3px); }
}

@keyframes img-glitch-2 {
    0%, 90%, 100% { opacity: 0; transform: translate(0); }
    91% { opacity: 0.8; transform: translate(8px, 3px); }
    93% { opacity: 0.8; transform: translate(-8px, -3px); }
}

/* Botón Volver Arriba */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: rgba(8, 8, 8, 0.8);
    color: var(--accent-gold);
    border: 1px solid var(--accent-blood);
    border-radius: 0; /* Cuadrado para mantener el estilo industrial/viejuno */
    cursor: pointer;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Estado inicial: oculto y desplazado */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

/* Cuando el botón está activo (vía JS) */
.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background-color: var(--accent-blood);
    color: #fff;
    box-shadow: 0 0 20px var(--accent-blood);
}

/* Efecto opcional de parpadeo suave */
.back-to-top.visible i {
    animation: pulse-horror 3s infinite;
}

.wishlist-title-box {
    background: rgba(0, 0, 0, 0.7); /* Fondo negro con 70% de opacidad */
    backdrop-filter: blur(5px);    /* Desenfoca ligeramente el vídeo de fondo */
    padding: 15px 0;               /* Espaciado arriba y abajo */
    width: 100vw;                  /* Que ocupe todo el ancho de la pantalla */
    position: relative;
    left: 50%;                     /* Centrado absoluto */
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-bottom: 30px;           /* Espacio con los botones */
    border-top: 1px solid rgba(139, 0, 0, 0.3);    /* Línea roja sangre muy sutil arriba */
    border-bottom: 1px solid rgba(139, 0, 0, 0.3); /* Línea roja sangre muy sutil abajo */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ajuste para el H3 dentro de la franja */
.wishlist-title-box h3 {
    margin-bottom: 0 !important;   /* Quitamos el margen que tenía antes */
    color: var(--accent-blood);    /* Color rojo sangre */
    font-size: 2.2rem;
    letter-spacing: 8px;
    text-shadow: 0 0 15px rgba(139, 0, 0, 0.6);
}

.wishlist-text-vignette {
    /* Degradado radial: negro en el centro (detrás del texto), transparente en los bordes */
    background: radial-gradient(circle, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 70%);
    padding: 20px 0;
    margin-bottom: 20px;
    display: inline-block; /* Ajusta el degradado al ancho del texto */
    width: 100%;
}

.wishlist-text-vignette h3 {
    color: var(--accent-blood);
    font-size: 2.2rem;
    letter-spacing: 8px;
    margin-bottom: 0 !important;
    text-shadow: 0 0 15px rgba(139, 0, 0, 0.6);
}

.wishlist-text-vignette {
    /* Degradado radial: negro en el centro (detrás del texto), transparente en los bordes */
    background: radial-gradient(circle, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 70%);
    padding: 20px 0;
    margin-bottom: 20px;
    display: inline-block; /* Ajusta el degradado al ancho del texto */
    width: 100%;
}

.wishlist-text-vignette h3 {
    color: #fff;
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: 8px;
    margin-bottom: 0 !important;
    text-shadow: 0 0 15px rgba(139, 0, 0, 0.8);
}


/* Contenedor de acciones */
.hero-actions-container {
    margin-top: 40px;
    z-index: 10;
}

.main-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* Botones estilo Hunt */
.btn-hero {
    padding: 18px 40px;
    font-size: 1rem;
    letter-spacing: 3px;
    font-family: var(--font-display);
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(0,0,0,0.6);
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 250px;
    justify-content: center;
}

.btn-accent {
    border-color: var(--accent-blood);
    background: rgba(139, 0, 0, 0.2);
}

.btn-hero:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
}

.btn-accent:hover {
    background: var(--accent-blood);
    color: #fff;
    border-color: var(--accent-blood);
}

/* El Desplegable de Stores */
.wishlist-dropdown-wrapper {
    position: relative;
}

.stores-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 100%;
    background: #0a0a0a;
    border: 1px solid #222;
    display: none; /* Se activa con JS */
    flex-direction: column;
    z-index: 100;
    animation: fadeInDown 0.3s ease;
}

.stores-menu.active {
    display: flex;
}

.store-link {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    text-decoration: none;
    color: #888;
    border-bottom: 1px solid #1a1a1a;
    transition: 0.3s;
}

.store-link img {
    height: 25px;
    width: 25px;
    filter: invert(1) brightness(0.7); /* Hace los logos blancos/grises */
}

.store-link span {
    font-size: 0.9rem;
    letter-spacing: 2px;
}

.store-link:hover {
    background: #151515;
    color: #fff;
}

.store-link:hover img {
    filter: invert(1) brightness(1);
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}


.platforms {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    animation: fadeIn 1.5s ease;
}

.platforms span {
    font-size: 0.7rem;
    letter-spacing: 3px;
    color: #666; /* Color apagado para no distraer de los botones */
    text-transform: uppercase;
    font-family: var(--font-body);
}

.platform-icons {
    display: flex;
    gap: 25px;
    align-items: center;
}

.platform-icons a {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.5rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.platform-icons a:hover {
    color: var(--accent-gold); /* O el color que prefieras al resaltar */
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.platforms {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.platforms span {
    font-size: 0.7rem;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.4); /* Gris suave */
    text-transform: uppercase;
}

.platform-icons {
    display: flex;
    gap: 30px;
    align-items: center;
}

.platform-img {
    height: 25px; /* Altura sutil, igual que en Hunt */
    width: auto;
    opacity: 0.6; /* Un poco translúcidas para que no roben protagonismo */
    filter: brightness(0) invert(1); /* Las hace blancas para que resalten sobre el negro */
    transition: all 0.3s ease;
}

.platform-icons a:hover .platform-img {
    opacity: 1;
    filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
    transform: translateY(-2px); /* Pequeño salto al pasar el ratón */
}

/* Estilo para los enlaces del menú desplegable */
.store-link {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 25px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7); /* Blanco suave por defecto */
    border-bottom: 1px solid #1a1a1a;
    transition: all 0.3s ease;
    background: #0a0a0a;
}

/* El icono de Font Awesome */
.store-link i {
    font-size: 1.4rem;
    color: #fff; /* Blanco puro */
    width: 30px; /* Ancho fijo para que los textos queden alineados */
    display: flex;
    justify-content: center;
}

/* El texto al lado del icono */
.store-link span {
    font-size: 0.85rem;
    letter-spacing: 2px;
    font-weight: 400;
}

/* Efecto Hover */
.store-link:hover {
    background: #111;
    color: #fff;
}

.store-link:hover i {
    transform: scale(1.1);
    color: var(--accent-blood); /* Un toque rojo al seleccionar, muy estilo Cordura */
    text-shadow: 0 0 10px rgba(139, 0, 0, 0.5);
}

/* Quitar el borde al último elemento */
.store-link:last-child {
    border-bottom: none;
}


/* Selector de Idiomas */
.lang-selector-wrapper {
    position: relative;
    margin-right: 15px; /* Espacio con el botón de Wishlist */
}

.btn-lang {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 8px 12px;
    font-size: 0.75rem;
    font-family: var(--font-display);
    letter-spacing: 1px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s ease;
}

.btn-lang:hover {
    border-color: var(--accent-blood);
    color: var(--accent-gold);
}

.btn-lang i {
    font-size: 0.7rem;
    opacity: 0.7;
}

.lang-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #0a0a0a;
    border: 1px solid #222;
    min-width: 120px;
    display: none; /* Se activa con JS */
    flex-direction: column;
    z-index: 1100;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

.lang-dropdown.active {
    display: flex;
    animation: fadeInDown 0.3s ease forwards;
}

.lang-link {
    padding: 10px 15px;
    color: #888;
    text-decoration: none;
    font-size: 0.8rem;
    transition: 0.3s;
    border-bottom: 1px solid #1a1a1a;
    text-align: right;
}

.lang-link:last-child {
    border-bottom: none;
}

.lang-link:hover {
    background: #111;
    color: #fff;
    padding-right: 20px; /* Pequeño efecto de desplazamiento */
}

/* Contenedor de acciones en nav */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Más espacio entre ellos */
}

/* Rediseño de botones de navegación */
.btn-nav {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    
    /* Aumento de tamaño significativo */
    padding: 12px 24px; 
    font-size: 0.9rem; 
    
    font-family: var(--font-display);
    letter-spacing: 2px; /* Texto más expandido, estilo cinemático */
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(5px);
}

/* Botón Wishlist con borde rojo más intenso */
.btn-accent-nav {
    border-color: var(--accent-blood);
    background: rgba(139, 0, 0, 0.15);
    box-shadow: inset 0 0 10px rgba(139, 0, 0, 0.2);
}

.btn-nav:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
    transform: translateY(-2px); /* Pequeña elevación */
}

.btn-accent-nav:hover {
    background: var(--accent-blood);
    color: #fff;
    box-shadow: 0 0 20px rgba(139, 0, 0, 0.4);
}

/* Ajuste de los iconos dentro de los botones */
.btn-nav i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

/* Giro de flecha cuando el menú está activo (opcional, requiere clase .active en el botón vía JS) */
.btn-nav.active i.fa-chevron-down {
    transform: rotate(180deg);
}




/* Ajuste de Dropdowns */
.lang-dropdown, .wishlist-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    background: #080808;
    border: 1px solid #222;
    display: none;
    flex-direction: column;
    z-index: 1000;
    min-width: 140px;
}

/* Ajuste del desplegable para que encaje con el nuevo tamaño */
.lang-dropdown, .wishlist-dropdown {
    top: calc(100% + 10px);
    min-width: 180px; /* Un poco más ancho para legibilidad */
    border: 1px solid var(--accent-blood);
}

.lang-dropdown.active, .wishlist-dropdown.active {
    display: flex;
    animation: fadeInDown 0.2s ease-out;
}

.lang-link, .wishlist-dropdown a {
    padding: 10px 15px;
    font-size: 0.75rem;
    color: #aaa;
    text-decoration: none;
    border-bottom: 1px solid #111;
    transition: 0.2s;
}

.lang-link:hover, .wishlist-dropdown a:hover {
    background: #111;
    color: var(--accent-gold);
}