/* --- Variables de Color (Paleta Cohesionada) --- */
:root {
    --bg-main: #12141c;         /* Fondo general muy oscuro */
    --bg-card: #1a1e29;         /* Fondo de tarjetas / contenedores */
    --accent: #3b82f6;          /* Color principal (botones y acentos) */
    --accent-hover: #2563eb;    /* Color del botón al pasar el ratón */
    --text-main: #f3f4f6;       /* Texto principal (blanco suave) */
    --text-muted: #9ca3af;      /* Texto secundario (gris claro) */
    --radius: 12px;             /* Esquinas redondeadas unificadas */
}

/* --- Box-sizing global (evita que padding/border rompan anchos) --- */
*, *::before, *::after {
    box-sizing: border-box;
}

/* --- Estilos Generales y Truco del Sticky Footer --- */
html, body {
    height: 100%;               /* Obliga a la página a ocupar toda la pantalla */
    margin: 0;
    display: flex;
    flex-direction: column;     /* Organiza los elementos en columna vertical */
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: 2rem;
    line-height: 1.5;
}

/* --- Contenedores / Ventanas con esquinas redondeadas --- */
/* Excluye el footer y el placeholder del nav para que no hereden estilo de "tarjeta" */
.card, body > div:not(.footer-real):not(#nav-placeholder) {
    background-color: var(--bg-card);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
    margin-bottom: 1.5rem;
    flex: 1;                    /* ¡Magia! Estira el contenido y empuja el footer abajo */
}

/* --- Tipografía Gruesa (Bold) --- */
h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.025em;
    margin-top: 0;
}

p, span, label {
    font-weight: 800;           /* Aplicado globalmente tal como querías */
    color: var(--text-muted);
}

/* --- Botones a juego con la paleta y esquinas redondeadas --- */
.btn, button, nav a {
    background-color: var(--accent);
    color: var(--text-main);
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn:hover, button:hover, nav a:hover {
    background-color: var(--accent-hover);
    transform: translateY(-1px);
}

/* --- Barra de navegación limpia --- */
nav {
    background-color: var(--bg-card);
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

/* --- Estilos y posición fija del Footer único --- */
.footer-real {
    background-color: var(--bg-card);
    color: var(--text-muted);
    text-align: center;
    padding: 1.5rem;
    margin-top: auto;                 /* Se asegura de caer al fondo */
    border-radius: var(--radius) var(--radius) 0 0; /* Esquinas redondeadas arriba */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-real a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.footer-real a:hover {
    text-decoration: underline;
}