/*****************************************************************************************************************************************************************************/
/*                                                                                                                                                                           */
/*                                                              Estilos para la Vista de Cronología                                                                          */
/*                                                                                                                                                                           */
/*****************************************************************************************************************************************************************************/
/*                                                                                                                                                                           */
/* Autor: Magallanes López Carlos Gabriel                                                                                                                                    */
/* Versión del Proyecto: 1.6                                                                                                                                                 */
/* Correo: cgmagallanes23@gmail.com                                                                                                                                          */
/* Ultima Modificación: 28/06/2026                                                                                                                                           */
/*                                                                                                                                                                           */
/*****************************************************************************************************************************************************************************/


/* Propiedades Custom para HTML */
:root {
    --bg-void: #050510;
    --bg-deep: #0a0a1a;
    --bg-surface: #0f0f28;
    --bg-card: #12122e;
    --magenta: #ff2dce;
    --magenta-dim: #c4009e;
    --gold: #ffd700;
    --gold-dim: #c9a800;
    --cyan: #00d4ff;
    --purple: #8b5cf6;
    --purple-dim: #5b3ab0;
    --text-primary: #f0eaff;
    --text-muted: #8888b8;
    --text-dim: #44446a;
    --font-pixel: 'Press Start 2P', monospace;
    --font-body: 'Rajdhani', sans-serif;
    --radius: 4px;
    --transition: 0.25s ease;

    /* Colores por fase de versión */
    --color-pre: #4a90d9;
    --color-v10: #6c63ff;
    --color-v11: #00d4ff;
    --color-v12: #ff2dce;
    --color-v13: #f59e0b;
    --color-v14: #10b981;
    --color-v15: #8b5cf6;
    --color-contest: #ffd700;
}

/* 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-void);
    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.06) 2px, rgba(0, 0, 0, 0.06) 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-void);}

/* Pulgar del Scrollbar: Color Magenta con Bordes Redondeados */
::-webkit-scrollbar-thumb {background: var(--magenta-dim); 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 Neón en Magenta */
.neon-text {
    color: var(--magenta);
    text-shadow: 0 0 6px var(--magenta), 0 0 18px var(--magenta), 0 0 40px var(--magenta-dim);
}

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

/* Kicker de Sección: Texto Pequeño en Mayúsculas con Líneas Decorativas a los Lados */
.section-eyebrow {
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    letter-spacing: 0.3em;
    color: var(--cyan);
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Línea Izquierda del Kicker */
.section-eyebrow::before {content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan));}

/* Línea Derecha del Kicker */
.section-eyebrow::after {content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--cyan), transparent);}

/* Eyebrow Centrado (usado en el Hero de la Cronología) */
.section-eyebrow-centered {justify-content: center;}

/* Elementos con Animación de Reveal: Estado Inicial Invisible y Desplazado */
.reveal {opacity: 0; transform: translateY(24px); 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: 1.1rem 0;
    background: rgba(5, 5, 16, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 45, 206, 0.15);
    transition: border-color var(--transition);
}

/* Estado Scrolled de la Navbar: Borde Inferior Más Visible al Hacer Scroll */
.navbar.scrolled {border-bottom-color: rgba(255, 45, 206, 0.4);}

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

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

/* Imagen del Logo: Tamaño Fijo con Renderizado Pixelado para Preservar Estética Retro */
.navbar-logo img {width: 36px; height: 36px; image-rendering: pixelated;}

/* Texto Principal del Logo con Efecto Neón Magenta */
.navbar-logo-text {font-family: var(--font-pixel); font-size: 0.7rem; color: var(--magenta); text-shadow: 0 0 10px var(--magenta); letter-spacing: 0.1em;}

/* Versión del Logo: Texto Pequeño Dorado debajo del Nombre */
.navbar-logo-version {font-family: var(--font-pixel); font-size: 0.4rem; color: var(--gold); 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 Animado al Hover */
.navbar-links a {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
    transition: color var(--transition);
    position: relative;
}

/* 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(--magenta);
    transition: width var(--transition);
}

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

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

/* Enlace Activo: Mismo Color y Subrayado que el Hover, pero Persistente */
.navbar-links a.nav-active {color: var(--magenta);}
.navbar-links a.nav-active::after {width: 100%;}

/* Botón CTA de la Navbar: Estilo Pixel con Borde Magenta */
.navbar-cta {
    font-family: var(--font-pixel);
    font-size: 0.45rem;
    padding: 0.6rem 1.1rem;
    background: transparent;
    border: 1px solid var(--magenta);
    color: var(--magenta);
    border-radius: var(--radius);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: background var(--transition), box-shadow var(--transition), color var(--transition);
}

/* Estado Hover del CTA: Relleno Magenta con Efecto de Brillo */
.navbar-cta:hover {
    background: var(--magenta);
    color: var(--bg-void);
    box-shadow: 0 0 18px var(--magenta), 0 0 40px var(--magenta-dim);
}

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

/* Líneas del Botón Hamburguesa */
.navbar-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--magenta);
    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 Switch de Idioma: Fuente Rajdhani con Color Atenuado */
.lang-switch-current {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.55);
    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 y Transición Suave */
.lang-switch-track {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 45, 206, 0.4);
    border-radius: 999px;
    transition: background 0.25s ease, border-color 0.25s ease;
}

/* Pulgar del Switch: Círculo Púrpura con Sombra y Transición Suave */
.lang-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #8b5cf6;
    box-shadow: 0 0 6px rgba(139, 92, 246, 0.7);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Estado Activo (EN): Pista y Borde en Magenta */
.lang-switch-input:checked + .lang-switch-track {background: #ff2dce; border-color: #ff2dce;}

/* Estado Activo (EN): Pulgar Desplazado a la Derecha con Sombra Amplificada */
.lang-switch-input:checked + .lang-switch-track .lang-switch-thumb {
    transform: translateX(20px);
    box-shadow: 0 0 10px rgba(139, 92, 246, 1);
}

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

/* Estado Hover del Switch: Borde Magenta Más Visible */
.lang-switch:hover .lang-switch-track {border-color: rgba(255, 45, 206, 0.7);}

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

/* Sección Hero: Altura Reducida con Contenido Centrado */
.tl-hero {
    position: relative;
    min-height: 68vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8rem 2rem 3rem;
}

/* Contenedor del Fondo Synthwave: Ocupa Todo el Área del Hero */
.tl-hero-bg {position: absolute; inset: 0; overflow: hidden; pointer-events: none;}

/* Canvas del Grid Synthwave Animado */
#synthwave-canvas {position: absolute; inset: 0; width: 100%; height: 100%;}

/* Capa de Estrellas: Puntos de Brillo Decorativos Distribuidos en el Fondo */
.hero-stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 20% 15%, rgba(255,255,255,0.8) 0%, transparent 100%),
        radial-gradient(1px 1px at 55% 8%,  rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 80% 25%, rgba(255,255,255,0.9) 0%, transparent 100%),
        radial-gradient(1px 1px at 10% 40%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 90% 60%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(2px 2px at 65% 50%, rgba(0,212,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 45% 30%, rgba(255,45,206,0.6) 0%, transparent 100%);
}

/* Viñeta con Gradientes Radiales en los Bordes del Hero */
.tl-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(139,92,246,0.12) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 20% 100%, rgba(255,45,206,0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

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

/* Título del Hero: Fuente Pixel Grande con Efecto Neón */
.tl-hero-title {
    font-family: var(--font-pixel);
    font-size: clamp(1.5rem, 5vw, 3.5rem);
    color: var(--magenta);
    text-shadow:
        0 0 10px var(--magenta),
        0 0 30px var(--magenta),
        0 0 70px var(--magenta-dim),
        4px 4px 0 rgba(0,0,0,0.6);
    line-height: 1.1;
    margin-bottom: 1rem;
}

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

/* Contenedor de Estadísticas del Hero: Flexbox Centrado con Wrap */
.tl-hero-stats {display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap;}

/* Estadística Individual: Tarjeta Pequeña con Fondo Translúcido */
.tl-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    min-width: 100px;
}

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

/* Etiqueta de la Estadística: Texto Atenuado en Mayúsculas */
.tl-stat-label {
    font-size: 0.75rem;
    color: var(--text-dim);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
}

/* Barra de Leyenda: Sticky Debajo de la Navbar Principal */
.tl-legend-bar {
    position: sticky;
    top: 64px;
    z-index: 100;
    background: rgba(10, 10, 26, 0.96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 45, 206, 0.1);
    padding: 0.65rem 0;
}

/* Contenedor Interno de la Leyenda: Flexbox Horizontal con Scroll */
.tl-legend-inner {display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; overflow-x: auto; scrollbar-width: none;}

/* Oculta el Scrollbar en Navegadores WebKit */
.tl-legend-inner::-webkit-scrollbar {display: none;}

/* Item de la Leyenda: Flexbox con Punto de Color y Etiqueta */
.tl-legend-item {display: flex; align-items: center; gap: 0.4rem;}

/* Punto de Color de la Leyenda: Círculo Pequeño sin Encogimiento */
.tl-legend-dot {width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;}

/* Etiqueta de la Leyenda: Fuente Pixel Muy Pequeña sin Salto de Línea */
.tl-legend-label {font-family: var(--font-pixel); font-size: 0.32rem; color: var(--text-dim); letter-spacing: 0.06em; white-space: nowrap;}

/* Colores de los Puntos de la Leyenda por Fase, Usando las Propiedades Custom Definidas en :root */
.tl-dot-pre {background: var(--color-pre); box-shadow: 0 0 6px var(--color-pre);}
.tl-dot-v10 {background: var(--color-v10); box-shadow: 0 0 6px var(--color-v10);}
.tl-dot-v11 {background: var(--color-v11); box-shadow: 0 0 6px var(--color-v11);}
.tl-dot-v12 {background: var(--color-v12); box-shadow: 0 0 6px var(--color-v12);}
.tl-dot-v13 {background: var(--color-v13); box-shadow: 0 0 6px var(--color-v13);}
.tl-dot-v14 {background: var(--color-v14); box-shadow: 0 0 6px var(--color-v14);}
.tl-dot-v15 {background: var(--color-v15); box-shadow: 0 0 6px var(--color-v15);}
.tl-dot-contest {background: var(--color-contest); box-shadow: 0 0 8px var(--color-contest);}

/* Área Principal: Fondo Más Profundo con Padding Vertical Amplio */
.tl-main {background: var(--bg-deep); padding: 5rem 0 6rem;}

/* Pista de la Línea de Tiempo: Contenedor Relativo para la Línea y las Entradas */
.tl-track {position: relative;}

/* Línea Vertical Central: Crecimiento Animado mediante Transición de Altura */
.tl-line {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 2px;
    height: 0;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(255, 45, 206, 0.3) 5%,
        rgba(139, 92, 246, 0.4) 50%,
        rgba(0, 212, 255, 0.3) 95%,
        transparent 100%
    );
    transition: height 2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Encabezado de Fase: Centrado con Padding Vertical sobre el Fondo Principal */
.tl-phase-header {
    text-align: center;
    padding: 2.5rem 0 1.5rem;
    position: relative;
    z-index: 2;
    background: var(--bg-deep);
}

/* Badge de Fase: Etiqueta Pixel con Borde, Color Diferenciado por Versión */
.tl-phase-badge {
    display: inline-block;
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    letter-spacing: 0.12em;
    padding: 0.3rem 0.8rem;
    border-radius: 2px;
    border: 1px solid;
    margin-bottom: 0.75rem;
}

/* Variantes de Color del Badge por Versión */
.tl-phase-pre {background: rgba(74, 144, 217, 0.2); color: var(--color-pre); border-color: rgba(74, 144, 217, 0.4);}
.tl-phase-v10 {background: rgba(108, 99, 255, 0.2); color: var(--color-v10); border-color: rgba(108, 99, 255, 0.4);}
.tl-phase-v11 {background: rgba(0, 212, 255, 0.15); color: var(--color-v11); border-color: rgba(0, 212, 255, 0.4);}
.tl-phase-v12 {background: rgba(255, 45, 206, 0.2); color: var(--color-v12); border-color: rgba(255, 45, 206, 0.4);}
.tl-phase-v13 {background: rgba(245, 158, 11, 0.2); color: var(--color-v13); border-color: rgba(245, 158, 11, 0.4);}
.tl-phase-v14 {background: rgba(16, 185, 129, 0.2); color: var(--color-v14); border-color: rgba(16, 185, 129, 0.4);}
.tl-phase-v15 {background: rgba(139, 92, 246, 0.2); color: var(--color-v15); border-color: rgba(139, 92, 246, 0.4);}

/* Título del Encabezado de Fase: Fuente Pixel con Tamaño Adaptable al Viewport */
.tl-phase-title {
    font-family: var(--font-pixel);
    font-size: clamp(0.6rem, 1.8vw, 1rem);
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

/* Descripción del Encabezado de Fase: Texto Atenuado Centrado con Ancho Máximo */
.tl-phase-desc {font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; max-width: 520px; margin: 0 auto;}


/* Entrada de la Línea de Tiempo: Flexbox con Tarjeta y Punto sobre la Línea Central */
.tl-entry {
    display: flex;
    align-items: flex-start;
    position: relative;
    margin-bottom: 2rem;
    padding: 0 calc(50% + 2rem);
}

/* Entrada a la Derecha de la Línea Central */
.tl-right {flex-direction: row; padding-left: calc(50% + 2rem); padding-right: 0;}

/* Entrada a la Izquierda de la Línea Central */
.tl-left {flex-direction: row-reverse; padding-right: calc(50% + 2rem); padding-left: 0; text-align: right;}

/* Punto de la Entrada: Círculo Posicionado sobre la Línea Central */
.tl-entry-dot {
    position: absolute;
    left: 50%;
    top: 1.2rem;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--bg-deep);
    z-index: 3;
    transition: transform var(--transition), box-shadow var(--transition);
}

/* Estado Hover de la Entrada: Amplía el Punto sobre la Línea */
.tl-entry:hover .tl-entry-dot {transform: translateX(-50%) scale(1.4);}

/* Tarjeta de la Entrada: Fondo Oscuro con Borde Sutil */
.tl-entry-card {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
    max-width: 100%;
}

/* Estado Hover de la Tarjeta: Elevación con Borde y Fondo Magenta Translúcido */
.tl-entry:hover .tl-entry-card {
    border-color: rgba(255, 45, 206, 0.25);
    background: rgba(255, 45, 206, 0.03);
    transform: translateY(-2px);
}

/* Tarjeta de Hito de Concurso: Borde Dorado y Franja Superior de Gradiente */
.tl-card-contest {
    border-color: rgba(255, 215, 0, 0.2);
    background: rgba(255, 215, 0, 0.04);
    position: relative;
    overflow: hidden;
}

/* Franja Superior de la Tarjeta de Concurso: Gradiente Dorado */
.tl-card-contest::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold), var(--gold-dim));
}

/* Estado Hover de la Tarjeta de Concurso: Borde y Fondo Dorado Más Intensos */
.tl-entry:hover .tl-card-contest {border-color: rgba(255, 215, 0, 0.45); background: rgba(255, 215, 0, 0.07);}

/* Fecha de la Entrada: Fuente Pixel Atenuada con Espaciado Amplio */
.tl-entry-date {font-family: var(--font-pixel); font-size: 0.34rem; color: var(--text-dim); letter-spacing: 0.12em; margin-bottom: 0.5rem;}

/* Título de la Entrada: Fuente Pixel Primaria */
.tl-entry-title {font-family: var(--font-pixel); font-size: 0.42rem; color: var(--text-primary); line-height: 1.5; margin-bottom: 0.5rem;}

/* Descripción de la Entrada: Texto Atenuado con Interlineado Amplio */
.tl-entry-desc {font-size: 0.9rem; color: var(--text-muted); line-height: 1.7;}

/* Tag de la Entrada: Etiqueta Dorada de Ubicación o Contexto */
.tl-entry-tag {
    display: inline-block;
    font-family: var(--font-pixel);
    font-size: 0.3rem;
    color: var(--gold);
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.25);
    padding: 0.25rem 0.6rem;
    border-radius: 2px;
    margin-top: 0.75rem;
    letter-spacing: 0.08em;
}

/* Colores Específicos de los Puntos por Fase en las Entradas, Usando las Propiedades Custom Definidas en :root */
.tl-phase-pre-entry .tl-entry-dot {background: var(--color-pre);}
.tl-phase-v10-entry .tl-entry-dot {background: var(--color-v10);}
.tl-phase-v11-entry .tl-entry-dot {background: var(--color-v11);}
.tl-phase-v12-entry .tl-entry-dot {background: var(--color-v12);}
.tl-phase-v13-entry .tl-entry-dot {background: var(--color-v13);}
.tl-phase-v14-entry .tl-entry-dot {background: var(--color-v14);}
.tl-phase-v15-entry .tl-entry-dot {background: var(--color-v15);}

/* Borde Izquierdo Colorido en las Tarjetas según la Fase Correspondiente */
.tl-phase-pre-entry .tl-entry-card {border-left-color: rgba(74, 144, 217, 0.4);}
.tl-phase-v10-entry .tl-entry-card {border-left-color: rgba(108, 99, 255, 0.4);}
.tl-phase-v11-entry .tl-entry-card {border-left-color: rgba(0, 212, 255, 0.4);}
.tl-phase-v12-entry .tl-entry-card {border-left-color: rgba(255, 45, 206, 0.4);}
.tl-phase-v13-entry .tl-entry-card {border-left-color: rgba(245, 158, 11, 0.4);}
.tl-phase-v14-entry .tl-entry-card {border-left-color: rgba(16, 185, 129, 0.4);}
.tl-phase-v15-entry .tl-entry-card {border-left-color: rgba(139, 92, 246, 0.4);}


/* Contenedor del Marcador de Fin: Columna Centrada al Término de la Línea */
.tl-end {display: flex; flex-direction: column; align-items: center; padding: 2.5rem 0 0; position: relative;}

/* Punto del Fin de la Línea: Círculo con Animación de Pulso */
.tl-end-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--magenta);
    box-shadow: 0 0 12px var(--magenta), 0 0 30px var(--magenta-dim);
    animation: pulse 2s ease-in-out infinite;
}

/* Etiqueta del Fin de la Línea: Fuente Pixel Magenta con Brillo */
.tl-end-label {
    font-family: var(--font-pixel);
    font-size: 0.38rem;
    color: var(--magenta);
    margin-top: 0.75rem;
    letter-spacing: 0.12em;
    text-shadow: 0 0 8px var(--magenta);
}

/* Animación de Pulso para el Punto Final: Escala y Brillo Oscilantes */
@keyframes pulse {
    0%, 100% {box-shadow: 0 0 12px var(--magenta), 0 0 30px var(--magenta-dim); transform: scale(1);}
    50% {box-shadow: 0 0 20px var(--magenta), 0 0 50px var(--magenta-dim); transform: scale(1.15);}
}

/* Pie de Página: Fondo Oscuro con Borde Superior Sutil */
.footer {background: var(--bg-void); border-top: 1px solid rgba(255, 45, 206, 0.1); padding: 3rem 0 2rem;}

/* Interior del Pie de Página: Grid de Tres Columnas con Margen Inferior */
.footer-inner {display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem;}

/* Logo de la Marca en el Pie de Página: Flexbox Horizontal */
.footer-brand-logo {display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;}

/* Imagen del Logo en el Pie de Página: Tamaño Pequeño con Renderizado Pixelado */
.footer-brand-logo img {width: 32px; height: 32px; image-rendering: pixelated;}

/* Nombre de la Marca en el Pie de Página: Fuente Pixel Magenta con Brillo */
.footer-brand-name {font-family: var(--font-pixel); font-size: 0.65rem; color: var(--magenta); text-shadow: 0 0 8px var(--magenta);}

/* Descripción de la Marca: Texto Atenuado con Ancho Máximo */
.footer-brand-desc {font-size: 0.9rem; color: var(--text-dim); line-height: 1.7; max-width: 260px;}

/* Título de Navegación del Pie de Página: Fuente Pixel Dorada con Espaciado */
.footer-nav-title {font-family: var(--font-pixel); font-size: 0.4rem; color: var(--gold); letter-spacing: 0.15em; margin-bottom: 1rem;}

/* Lista de Links de Navegación del Pie de Página */
.footer-nav-links {list-style: none; display: flex; flex-direction: column; gap: 0.6rem;}

/* Enlace del Pie de Página: Texto Atenuado con Transición */
.footer-nav-links a {font-size: 0.9rem; color: var(--text-dim); transition: color var(--transition);}

/* Estado Hover del Enlace: Cambia el Color a Magenta */
.footer-nav-links a:hover {color: var(--magenta);}

/* Parte Inferior del Pie de Página: Borde Superior con Flexbox para Distribuir Elementos */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

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

/* Versión del Footer: Fuente Pixel Púrpura Pequeña */
.footer-version {font-family: var(--font-pixel); font-size: 0.38rem; color: var(--purple); letter-spacing: 0.1em;}

/* Responsive para Pantallas Menores a 1024px */
@media (max-width: 1024px) {
    .footer-inner {grid-template-columns: 1fr 1fr;}                                                                            /* Footer: Dos Columnas */
}

/* Responsive para Pantallas Menores a 768px: Ajustes para Móviles y Timeline de Una Sola Columna */
@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(5, 5, 16, 0.98);
        padding: 1.5rem 2rem;
        gap: 1.2rem;
        border-bottom: 1px solid rgba(255, 45, 206, 0.2);
    }
    .navbar-links.open {display: flex;}                                                                                        /* Links de la Navbar Abiertos: Flexbox para Mostrar */
    .navbar-hamburger {display: flex;}                                                                                         /* Hamburguesa: Visible en Móvil */
    .navbar-cta {display: none;}                                                                                               /* CTA de la Navbar: Oculto en Móvil */

    .tl-line {left: 20px; transform: none;}                                                                                    /* Línea Central: Desplazada al Lado Izquierdo en Móvil */

    .tl-entry-dot {left: 20px; transform: translateX(-50%);}                                                                   /* Punto de Entrada: Alineado a la Línea Desplazada */
    .tl-entry:hover .tl-entry-dot {transform: translateX(-50%) scale(1.4);}                                                    /* Hover del Punto: Mantiene la Escala sobre la Nueva Posición */

    .tl-entry,
    .tl-right,
    .tl-left {                                                                                                                 /* Todas las Entradas: Van a la Derecha en Móvil */
        flex-direction: row;
        padding-left: 3.5rem;
        padding-right: 0;
        text-align: left;
    }

    .tl-phase-header {text-align: left; padding-left: 3.5rem;}                                                                 /* Encabezado de Fase: Alineado a la Izquierda en Móvil */

    .tl-hero-stats {gap: 1rem;}                                                                                                /* Estadísticas del Hero: Espacio Reducido */
    .tl-stat {min-width: 80px; padding: 0.5rem 0.75rem;}                                                                       /* Estadística: Tamaño Compacto */
    .tl-legend-inner {gap: 1rem; justify-content: flex-start; padding: 0 1rem;}                                                /* Leyenda: Alineada al Inicio con Scroll Horizontal */
    .footer-inner {grid-template-columns: 1fr; gap: 2rem;}                                                                     /* Footer: Una Sola Columna con Menos Espacio */
    .tl-end {align-items: flex-start; padding-left: 3.5rem;}                                                                   /* Marcador de Fin: Alineado a la Línea Desplazada */
}

/* Responsive para Pantallas Menores a 480px: Ajustes para Móviles Pequeños */
@media (max-width: 480px) {
    .tl-hero-title {font-size: 1.5rem;}                                                                                        /* Título del Hero: Tamaño Reducido */
    .tl-entry-card {padding: 1rem;}                                                                                            /* Tarjeta de Entrada: Padding 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;}
    .tl-end-dot {animation: none;}                                                                                             /* Punto Final: Sin Animación de Pulso */
}

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