/* --- Estilos Globales y Efecto de Lluvia --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #070708; /* Negro ultra profundo */
    color: #e1e1e6;
    display: flex;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Generación de la lluvia de fondo (Letras y Números) */
body::before, body::after {
    content: "x  7  ÷  π  4  a  +  %  9  y  f  √  3  8  b  =  ●  ∑";
    position: fixed;
    top: -100px;
    font-family: monospace;
    font-size: 1.5rem;
    font-weight: bold;
    color: rgba(130, 87, 229, 0.15); /* Morado sutil translúcido */
    white-space: nowrap;
    word-spacing: 40px;
    letter-spacing: 15px;
    width: 200%;
    z-index: -1;
    pointer-events: none;
}

body::before {
    left: -10%;
    animation: rainFall 12s linear infinite;
    text-shadow: 0 200px rgba(130, 87, 229, 0.1), 0 400px rgba(152, 113, 245, 0.08);
}

body::after {
    right: -20%;
    animation: rainFall 18s linear infinite reverse;
    font-size: 1.2rem;
    color: rgba(152, 113, 245, 0.1);
    text-shadow: 0 250px rgba(130, 87, 229, 0.08), 0 500px rgba(152, 113, 245, 0.05);
}

/* Animación de caída continua */
@keyframes rainFall {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(100vh);
    }
}

/* --- Contenedor Principal --- */
.container {
    width: 100%;
    max-width: 900px;
    background-color: #0f0f12; /* Negro suave para contrastar con el fondo */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 40px rgba(130, 87, 229, 0.15);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #1f1f23;
    z-index: 1;
}

/* --- Barra de Navegación --- */
.navbar {
    background-color: #050506; /* Negro puro */
    padding: 16px 24px;
    display: flex;
    justify-content: flex-end;
    border-bottom: 2px solid #6d28d9; /* Morado eléctrico */
}

.nav-links a {
    color: #a8a8b3;
    text-decoration: none;
    font-size: 0.9rem;
    margin-left: 20px;
    text-transform: capitalize;
    font-weight: 500;
    transition: color 0.3s, text-shadow 0.3s;
}

.nav-links a:hover, .nav-links .active-link {
    color: #9871f5; /* Neón morado */
    text-shadow: 0 0 10px rgba(152, 113, 245, 0.6);
}

/* --- Sección Hero --- */
.hero-section {
    background-color: #0b0b0d;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid #1f1f23;
}

.site-title {
    font-size: 1.8rem;
    color: #9871f5;
    margin-bottom: 25px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-shadow: 0 0 15px rgba(152, 113, 245, 0.3);
}

/* Recuadro de la Ilustración Gráfica */
.graphic-container {
    width: 100%;
    max-width: 500px;
    height: 280px;
    background-color: #131316;
    border: 2px solid #29292e;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.6);
}

/* Elementos de la Ilustración */
.element {
    position: absolute;
    background-color: #1c1c21;
    border: 1px solid #3c3c45;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: bold;
    color: #e1e1e6;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.element-math {
    width: 120px;
    height: 140px;
    top: 60px;
    left: 40px;
    background-color: #4c1d95; /* Bloque morado fuerte */
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-5deg);
    border: 1px solid #7c3aed;
    box-shadow: 0 5px 15px rgba(124, 58, 237, 0.4);
}

.element-geometry { top: 30px; right: 120px; color: #9871f5; }
.element-numbers { bottom: 40px; right: 140px; }
.element-symbol { top: 100px; right: 40px; font-size: 1.3rem; border-radius: 50%; color: #9871f5; border-color: #6d28d9; }
.element-pi { bottom: 30px; left: 180px; font-size: 1.8rem; background: none; border: none; color: #4d4d57; }
.element-star { top: 30px; left: 180px; font-size: 1.2rem; background: none; border: none; color: #7c3aed; }

/* --- Sección de la Tabla --- */
.content-section {
    padding: 40px 30px;
}

.section-title {
    font-size: 1.4rem;
    color: #ffffff;
    margin-bottom: 25px;
    text-align: center;
    letter-spacing: 0.5px;
}

.content-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    background-color: #0f0f12;
}

/* Encabezados morado con negro */
.content-table th {
    background-color: #050506;
    color: #9871f5;
    font-weight: 600;
    text-align: left;
    padding: 14px 16px;
    font-size: 0.95rem;
    border-bottom: 2px solid #5b21b6;
}

.content-table td {
    padding: 18px 16px;
    border-bottom: 1px solid #1f1f23;
    font-size: 0.9rem;
}

.content-table tr:hover td {
    background-color: #141419; /* Efecto sutil al pasar sobre la fila */
}

/* Columnas */
.col-section {
    font-weight: bold;
    color: #ffffff;
    width: 25%;
}

.col-desc {
    color: #a8a8b3;
    width: 60%;
    line-height: 1.5;
}

.col-btn {
    width: 15%;
    text-align: center;
}

/* Botones Ovalados Morados */
.btn-enter {
    display: inline-block;
    background-color: #6d28d9;
    color: #ffffff;
    text-decoration: none;
    padding: 7px 22px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid #7c3aed;
    box-shadow: 0 2px 8px rgba(109, 40, 217, 0.3);
    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn-enter:hover {
    background-color: #5b21b6;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(109, 40, 217, 0.5);
}