/*****************************************************************************************************************************************************************************/
/*                                                                                                                                                                           */
/*                                                              Estilos para el Sitio Web de Casino Royal                                                                    */
/*                                                                                                                                                                           */
/*****************************************************************************************************************************************************************************/
/*                                                                                                                                                                           */
/* Autor: Magallanes López Carlos Gabriel                                                                                                                                    */
/* Fecha: 29/06/2024                                                                                                                                                         */
/* Correo: cgmagallanes23@gmail.com                                                                                                                                          */
/* Versión: 1.1                                                                                                                                                              */
/*                                                                                                                                                                           */
/*****************************************************************************************************************************************************************************/


/* Propiedades Custom para HTML */
:root {
    --bg-dark: #0a0000;
    --bg-mid: #110000;
    --bg-card: #0e0000;
    --red: #8b0000;
    --red-bright: #cc1111;
    --red-light: #e83333;
    --gold: #ffd700;
    --gold-dim: #c9a800;
    --gold-bright: #ffe54c;
    --black-card: #111111;
    --crimson: #dc143c;
    --crimson-dim: #9b0d2a;
    --text-primary: #f5f0e0;
    --text-muted: #b08070;
    --text-dim: #5a3030;
    --font-pixel: 'Press Start 2P', monospace;
    --font-body: 'Rajdhani', sans-serif;
    --radius: 6px;
    --transition: 0.25s ease;
}

/* Reset del Selector Global y de sus Pseudo-Elementos */
*, *::before, *::after {box-sizing: border-box; margin: 0; padding: 0;}

/* Configuración de Scroll Suave para Anclas */
html {scroll-behavior: smooth;}

/* Aplicamos el Estilo al Cuerpo del Documento */
body {
    background: var(--bg-dark);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Imágenes en Bloque con Ancho Máximo para Evitar Desbordamiento */
img {display: block; max-width: 100%;}

/* Enlace sin Subrayado Predeterminado */
a {color: inherit; text-decoration: none;}

/* Overlay de Scanlines: Líneas Horizontales Sutiles sobre Todo el Contenido */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg, transparent, transparent 2px,
        rgba(0, 0, 0, 0.05) 2px, rgba(0, 0, 0, 0.05) 4px
    );
    pointer-events: none;
    z-index: 9999;
}

/* Ancho del Scrollbar Personalizado para WebKit */
::-webkit-scrollbar {width: 6px;}

/* Base del Scrollbar: Fondo Oscuro */
::-webkit-scrollbar-track {background: var(--bg-dark);}

/* Pulgar del Scrollbar: Color Rojo Brillante con Bordes Redondeados */
::-webkit-scrollbar-thumb {background: var(--red-bright); border-radius: 3px;}

/* Contenedor Principal: Ancho Máximo para Centrar el Contenido */
.container {width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 2rem;}

/* Texto con Efecto de Brillo Dorado */
.gold {color: var(--gold); text-shadow: 0 0 8px var(--gold), 0 0 20px var(--gold-dim);}

/* Elementos con Animación de Reveal: Estado Inicial Invisible y Desplazado */
.reveal {opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease;}

/* Estado Visible del Reveal: Totalmente Opaco en Posición Original */
.reveal.visible {opacity: 1; transform: translateY(0);}

/* Barra de Navegación Fija con Efecto de Cristal Esmerilado */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1rem 0;
    background: rgba(10, 0, 0, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(220, 20, 60, 0.2);
    transition: border-color var(--transition);
}

/* Estado Scrolled de la Navbar: Borde Inferior Más Visible al Hacer Scroll */
.navbar.scrolled {border-bottom-color: rgba(220, 20, 60, 0.55);}

/* Contenedor Interno de la Navbar: Flexbox para Alinear Logo, Links y Switch */
.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Logo de la Navbar: Flexbox para Alinear Ícono y Texto */
.navbar-logo {display: flex; align-items: center; gap: 0.75rem;}

/* Ícono de Palo de Carta del Logo: Carmesí con Brillo */
.navbar-logo-icon {
    font-size: 1.8rem;
    color: var(--crimson);
    text-shadow: 0 0 10px var(--crimson);
    line-height: 1;
}

/* Texto Principal del Logo: Fuente Pixel Dorada con Brillo */
.navbar-logo-text {
    font-family: var(--font-pixel);
    font-size: 0.6rem;
    color: var(--gold);
    text-shadow: 0 0 8px var(--gold);
    letter-spacing: 0.1em;
}

/* Subtítulo del Logo: Fuente Pixel Atenuada debajo del Nombre */
.navbar-logo-sub {font-family: var(--font-pixel); font-size: 0.32rem; color: var(--text-muted); margin-top: 2px;}

/* Lista de Links de Navegación */
.navbar-links {display: flex; align-items: center; gap: 2rem; list-style: none;}

/* Enlace de Navegación con Subrayado Carmesí Animado al Hover */
.navbar-links a {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
    position: relative;
    transition: color var(--transition);
}

/* Línea de Subrayado Animada: Aparece de Izquierda a Derecha al Hover */
.navbar-links a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--crimson);
    transition: width var(--transition);
}

/* Estado Hover del Enlace: Cambia el Color a Carmesí */
.navbar-links a:hover {color: var(--crimson);}

/* Estado Hover del Subrayado: Expande la Línea a Todo el Ancho */
.navbar-links a:hover::after {width: 100%;}

/* Botón Hamburguesa para Móvil: Oculto por Defecto */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
}

/* Líneas del Botón Hamburguesa */
.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--crimson);
    border-radius: 1px;
    transition: transform var(--transition), opacity var(--transition);
}

/* Contenedor del Switch de Idioma: Flexbox con Espacio entre Elementos */
.lang-switch-wrap {display: flex; align-items: center; gap: 8px;}

/* Etiqueta del Idioma Actual: Fuente Body con Color Atenuado */
.lang-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    width: 22px;
    text-align: center;
    user-select: none;
}

/* Switch de Idioma: Contenedor Relativo con Tamaño Fijo y Cursor Pointer */
.lang-switch {position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer;}

/* Input del Switch: Oculto para Usar el Label como Interfaz Visual */
.lang-switch-input {position: absolute; opacity: 0; width: 0; height: 0;}

/* Pista del Switch: Fondo Translúcido con Borde Carmesí y Transición Suave */
.lang-switch-track {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(220, 20, 60, 0.4);
    border-radius: 999px;
    transition: background 0.25s ease, border-color 0.25s ease;
}

/* Pulgar del Switch: Círculo Rojo Brillante con Sombra y Transición Suave */
.lang-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--red-bright);
    box-shadow: 0 0 6px rgba(204, 17, 17, 0.8);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Estado Activo (EN): Pista con Fondo y Borde Dorado */
.lang-switch-input:checked + .lang-switch-track {background: rgba(255, 215, 0, 0.2); border-color: var(--gold);}

/* Estado Activo (EN): Pulgar Desplazado a la Derecha con Color y Sombra Dorados */
.lang-switch-input:checked + .lang-switch-track .lang-switch-thumb {
    transform: translateX(20px);
    background: var(--gold);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.9);
}

/* Accesibilidad: Anillo de Foco Visible al Navegar con Teclado */
.lang-switch-input:focus-visible + .lang-switch-track {outline: 2px solid var(--crimson); outline-offset: 2px;}

/* Estado Hover del Switch: Borde Carmesí Más Visible */
.lang-switch:hover .lang-switch-track {border-color: var(--crimson);}

/* Botón Base: Estilos Compartidos para Todos los Tipos de Botón */
.btn {
    display: inline-flex;                                                                                                        /* Flexbox para Centrar Contenido */
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-pixel);
    font-size: 0.42rem;
    letter-spacing: 0.1em;
    padding: 1rem 2rem;
    border-radius: var(--radius);
    cursor: pointer;
    border: none;
    text-transform: uppercase;
    transition: all var(--transition);
    text-decoration: none;
}

/* Botón Primario: Fondo Carmesí con Sombra de Brillo */
.btn-primary {background: var(--crimson); color: #fff; font-weight: 700; box-shadow: 0 0 18px rgba(220, 20, 60, 0.5);}

/* Estado Hover del Botón Primario: Tono Más Claro y Brillo Amplificado */
.btn-primary:hover {background: var(--red-light); box-shadow: 0 0 32px rgba(220, 20, 60, 0.8); transform: translateY(-2px);}

/* Botón Outline: Borde Dorado con Fondo Transparente */
.btn-outline {background: transparent; color: var(--gold); border: 1px solid rgba(255, 215, 0, 0.45);}

/* Estado Hover del Botón Outline: Fondo Translúcido con Borde Dorado Completo */
.btn-outline:hover {background: rgba(255, 215, 0, 0.08); border-color: var(--gold); transform: translateY(-2px);}

/* Botón de Descarga Grande: Gradiente Carmesí con Borde y Sombra Profunda */
.btn-download {
    background: linear-gradient(135deg, var(--crimson) 0%, #8b0000 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.5rem;
    padding: 1.25rem 2.5rem;
    box-shadow: 0 0 24px rgba(220, 20, 60, 0.55), 0 4px 16px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(220, 20, 60, 0.6);
}

/* Estado Hover del Botón de Descarga: Gradiente Invertido con Brillo Amplificado */
.btn-download:hover {
    background: linear-gradient(135deg, var(--red-light) 0%, var(--crimson) 100%);
    box-shadow: 0 0 40px rgba(220, 20, 60, 0.85), 0 4px 20px rgba(0, 0, 0, 0.6);
    transform: translateY(-3px);
}

/* Sección Hero: Altura Completa con Contenido Centrado */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 6rem 2rem 4rem;
}

/* Fondo del Hero: Ocupa Todo el Área de la Sección */
.hero-bg {position: absolute; inset: 0;}

/* Canvas del Fondo Animado del Casino */
#casino-canvas {position: absolute; inset: 0; width: 100%; height: 100%;}

/* Overlay Oscuro del Fondo: Gradiente Radial para Legibilidad del Contenido */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse 80% 70% at 50% 50%, rgba(10,0,0,0.45) 0%, rgba(10,0,0,0.88) 100%);
}

/* Contenido Principal del Hero: Centrado y por Encima del Fondo */
.hero-content {position: relative; z-index: 2; text-align: center; max-width: 750px;}

/* Eyebrow del Hero: Fuente Pixel Roja con Espaciado Amplio */
.hero-eyebrow {
    font-family: var(--font-pixel);
    font-size: 0.45rem;
    color: var(--red-light);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

/* Título Principal del Hero: Fuente Pixel Grande con Efecto Dorado */
.hero-title {
    font-family: var(--font-pixel);
    font-size: clamp(2rem, 7vw, 5rem);
    color: var(--gold);
    text-shadow:
        0 0 10px var(--gold),
        0 0 30px var(--gold-dim),
        0 0 60px rgba(255, 215, 0, 0.25),
        4px 4px 0 rgba(0, 0, 0, 0.9);
    line-height: 1.15;
    margin-bottom: 0;
}

/* Palabra "ROYAL": Mismo Tamaño que el Título pero en Color Carmesí */
.hero-title-royal {
    color: var(--crimson);
    text-shadow: 0 0 12px var(--crimson), 0 0 35px rgba(220, 20, 60, 0.5), 4px 4px 0 rgba(0, 0, 0, 0.9);
}

/* Descripción del Hero: Texto de Apoyo con Color Atenuado y Mayor Interlineado */
.hero-desc {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--text-muted);
    max-width: 540px;
    margin: 1.5rem auto 0.75rem;
    line-height: 1.8;
}

/* Símbolos de Palos de Cartas con Animación de Pulso */
.hero-symbols {
    font-size: 2rem;
    color: var(--crimson);
    margin: 1rem 0 2rem;
    letter-spacing: 0.3em;
    text-shadow: 0 0 8px var(--crimson);
    animation: pulse-symbols 2s ease-in-out infinite;
}

/* Animación de Pulso para los Símbolos: Opacidad y Brillo Oscilantes */
@keyframes pulse-symbols {
    0%, 100% {opacity: 1; text-shadow: 0 0 8px var(--crimson);}
    50% {opacity: 0.7; text-shadow: 0 0 22px var(--crimson);}
}

/* Contenedor de Botones del Hero: Flexbox Centrado con Wrap */
.hero-actions {display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;}

/* Barra de Stats: Fondo Más Oscuro con Bordes Sutiles */
.stats-bar {
    background: var(--bg-mid);
    border-top: 1px solid rgba(220, 20, 60, 0.2);
    border-bottom: 1px solid rgba(220, 20, 60, 0.2);
    padding: 1.25rem 0;
}

/* Contenedor Interno de Stats: Flexbox Centrado con Wrap */
.stats-inner {display: flex; align-items: center; justify-content: center; gap: 3rem; flex-wrap: wrap;}

/* Estadística Individual: Columna Centrada */
.stat {display: flex; flex-direction: column; align-items: center; gap: 0.2rem;}

/* Valor de la Estadística: Fuente Pixel Destacada */
.stat-value {font-family: var(--font-pixel); font-size: 1rem; line-height: 1;}

/* Etiqueta de la Estadística: Fuente Pixel Muy Pequeña y Atenuada */
.stat-label {
    font-family: var(--font-pixel); 
    font-size: 0.3rem; 
    color: var(--text-dim); 
    letter-spacing: 0.1em; 
    text-transform: uppercase;
}


/* Sección Base: Padding Vertical para Separar Visualmente las Secciones */
.section {padding: 6rem 0;}

/* Variante de Sección: Fondo Más Oscuro para Alternar Visualmente */
.section-alt {background: var(--bg-mid);}

/* Encabezado de Sección: Centrado con Margen Inferior */
.section-header {text-align: center; margin-bottom: 4rem;}

/* Eyebrow de Sección: Fuente Pixel Roja con Palos de Cartas Decorativos */
.eyebrow {
    font-family: var(--font-pixel);
    font-size: 0.4rem;
    color: var(--red-light);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

/* Palo de Carta Izquierdo del Eyebrow */
.eyebrow::before {content: '♠'; color: var(--crimson);}

/* Palo de Carta Derecho del Eyebrow */
.eyebrow::after {content: '♠'; color: var(--crimson);}

/* Título de Sección: Fuente Pixel Dorada Centrada con Tamaño Adaptable */
.section-title {
    font-family: var(--font-pixel);
    font-size: clamp(0.8rem, 2.5vw, 1.3rem);
    color: var(--gold);
    line-height: 1.4;
    margin-bottom: 1rem;
    text-align: center;
}

/* Descripción de Sección: Texto Atenuado Centrado con Ancho Máximo */
.section-desc {
    font-size: 1.05rem; 
    color: var(--text-muted); 
    max-width: 560px; 
    margin: 0 auto; 
    line-height: 1.7; 
    text-align: center;
}

/* Grid de Juegos: Dos Columnas */
.games-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;}

/* Tarjeta de Juego: Flexbox Horizontal con Ícono y Cuerpo */
.game-card {
    background: var(--bg-card);
    border: 1px solid rgba(220, 20, 60, 0.12);
    border-radius: var(--radius);
    padding: 2rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

/* Estado Hover de la Tarjeta: Elevación con Borde y Fondo Carmesí Translúcido */
.game-card:hover {border-color: rgba(220, 20, 60, 0.45); background: rgba(220, 20, 60, 0.03); transform: translateY(-3px);}

/* Ícono de la Tarjeta de Juego: Cuadrado con Fondo de Color */
.game-card-icon {
    font-size: 2.5rem;
    width: 72px;
    height: 72px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Colores de Fondo del Ícono por Juego, Usando las Propiedades Custom Definidas en :root */
.red-bg {background: rgba(220, 20, 60, 0.18); border: 1px solid rgba(220, 20, 60, 0.4);}
.green-bg {background: rgba(139, 0, 0, 0.22); border: 1px solid rgba(139, 0, 0, 0.45);}
.blue-bg {background: rgba(180, 10, 40, 0.18); border: 1px solid rgba(180, 10, 40, 0.4);}
.gold-bg {background: rgba(255, 215, 0, 0.10); border: 1px solid rgba(255, 215, 0, 0.32);}

/* Cuerpo de la Tarjeta: Ocupa el Espacio Restante sin Desbordarse */
.game-card-body {flex: 1; min-width: 0;}

/* Badge de la Tarjeta: Etiqueta Pixel con Color Diferenciado por Juego */
.game-card-badge {
    font-family: var(--font-pixel);
    font-size: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 2px;
    display: inline-block;
    margin-bottom: 0.5rem;
    letter-spacing: 0.08em;
}

/* Variantes de Color del Badge por Juego */
.red-badge {background: rgba(220, 20, 60, 0.2); color: #ff6677; border: 1px solid rgba(220, 20, 60, 0.45);}
.green-badge {background: rgba(139, 0, 0, 0.22); color: #e06060; border: 1px solid rgba(139, 0, 0, 0.45);}
.blue-badge {background: rgba(180, 10, 40, 0.18); color: #e05070; border: 1px solid rgba(180, 10, 40, 0.4);}
.gold-badge {background: rgba(255, 215, 0, 0.10); color: var(--gold); border: 1px solid rgba(255, 215, 0, 0.32);}

/* Título de la Tarjeta: Fuente Pixel Primaria */
.game-card-title {
    font-family: var(--font-pixel); 
    font-size: 0.6rem; 
    color: var(--text-primary);
    margin-bottom: 0.6rem; 
    line-height: 1.4;
}

/* Descripción de la Tarjeta: Texto Atenuado con Interlineado y Margen Inferior */
.game-card-desc {font-size: 0.9rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 0.75rem;}

/* Contenedor de Tags de la Tarjeta: Flexbox con Wrap */
.game-card-tags {display: flex; flex-wrap: wrap; gap: 0.4rem;}

/* Tag Genérico: Fondo Carmesí Translúcido con Texto Atenuado */
.tag {
    font-family: var(--font-pixel);
    font-size: 0.28rem;
    padding: 0.2rem 0.5rem;
    background: rgba(220, 20, 60, 0.07);
    border: 1px solid rgba(220, 20, 60, 0.22);
    border-radius: 2px;
    color: var(--text-dim);
    letter-spacing: 0.05em;
}

/* Grid de Registro: Cuatro Columnas */
.reg-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem;}

/* Tarjeta de Registro: Centrada con Borde Sutil */
.reg-card {
    background: var(--bg-card);
    border: 1px solid rgba(220, 20, 60, 0.12);
    border-radius: var(--radius);
    padding: 1.75rem 1.25rem;
    text-align: center;
    transition: border-color var(--transition), transform var(--transition);
}

/* Estado Hover de la Tarjeta de Registro: Elevación con Borde Carmesí */
.reg-card:hover {border-color: rgba(220, 20, 60, 0.45); transform: translateY(-2px);}

/* Número de la Tarjeta de Registro: Fuente Pixel Grande con Brillo Carmesí */
.reg-card-num {
    font-family: var(--font-pixel);
    font-size: 1.2rem;
    color: var(--crimson);
    text-shadow: 0 0 10px var(--crimson);
    margin-bottom: 0.75rem;
    line-height: 1;
}

/* Título de la Tarjeta de Registro: Fuente Pixel Primaria */
.reg-card-title {
    font-family: var(--font-pixel); 
    font-size: 0.4rem; 
    color: var(--text-primary); 
    margin-bottom: 0.5rem; 
    line-height: 1.5;
}

/* Descripción de la Tarjeta de Registro: Texto Atenuado con Interlineado */
.reg-card-desc {font-size: 0.85rem; color: var(--text-muted); line-height: 1.6;}

/* Nota de Registro: Centrada con Borde y Fondo Carmesí Translúcido */
.reg-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: rgba(220, 20, 60, 0.05);
    border: 1px solid rgba(220, 20, 60, 0.18);
    border-radius: var(--radius);
    font-size: 0.9rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* Ícono de la Nota de Registro: Sin Encogimiento */
.reg-note-icon {font-size: 1.2rem; flex-shrink: 0;}

/* Grid de Stack: Tres Columnas */
.stack-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;}

/* Tarjeta del Stack: Centrada con Borde Sutil */
.stack-card {
    background: var(--bg-card);
    border: 1px solid rgba(220, 20, 60, 0.1);
    border-radius: var(--radius);
    padding: 1.75rem;
    text-align: center;
    transition: border-color var(--transition), transform var(--transition);
}

/* Estado Hover de la Tarjeta del Stack: Elevación con Borde Carmesí */
.stack-card:hover {border-color: rgba(220, 20, 60, 0.4); transform: translateY(-2px);}

/* Ícono del Stack: Tamaño Grande con Margen Inferior */
.stack-icon {font-size: 2rem; margin-bottom: 0.75rem;}

/* Nombre del Stack: Fuente Pixel Dorada */
.stack-name {font-family: var(--font-pixel); font-size: 0.4rem; color: var(--gold); margin-bottom: 0.5rem; line-height: 1.5;}

/* Descripción del Stack: Texto Atenuado con Interlineado */
.stack-desc {font-size: 0.85rem; color: var(--text-muted); line-height: 1.6;}

/* Caja de Descarga: Tarjeta Centrada con Layout de Dos Columnas */
.dl-box {
    background: var(--bg-card);
    border: 1px solid rgba(220, 20, 60, 0.2);
    border-radius: var(--radius);
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    max-width: 800px;
    margin: 0 auto;
}

/* Contenedor de Requisitos y Pasos en Fila: Grid de Dos Columnas */
.dl-info {display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; width: 100%;}

/* Títulos de Requisitos y Pasos: Fuente Pixel Dorada Centrada */
.dl-reqs-title,
.dl-steps-title {
    font-family: var(--font-pixel);
    font-size: 0.45rem;
    color: var(--gold);
    margin-bottom: 1.5rem;
    line-height: 1.5;
    text-align: center;
}

/* Item de Requisito: Flexbox con Borde Inferior Separador */
.dl-req-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Último Item de Requisito: Elimina el Borde Inferior */
.dl-req-item:last-child {border-bottom: none;}

/* Etiqueta del Item de Requisito: Fuente Pixel Atenuada */
.dl-req-label {font-family: var(--font-pixel); font-size: 0.35rem; color: var(--text-dim);}

/* Valor del Item de Requisito: Texto Primario en Negrita */
.dl-req-value {font-size: 0.9rem; color: var(--text-primary); font-weight: 600;}

/* Paso de Instalación: Flexbox con Número y Título */
.dl-step {display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem;}

/* Último Paso: Elimina el Margen Inferior */
.dl-step:last-child {margin-bottom: 0;}

/* Número del Paso: Fuente Pixel Carmesí con Brillo */
.dl-step-num {
    font-family: var(--font-pixel);
    font-size: 0.7rem;
    color: var(--crimson);
    text-shadow: 0 0 8px var(--crimson);
    flex-shrink: 0;
    margin-top: 0.1rem;
    line-height: 1;
}

/* Título del Paso: Fuente Pixel Primaria con Interlineado */
.dl-step-title {
    font-family: var(--font-pixel); 
    font-size: 0.35rem; 
    color: var(--text-primary); 
    margin-bottom: 0.4rem; 
    line-height: 1.5;
}

/* Bloque de Código: Fondo Oscuro con Texto Rojo Claro */
.dl-code {
    display: block;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(220, 20, 60, 0.2);
    border-radius: 3px;
    padding: 0.4rem 0.75rem;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: var(--red-light);
    letter-spacing: 0.03em;
}

/* Área del Botón de Descarga: Columna Centrada */
.dl-cta {display: flex; flex-direction: column; align-items: center; gap: 0.75rem;}

/* Nota bajo el Botón de Descarga: Fuente Pixel Muy Atenuada */
.dl-cta-note {font-family: var(--font-pixel); font-size: 0.3rem; color: var(--text-dim); letter-spacing: 0.06em;}

/* Pie de Página: Fondo Oscuro con Borde Superior Carmesí Sutil */
.footer {background: var(--bg-dark); border-top: 1px solid rgba(220, 20, 60, 0.15); padding: 3rem 0;}

/* Contenido del Footer: Columna Centrada con Espacio entre Elementos */
.footer-inner {text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.75rem;}

/* Marca del Footer: Flexbox con Ícono y Nombre */
.footer-brand {display: flex; align-items: center; gap: 0.6rem;}

/* Ícono del Footer: Carmesí con Brillo */
.footer-logo-icon {font-size: 1.5rem; color: var(--crimson); text-shadow: 0 0 8px var(--crimson);}

/* Nombre de la Marca en el Footer: Fuente Pixel Dorada con Brillo */
.footer-brand-name {font-family: var(--font-pixel); font-size: 0.55rem; color: var(--gold); text-shadow: 0 0 6px var(--gold);}

/* Descripción del Footer: Texto Atenuado con Ancho Máximo */
.footer-desc {font-size: 0.9rem; color: var(--text-dim); max-width: 500px; line-height: 1.6;}

/* Crédito del Desarrollador: Texto Atenuado */
.footer-dev {font-size: 0.9rem; color: var(--text-muted);}

/* Copyright del Footer: Fuente Pixel Muy Pequeña y Atenuada */
.footer-copy {font-family: var(--font-pixel); font-size: 0.3rem; color: var(--text-dim); letter-spacing: 0.08em;}

/* Responsive para Pantallas Menores a 1024px: Ajustes de Grid para Tablets */
@media (max-width: 1024px) {
    .games-grid {grid-template-columns: 1fr;}                                                                                    /* Juegos: Una Sola Columna */
    .reg-grid {grid-template-columns: repeat(2, 1fr);}                                                                           /* Registro: Dos Columnas */
    .stack-grid {grid-template-columns: repeat(2, 1fr);}                                                                         /* Stack: Dos Columnas */
    .dl-info {grid-template-columns: 1fr;}                                                                                       /* Descarga: Una Sola Columna */
}

/* Responsive para Pantallas Menores a 768px: Ajustes para Móviles */
@media (max-width: 768px) {
    .navbar-links {                                                                                                              /* Links de la Navbar: Menú Desplegable Vertical */
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(10, 0, 0, 0.98);
        padding: 1.5rem 2rem;
        gap: 1.2rem;
        border-bottom: 1px solid rgba(220, 20, 60, 0.25);
    }
    .navbar-links.open {display: flex;}                                                                                          /* Links de la Navbar Abiertos: Flexbox para Mostrar */
    .hamburger {display: flex;}                                                                                                  /* Hamburguesa: Visible en Móvil */
    .hero-title {font-size: 2.5rem;}                                                                                             /* Título del Hero: Tamaño Reducido */
    .hero-actions {flex-direction: column; align-items: stretch;}                                                                /* Botones del Hero: Columna de Ancho Completo */
    .stats-inner {gap: 1.5rem;}                                                                                                  /* Stats: Espacio Reducido */
    .reg-grid {grid-template-columns: 1fr 1fr;}                                                                                  /* Registro: Dos Columnas */
    .stack-grid {grid-template-columns: 1fr;}                                                                                    /* Stack: Una Sola Columna */
    .game-card {flex-direction: column;}                                                                                         /* Tarjeta de Juego: Columna Vertical */
}

/* Responsive para Pantallas Menores a 480px: Ajustes para Móviles Pequeños */
@media (max-width: 480px) {
    .hero-title {font-size: 2rem;}                                                                                               /* Título del Hero: Tamaño Mínimo */
    .reg-grid {grid-template-columns: 1fr;}                                                                                      /* Registro: Una Sola Columna */
    .games-grid {grid-template-columns: 1fr;}                                                                                    /* Juegos: Una Sola Columna */
    .hero-symbols {font-size: 1.4rem;}                                                                                           /* Símbolos del Hero: Tamaño Reducido */
}

/* Accesibilidad: Desactiva Animaciones para Usuarios que Prefieren Movimiento Reducido */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {animation-duration: 0.01ms !important; transition-duration: 0.01ms !important;}
    .hero-symbols {animation: none;}                                                                                             /* Símbolos: Sin Animación de Pulso */
}

/*****************************************************************************************************************************************************************************/