* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Usaremos una fuente más moderna como 'Poppins' si está disponible, si no, usa el fallback */
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body {
    background-color: var(--color-background);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Añadimos un sutil efecto de fondo (simulando estrellas o nebulosa) */
    background-image: radial-gradient(circle at 10% 20%, rgba(20, 40, 70, 0.5) 0%, rgba(10, 25, 55, 0) 60%),
                      radial-gradient(circle at 90% 80%, rgba(50, 80, 120, 0.3) 0%, rgba(10, 25, 55, 0) 70%);
}

/* --- Variables y Reset Básico (Actualizado) --- */
:root {
    /* Colores primarios */
    --color-primary: #3498db; /* Azul dominante, más limpio */
    --color-accent: #1abc9c; /* Cian/Verde acento para destacar elementos */
    --color-background: #1b2e53; /* Azul oscuro profundo (Navy Blue) */
    --color-box-background: #1b2e53; /* Azul más claro para el contenedor */
    --color-text-light: #ecf0f1; /* Blanco suave */
    --color-text-subtle: #bdc3c7; /* Gris claro para descripciones */

    /* Sombras y efectos */
    --shadow-light: 0 0 30px rgba(52, 152, 219, 0.15); /* Sombra sutil de acento */
    --shadow-box: 0 8px 25px rgba(0, 0, 0, 0.5);
    --border-radius-base: 8px;
}